March 29, 2012

Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot

Artikel Terkait Thumbnails
Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot. Artikel Terkait Disertai Thumbnails Pada Blogspot atau mungkin artikel yang berhubungan, atau sejenisnya sangat penting sekali. Kenapa demikian, visitor akan dimudahkan untuk mengelilingi (surfing) blog kita.

Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot ini merupakan salah satu tips untuk menaikkan page view pada blog. Artikel terkait ini akan tampil dengan Thumbnails disertai Judul Postingan kita.

Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot :

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Copy paste Script berikut ini di atasnya

   <!--Start Related Posts-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts*{
    float:center;
    text-transform:none;
    height:60%;
    min-height:60%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.5em;
    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 type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3X4luJx6YhnrZ-xlXECPkzqZYowMp4UpzpZjLEEo60VnlHBaDXJ8PjognyURNCGhS1rERbwyL4lQ2K81cOswa57w4Ez8R90QMvZDox2nCPQcfTOWVVKOh1yGi8STVGBDvWcpQLHIx6jz/s1600/No+Image.jpg&quot;;
    var maxresults=6;
    var splittercolor=&quot;#000000&quot;;
    var relatedpoststitle=&quot;Artikel Terkait:&quot;;
    </script>
    <script src='http://related-post-05.googlecode.com/files/Related-Post.js' type='text/javascript'/>
    </b:if>
    <!--End Related Post-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>
Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh Copy Paste Script berikut ini di bawah salah satu kode di atas (no.7)

<!-- Start Related Posts-->
<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>
<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=9&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts-->

8. Kalau sudah selesai jangan lupa klik save template
9. Selesai.


Catatan:
  • Jumlah artikel terkait / label
var maxresults=6;
  • Judul artikel terkait
max-results=9
  • var relatedpoststitle="Artikel Terkait";
  • Warna tulisan pada artikel yang terkait, silahkan diganti sesuai keinginan.
var splittercolor="#d4eaf2";
  • Artikel Terkait Disertai Thumbnails Pada Blogspot ini hanya muncul pada halaman posting, jika ingin Artikel Terkait Disertai Thumbnails Pada Blogspot ini muncul di semua halaman blog, kita bisa menghapus kode
<b:if cond='data:blog.pageType == &quot;item&quot;'> dan
</b:if>
Demikian Postingan Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot

Semoga Manfaat.

Related Posts

Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot
4/ 5
Oleh :

12 comments

ini nih baru kerenn .... hehehehe ....

Thank's tutorialnya sobat, sangat bermanfaat

@deby putra bahrodin
Makasih kunjungannya Teman. Sukses ya.



@Master Software Mobile
Silahkan dicoba Gan.

kalau sy lagi cara membuat artikel terpopuler sob, gimana yach widgetnya, uda sering coba tp belum ada yg pas di hati sobat...

@Asis Sugianto
yang pake image atau gimana Kang, banyak modelnya nya sih....

okeyy...turut menyimak tipsnya ya..dah pasang related post'nya..

@Ririe Khayan
Makasih kunjungannya Mbak Ririe.

udah tak coba berkali kali tapi kok gak bisa ya??? mohon penjelasan!!!
HttP://ysardika.blogspot.com

saya coba, kenapa gambar tidak ada yang keluar ya? pusing saya jadinya... -,-

@Millatina Fahman
Maaf terlambat Update nya Millatina Fahman, Script nya sudah diperbaiki. Semoga Manfaat

makasih tutorialnya sudah saya aplikasikan pada blog saya sob

@Mas Tosu
Semoga manfaat teman