Loading...

Cara Menambah Related Posts dengan Thumbnail di Blogger


Bagaimana cara menambah related post atau artikel terkait bawah setiap posting blog dengan thumbnail?.
Artikel-artikel terkait dipilih dari pesan lainnya dalam kategori yang sama / label / tag. Dengan hack ini banyak pembaca yang akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan.
Langkah menambahkan Posting terkait Widget ke Blogger / Blogspot

. Langkah 1 Kembali ke Blogger Dashboard >> Template >> Edit HTML;

Langkah 2. Centang pada "Expand widget template" kotak;

Langkah 3 Cari (CTRL + F) untuk potongan kode ini.:

</ Head>

Langkah 4. Copy dan paste kode di bawah ini sebelum / di atas </ head>


<-! Posting terkait dengan thumbnail Script dan Styles Start ->
<-! Hapus -> <b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
# Terkait-posting {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-top: 5px;
padding-left: 5px;
}

# Terkait-posting h2 {
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: # 5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0EM;
padding-top: 0EM;
}
-Posting yang berkaitan # a {
border-right: 1px dotted # DDDDDD;
color: # 5D5D5D;
}
-Posting yang berkaitan # a: hover {
warna: hitam;
background-color: # EDEDEF;
}
</ Style>
<script type='text/javascript'>
var
var maxresults = 5;
var splittercolor = "# DDDDDD";
var relatedpoststitle = "Related Posts";
</ Script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<-! Hapus -> </ b: if>
<-! Posting terkait dengan thumbnail Script dan Styles End ->

Catatan:
- Untuk mengubah gambar default, ganti URL dengan warna biru dengan Anda sendiri
- Untuk menampilkan lebih dari 5 posting, ganti 5 nilai dari "var maxresults = 5;"
- Menghapus kode di ungu jika Anda ingin posting terkait yang akan ditampilkan dalam homepage juga

Langkah 5 Sekarang cari kode berikut.:

<div class='post-footer'>

Langkah 6.   Dan di atasnya, copy dan paste kode di bawah ini:

<-! Related Posts dengan Thumbnail Kode Start ->
<-! Hapus -> <b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if != cond='data:label.isLast "true"'>
</ B: if>
<Script expr: src = '"/ feeds/posts/default/- /" + Data: label.name + "? Alt = json-in-script & callback = related_results_labels_thumbs & max-results = 6"' type = 'text / javascript' /> </ b: lingkaran>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs ();
printRelatedLabels_thumbs ("<data:post.url/>");
</ Script>
</ Div> style='clear:both'/>
<-! Hapus -> </ b: if>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'> <img alt = 'Blogger Trik'
</ B: if> </ b: if>
<-! Related Posts dengan Thumbnail Kode End ->

Catatan:
- Mengubah nilai 6 dari max-results = 6 dengan jumlah posting yang ingin ditampilkan.
- Jika Anda ingin posting terkait yang akan ditampilkan pada homepage juga, menghapus kode di violet.

Langkah 7. Simpan Template

Semoga Bermanfaat! ^_^


Pesan Mini : Dunia ini tak selebar daun kelor, kenali wajah duniamu dengan baik.

0 comments:

Post a Comment

*Sebelum pergi, Harap Tinggalkan Link dan Komentar Anda*

 
TOP