8

Related Post With Icon

May 29, 2012

Related Post With Icon - Bersabar membuat posting menunggu sampai berjam-jam untuk mencari signal yang baik, sangking moderennya zaman sekarang modem sudah tahu cari masalah...
Lupain masalah modem sekarang berinjak ke tutorial, tutorial kali ini ada yang mesen katanya minta dibuatin tutornya, jika menunggu tutorial ini agak lama maaf karena problem seperti di atas tidak bisa diajak kompromi, karena males merancang kode-kode ini maka saya tidak mau ambil pusing dan hanya mengambil tutorial ini dari Kang Salman.
Hal yang perlu diperhatikan dalam membuat tutorial ini adalah berhati-hati dan utamakanlah membaca Basmallah...
Langsung saja kita mulai

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up Template anda untuk berjaga-jaga apabila terjadi kesalahan
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl F untuk mencari kode </head> kemudian kode ini letakkan dibawahnya
<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ8z4jkTRRy7lZ1FkIk2_94Y_hNbCq0zHnpf2qhlUm6qAqI_oMgeTswZKeZ3mYDo_Q3aXEmH0hd0so4GVDtHwqko1kFt1DolPjE5fjvRsz_9L82wwfN1TDcRpmj2vl66jFLunn-1V2A30/&quot;) no-repeat 0 0; 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; } </style> <script src='http://koderator.googlecode.com/files/relatedpost.js' type='text/javascript'/>
Langkah 3
Jika sudah lalu cari kode <data:post.body/> biasanya ada 2 kode serupa lalu tempatkan dibawahnya kode yang ke 2

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#222222'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Jangan kaget kalau hasilnya beda, karena related post yang saya gunakan sudah dimodif
Langkah Terakhir klik simpan dan lihat hasilnya...
Semoga bermanfaat dan jangan bosan-bosan berkunjung di blog ini, sekian dan terimakasih.

Labels:

8 Komentar:

Blogger Unknown said on May 30, 2012 at 12:29 PM 

thanks bro ...

Anonymous Opick said on May 31, 2012 at 7:40 PM 

mantep, udah ane coba tuh gan :p

Anonymous penerjemah bahasa mandarin said on June 1, 2012 at 7:30 AM 

sip...bismillah ane coba sob n thanks

Anonymous TambelanBlog said on June 6, 2012 at 4:30 PM 

Ide memasukkan Related Post dengan Icon pada postingan seperti diatas sangat menarik dan tentu saja saya berterimakasih karena saya bisa mendapatkan pengetahuan baru tentang hal ini.

Terus berkreasi sobat
Salam dari TambelanBlog

Anonymous Seputar Informasi TIK said on June 26, 2012 at 2:32 PM 

makasih related postnya ya... :))

Anonymous Anonymous said on July 21, 2012 at 6:50 PM 

saya pasang related post dengan yang pake thumbnail atau icon sepert di atas ko gak ada yang mau work ya?
apa template saya tidak support untuk pasang related post?
mohon pencerahan nya yaa.. :)

Blogger Unknown said on July 21, 2012 at 8:38 PM 

@ade sunjana coba diletakin di
<data:post.body/>
yang pertama

Anonymous informasi astronomi said on September 29, 2012 at 9:46 AM 

mantab dah masbro tapi gimna caranya memperbesar fontnya ?

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger