Relatad post for Blogspot

Relatad post for Blogspot- tutorial Relatad post for Blogspot atau cara membuat Relatad post di blogspot dengan SEO Friendly. Tampilan related post seo friendly juga menarik, disamping code yang ringan ada satu rahasia yang terkandung didalam related post seo friendly yaitu memiliki sistem Breadcrumb dari www.data-vocabulary.org yang telah saya padukan sehingga related post seo friendly ini memiliki struktur yang SEO Friendly dan lihat hasilnya di google structured data testing tool ( Richsnippets ). Nah bila anda sudah memahaminya dan ingin melihat hasil tampilannya silahkan klik link demo dibawah kemudian lihat bagian bawah postingan yang bertuliskan ( Related Post )dan bila anda tertarik memasangnya silahkan simak tutorial dibawah ini..

Klik DEMO

Install code CSS related post seo friendly

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code
   
   Code:

   ]]></b:skin>
   

   [/b]
4. Copy Code CSS dibawah ini, pastekan diatas code
   
   Code:

   ]]></b:skin>
   

    tadi atau bila template blog anda memakai
   
   Code:

   </style>
   

   silahkan pastekan kode CSSnya tepat diatas
   
   Code:

   </style>
   

   template anda. Edit code tersebut dan save template anda.

Spoiler

Code:

/*****************************************
Name : related post seo friendly
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Sabtu 08 February 2014
*****************************************/
.breadcrumbs-label {padding :0;margin : 0;font-size : 11px;font-weight : normal;}
.breadcrumbs-label a{font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #A81365;text-decoration: none;}
.breadcrumbs-label a:hover{color: #0000FF;}
.breadcrumbs-label .titles {color: #0000ff;}
#ibrelated-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #ibrelated-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#ibrelated-posts .widget h2, #ibrelated-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#ibrelated-posts a { text-decoration : none; }
#ibrelated-posts a:hover { text-decoration : none; }
#ibrelated-posts ul { border : medium none; margin : 10px; padding : 0; }
#ibrelated-posts ul li { display : block; background : url("http://3.bp.blogspot.com/-o_Brno4grYw/UvYD2IP-4oI/AAAAAAAACO0/wM9saeeAB0Q/s1600/ideblogspotrss.gif") no-repeat 0 6px; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
/* related post seo friendly */

Untuk memasang code HTMLnya silahkan cari code

Code:

<data:post.body/>

setelah ketemu copy code dibawah ini dan pastekan tepat dibawah code

Code:

<data:post.body/>

, bila anda ingin mengganti related post blog anda yang lama silahkan ganti dengan code dibawah ini..

Spoiler

Code:

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><script src='http://yourjavascript.com/2942361424/relatedpost.js' type='text/javascript'/> <div><b>Related Posts : </b></div><div><div class='breadcrumbs-label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='title'> Home </span> </a> </span> » <b:loop values='data:post.labels' var='label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:label.url + "?&amp;max-results=10"' expr:title='data:label.name' itemprop='url'> <span itemprop='title'> <data:label.name/> </span> </a> </span> <b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span class='titles'> <data:post.title/> </span> </div><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3"' type='text/javascript'/></b:if></b:loop> </div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> <div style='clear: both;'/>

Silahkan anda tanyakan bila ada yang perlu ditanyakan, semoga bermanfaat, salam blogger..
Sumber : http://www.ideblogspot.com/2014/02/related-post-seo-friendly.html

 

Lumayan nih mas related

Lumayan nih mas related postnya, simple dan ringan

 

lumayan keren, coba dsini

lumayan keren, coba dsini http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html

lebih lengkap

 

thx gan...

thx atas pendapatnya gan memang lebih ringan gan,

 

cayun wrote:

iya memang agan DTE sudah pernah membuat suatu software scriptnya editornya, tapi pernah saya coba hasil render Scriptnya masih sedikit berat gan, dan untuk menghasilkan tampilan related post yang lebih beda harus berpikir lagi gan, makanya sebenarnya software aplikasi seperti itu pemakainya terbatas, tidak semua gan harus kudu mahir pengkodean lagi untuk memodifikasinya, kalo newbie seperti saya wah harus satu bulanan untuk membuat suatu tampilan yang menarik itupun kalo ada waktu heheh , untuk software creator script online gratis memang suah banyak gan tapi, hasil akhirnya yang puyeng mikirinnya gimana tampilannya ...

thx atas sharenya... dan mengingatkan gan....
makasih banyak..

 

Apakah ada cara lain selain

Apakah ada cara lain selain javascript?
Saya pingin nya sih tanpa javascript.

 

Bookmark dulu,

udah punya related pos mas, hehehe

 

oh...

okelah terimakasih atas kunjungannya...