Minggu, 21 April 2013

Cara Membuat Artikel Terkait di Sertai Gambar

cara membuat artikel terkait dengan gamebar
Apa kabar sobat blogger? pada hari yang cerah ini saya akan berbagi sebuah tutorial blog, yang sebelumnya saya pernah membuat tutorial tentang Cara Membuat Artikel Terkait.  Perbedaannya dengan yang terdahulu yaitu, teletak pada gambar, kalau yang terdulu tidak memakai gambar akan tetapi sekarang yang akan saya share, di sertai gambar.

Untuk apa Membuat Related Post atau Artikel Terkait? menurut saya memasang hal tersebut selain mempercantik blog, juga dapat berfungsi membantu pengunjung untuk melihat artikel lain yang berhubungan dengan artikel yang sedang di baca. Jadi dengan begitu akan membuat betah pengunjung dan juga bisa meningkatkan pageview blog kita.

Ok sob, jika anda tertarik untuk membuat Related Post atau Artikel Terkait di blog kesayangan sobat, ikuti langkah - langkah berikut!

Cara Membuat Artikel Terkait di Sertai Gambar :
  1. Login Blogger kesayangan sobat.
  2. Template > Edit HTML
  3. Jangan lupa centang pada Expand Template Widget
  4. Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
  5. Lalu Copy kode berikut dan letakan tepat diatas kode </head>
<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCxqP6EidCktGzzhAqV5CkZoq3XyiZEVVqYRRi46ggpRpF1rJuECfry9I1rGTTBmGWZS3RQjLl4qSFLL8jIul4RFlsYc0vveNae_e_o4lek7QpB44mttyLvBOqFTKYdehNhRm1Hqv_hmC/s1600/No+Image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;Artikel Terkait:&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->
    6. Selanjutnya cari kode <data:post.body/> ( Jika ada dua kode, pilih bagian yang kedua ) :

    7. Kalau kode diatas sudah ketemu, Sekarang copy'lah script berikut :
<!-- 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=7&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. Paste'kan kode script diatas tepat dibawah kode :
<data:post.body/>
    9. Langkah terakhir klik Simpan Template.


NOT : Untuk kata berikut bisa anda ganti sesuai apa yang anda kehendaki :
  • max-results=7  = Jumlah artikel yang akan di tampilkan
  • Artikel Terkait  = Judul (anda bisa menggantinya, contoh : related post
  • #000000          = Warna Tulisan

Sekian dari tutorial saya kali ini, semoga dapat bermanfaat bagi kalian semua.


10 komentar:

  1. Thanks gan infonya ....langsung ane coba
    visit back http://novaibnu.blogspot.com

    BalasHapus
    Balasan
    1. Sama-sama gan. Terimakasih juga atas kunjungannya.

      Hapus
  2. bos, di template ane gak bisa muncul bos... gmn solusinya bos?

    BalasHapus
  3. jangan lupa kunjungi blog i'am
    http://anpezwarteg.blogspot.com

    BalasHapus
  4. berhasil di http://alhabibi89.blogspot.com
    tq mas :)

    BalasHapus
  5. Saya belum berhasil gan,,
    ntah knp tidak bisa di template blog ane

    BalasHapus
    Balasan
    1. Mungkin salah menempatkan script yang di bawah data:postbody. Karena sript data:postbody kemungkinan di setiap template berbeda jumlah dan letaknya.
      Saran saya coba satu-satu menaruh script tersebut. kalau masih gak nongol juga ber'arti tamplate agan gak cocok.
      terimakasih atas kunjungannya gan :)

      Hapus
  6. cara no.4 gak ada, ini gimana?

    BalasHapus
    Balasan
    1. Masa gak ada? Coba di cari lagi dengan mengunakan CTRL+F

      Hapus
  7. thanks infonya. visit my blog at : http://inulwara.blogspot.com

    BalasHapus