Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails




http://cara-tips-dan-informasi.blogspot.com/2013/11/cara-membuat-artikel-terkait-berbentuk.html 

Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Bentuk artikel terkait dengan gambar thumbnail seperti sobat temui pada Blog sederhana ini. Di samping bentuk ‘style’ yang menarik, juga dilengkap screenshoot gambar yang menambah nilai plus ketertarikan pengunjung. Di sisi lain, jumlah tampilan perlabel relatif sedikit, tidak seperti artikel terkait dengan menggunakan scroll. Namun menurut penulis, artikel terkait ini cukup modis dan perlu diterapkan pada Blog. Untuk pemasangannya, silahkan ikuti langkah-langkah berikut ini:
1. Login diakun Blogger sobat,
2. Pada halaman Dasbor, pergi ke Template dan pilih Edit HTML,
3. Pada kotak editor template, sembarang klik disalah satu ‘box’ tersebut, dan
    tekan Ctrl + F, silahkan cari kode </head>,
4. Letakkan CSS dan JavaScript berikut ini sebelum kode </head>,

 <!--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.3em;
font-weight: bold;
color: #000000;
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:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Setelah script di atas, cari kode <div class='post-footer'> atau
   <div class='post-footer-line post-footer-line-1'/>, letakkan script berikut di atas kode
    tersebut.
 <!-- 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-->

 Angka berwarna biru adalah jumlah posting tampilan related post,
 sesuaikan dengan lebar Blog sobat.

6. Terakhir, klik Simpan Template.



0 komentar to "Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails"

Posting Komentar

Diberdayakan oleh Blogger.
SEO Reports for cara-tips-dan-informasi.blogspot.com My Ping in TotalPing.com

Blog Ini Dilindungi Oleh :

About This Blog

Selamat Datang Di Blog Cara, Tips dan Informasi.... Cara, Tips dan Informasi menyajikan berbagai Cara, Tips, Informasi, & berbagai Download... Semoga bermanfaat..

Popular Posts

Label

Translate

Followers

Iklan

Pasang Iklan disini
Pasang Iklan disini

Powered by 123ContactForm | Report abuse