cara membuat related post seo friendly

Cara membuat related post seo friendly - trik cara membuat related post seo friendly atau cara membuat related post seo friendly di blogspot. Artikel cara membuat related post seo friendly di blogspot ini terinspirasi dari seorang sahabat logger lama yang telah susah payah memikirkan bagaimana cara membuat widget related post yang lebih seo friendly walau dalam pemakaian sistem script untuk menampilkannya. Artikel cara membuat related post seo friendly ini sudah menghabiskan 4 bln lebih waktu saya dan pemikiran saya untuk menemukan trik ini, dan memang sangat memuaskan hasilnya. Untuk melihat tampilan cara membuat related post seo friendly ini silahkan anda klik DEMO dibawah, lihat bagian related post pada laman demo, bila anda tertarik untuk memasang widget ini dihalaman blogspot anda silahkan lihat tutorial dibawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BHPHwML90AmbGuaOODDYFVi4ovlHpkYcpDU6FabMtLG961DRx4UHcRLgMP-WDpIRBCAV7XimLMIm1MFd93MYPqv1kOwH5XJc6kP-r1T5zdD2lj4LsWwYMVkF4_Ve9ZAAddOKyQ3_0WM/s1600/ideblogspotrss.gif&quot;) 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 */

Install Program Tag HTML

• Setelah anda sudah memasang CSS cara membuat Google Plus buttons style saatnya anda memasang kode htmlnya.
• Copy code html cara membuat related post seo friendly dibawah ini dan pasang dibawah code <data:post.body/> template anda save dan lihat hasilnya...
  

<!-- related post seo friendly code start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><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> &#187; <b:loop values='data:post.labels' var='label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;' expr:title='data:label.name' itemprop='url'> <span itemprop='title'> <data:label.name/> </span> </a> </span> <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span class='titles'> <data:post.title/> </span> </div><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop> </div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> <div style='clear: both;'/>
<!-- related post seo friendly code end-->

Kesimpulan

cara membuat related post seo friendly pada postingan kali ini memiliki code yang ringan , SEO Friendly, Valid HTML 5, valid CSS 3 dan tampilan yang menarik walaupun sederhana.
Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/02/related-post-seo-friendly.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 9:07 PM