Sunday, 18 December 2011

Membuat related post (artikel terkait) thumbnail di blogger

Selain menambah style dari blog, related post / artikel terkait juga dapat membuat trafic blog kita meningkat. dengan adanya related post / artikel terkait para pembaca yang membaca postingan blog kita bisa melihat postingan-postingan yang berada dalam katagori yang sama dengan apa yang dibaca. Dengan ini pembaca bisa tertarik dengan judul postingan yang lainnya...tentunya dengan lampiran gambar dari artikelnya... (bisa dilihat seperti Gambar diatas)....

OK..langsung ajha ke TKP....

  1. seperti biasa login ke blogger sobat
  2. langsung ajha ke perancangan > edit html
  3. centang expand widget
  4. cari tag </head> (tekan ctrl+f biar gampang)
  5. pastekan kode dibawah ini tepat diatas kode </head>
  6. <!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://otakatikotak.ucoz.com/upload/relatedpost.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
  7. selanjutnya cari kode berikut :
  8. <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
  9. kalah sudah ketemu pastekan kode berikut tepat dibawah kode diatas tadi
  10. <!-- Marquee Serbablog Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop> <h3><b>Related Posts</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=10; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://shareiniitu.blogspot.com/2011/12/membuat-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a> <a href='http://shareiniitu.blogspot.com/' style='display:none;'>blogger tutorials</a> </b:if> </b:if> <!-- Marquee Serbablog Related Posts with Thumbnails Code End-->
    note: Bagian bewarna merah dan tebal adalah maximum related post / artikel terkait yang akan tampil dihalaman posting.. soo bisa sobat ganti sesuai kebutuhan sobat.
  11. step terakhir....Save template

note: jika related post / artikel terkait tidak tampil dihalaman postingan sobat.. coba pastekan kode no 7 pada kode <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> atau jika ada lebih dari satu post-footer-line-1 , post-footer-line-2 , post-footer-line-3, dicoba juga pastekan pada salah satunya... ingat...jangan sekaligus..coba satu persatu...

4 komentar

Thanks, Gan.
Saya udah coba dua kode script dari sumber berbeda tapi belum juga ada haslnya, tapi setelah nyoba kode ini berhasil.
Sorry, ga ada sistem GRP/ cendol di blogger :P.
Tapi...kalo 10 kayaknya kebanyakan, jadi punya saya saya modifikasi jadi 5 :D.

seep gan..senang bisa bisa membantu :)

mantep gan..tinggal sesuaikan ajha ama kebutuhan :)

thank you atas informnasinya
by : mhdayubnst.blogspot.com

Silahkan berkomentar dengan bijak. Setelah anda mampir dan berkomentar, saya akan berkunjung balik. Dan jangan meninggalkan link hidup ya, Terimakasih :)
EmoticonEmoticon