Home » » Cara Membuat Artikel Terkait dengan Tumbnail

Cara Membuat Artikel Terkait dengan Tumbnail

Written By Unknown on Rabu, 28 Maret 2012 | 22.21

Cara Membuat Artikel Terkait dengan Tumbnail - Untuk Memancing pengunjung yang berada di blog kita agar betah, nyaman, dan berlama-lama di blog kita banyak cara untuk dilakukan. Salah satu cara yaitu menampilkan beberapa cuplikan posting yang terkait dengan posting yang sedang dibaca di bawah postingan tersebut. Apalagi artikel terkait tersebut dengan tumbnail, tentu akan semakin menarik. Silahkan Anda lihat Contohnya di SINI (lihat dibawahnya)

Nah, Kalau kemarin Belajar Blog berbagi pengalaman tentang Cara Membuat Daftar Isi Dropdown, Kali ini Belajar Blog akan berbagi pengalaman Bagaimana Cara Membuat Artikel Terkait dengan Tumbnail. Ini sangat mudah dilakukan. Silahkan Coppy pasta code di bawah ini. Namun ikuti langkah demi langkahnya dulu.
1. Masuk ke Dasbor - Rancangan - Edit HTML - Centang Expand Widget
Jangan lupa untuk save template dulu buat berjaga-jaga bila ini tidak berhasil dalam blog anda.
2. Cari code </head> ( Gunakan ctr-F biar lebih mudah) dan Copast code ini di ATAS nya

 <!--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:20px;
padding-left:5px;
}
#related-posts h2{

font-size: 1.6em;
font-weight: bold;
color: #3b3b3b;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#FF0000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


3. Cari kode <data:post.body/> (Jika blog anda sudah menggunakan READ MORE letakkan kode ini di BAWAH <data:post.body/> dibawah READ MORE. Biasanya yang ke 2 atau ke 3) Untuk kode yang satu ini silahkan di coba-coba di pindah sampai berhasil

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


4. Save dan lihat hasilnya.
  • maxresults=5; --> jumlah artikel yg akan ditampilkan(bisa anda robah nominalnya.
  • Artikel Terkait --> Judul yang akan di gunakan(bisa anda rubah sesuai keinginan)

Nah itu tadi Cara Membuat Artikel Terkait dengan Tumbnail yang bisa saya share. Semoga ini berhasil di blog anda.
Source: berbagai sumber

Mari beramal dengan Ilmu
Share this article :

0 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger