Global Informasi melalui internet

14 Sep 2014

Cara membuat artikel terkait dengan thumnail

Cara membuat artikel terkait dengan thumnail - Artikel terkait atau related post dalam dalam postingan sangatlah penting, karena dengan adanya artikel terkait (related post) kita bisa menunjukkan kepada pembaca untuk membaca artikel-artikel yang berhubungan dengan posting yang dibacanya, dan jika si pembaca tertarik maka si pembaca tersebut bisa berlama-lama di blog kita.

Cara membuat artiket terkait dengan thumnail


Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.
2. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
4. Klik tab Edit HTML
5.Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl +  F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.
6. Copy kode berikut dan paste di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:2px;
}

#related-posts h2{
text-align:center;margin:0
;height:25px;padding:5px 0px 0px;line-height:1.5em
;font:normal bold 100%&#39;Trebuchet MS&#39;,Verdana,Arial,Sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJokxWZrAiLrqeOVJoZg3PE2SrmJR1iyIIn5CqfDs6JQtd3yPXfHNzHxhfnaDr-WRhKI6TXfVGqzsM8lvXBe2P_d12BC3xyNBa2wcBzwWbI_o6tXX-1U-sAeA4Qb9slDjpEcqUolnoroA/s320/pelangi1.jpg) repeat-x;color:#FFFFFF;
}
#related-posts a{
color:#FF8000;
}
#related-posts a:hover{
color:red;
text-decoration:underline
}

#related-posts a:hover {
background-color:#484B52;
}

</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://andiknet-code.googlecode.com/svn/file/relatedpostthumbnailandiknet.js' type='text/javascript'/>
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->
   6. Cari code <data:post.body/>
   7. Copy kode berikut dan paste bawah kode <data:post.body/> 

<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>

8. Simpan.

untuk code <data:post.body/> biasanya lebih dari satu, coba anda pilih yang terakhir atau paling bawah.

dan jika themplate anda ada tombol share facebook, twitter dll
Cara membuat artiket terkait dengan thumnail
anda tinggal meletakkan dibawah tombol share jejaring social yang ada di themplate anda,,

Keterangan:
  • Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=6;
  • Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle=&quot;Artikel Terkait&quot;
  • Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg";
  • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor=&quot;#d4eaf2&quot;;
Share:

5 komentar:

  1. terima kasih infonya iya gan..
    kami tunggu post berikutnya

    salam kenal dan salam sukses selalu

    BalasHapus
  2. Thanks gan ilmunya ,,
    Please visit comeback

    http://idkaca.blogspot.com/

    BalasHapus
  3. dengan begini artikel terkait jadi nampak lebih menarik,
    Thanks ilmunya sob,

    BalasHapus
  4. ini dia yang saya cari, terimakasih atas infonya gan :)
    http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    BalasHapus
  5. Terima ksih artikelnya mas... saya rasa penambahan ini menambah SEO di blog kita..

    BalasHapus

👉Berkomentarlah yang sopan.. jangan membuat spam..
komentar berisi 👉promosi, judi, link video porno.. akan di hapus permanen.🚫

Support