Cara membuat Artikel terkait dengan Thumbnail

22/12/110 komentar


Sebelumnya saya telah tulis tentang cara membuat artikel terkait bergambar dengan linkwithin Nah,kali ini Ihttp://alhasyi.blogspot.coma memberikan tips blog tentang cara membuat related post dengan gambar thumbnail.lihat tampilan artikel terkait blog infonartikel terkait dengan thumbnail.
  1. Masuk ke akun Blogger Anda.
  2. Klik Rancangan.
  3. Klik tab Edit HTML.
  4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
  5. Beri tanda centang pada Expand Template Widget kamu.
  6. Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.
  7. Copy kode berikut dan paste di atas kode </head>


Sebelumnya saya telah tulis tentang
 cara membuat artikel terkait bergambar dengan linkwithin Nah,kali ini akan memberikan tips blog tentang cara membuat related post dengan gambar thumbnail.lihat tampilan artikel terkait blog infonetmu ini:

Berikut
 cara memasang artikel terkait dengan thumbnail.

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

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="
http://alhasyi.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=
5;
var splittercolor="
#d4eaf2";
var relatedpoststitle="
Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
8.    Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
9.    Copy kode berikut dan paste diatas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://infonetmu.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
10.  Klik tombol SIMPAN TEMPLATE.

Keterangan:
  • Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
  • Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
  • Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
  • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";


Terima kasih telah membaca artikel: Cara membuat Artikel terkait denga

Share this article :

Publicar un comentario

UCAPAN SELAMAT

Test Footer 1

k

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. KUMPULAN MAKALAH ALHASYI - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger