Tutorial blogspot, belajar blog, membuat html dasar, perbaiki template,Tutorial Blog, HTML, Cara membuat, attribution blog, warna html,css kode

Jumat, 22 Juli 2011

Cara membuat thumbnail berjalan

Menampilkan link ke posting terkait bersama dengan thumbnail dari pos yang sesuai akan membantu Anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk pergi untuk posting yang berkaitan ketika mereka disajikan menarik dengan thumbnail.
Ini juga menggunakan media yang dihasilkan oleh thumbnail blogger untuk setiap posting.


Untuk menampilkan thumbnail, widget ini akan menggunakan gambar upload untuk posting yang menggunakan blogger uploader gambar (dari editor posting).
Related Posts Widget untuk Blogger dengan Thumbnail

Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail :



1. Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates"

2. Cari kode ini </head>

3. Kemudian ganti dengan kode dibawah ini

<!--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.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Sekarang cari lagi kode dibawah

<div class='post-footer-line post-footer-line-1'>

Jika tidak menemukan kode diatas, coba cari kode seperti ini

<p class='post-footer-line post-footer-line-1'>

Kalo sudah ketemu, tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang rekan temukan.

<!-- Marquee Serbablog 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=
10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

- Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna merah


5. Simpan dan lihat hasilnya

Semoga bermanfaat

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara membuat thumbnail berjalan

10 komentar:

  1. Akan dicoba .. jgn lupa kunjungan balik y gan !?

    BalasHapus
  2. keren ne tutorial sob .. Terimakasih.

    BalasHapus
  3. @Pernak-pernik,ok sob !

    @Anonim, TQ

    BalasHapus
  4. @Lifestyle Terima kasih kembali gan :)

    BalasHapus
  5. @Rozi : silahkan gan mumpung gratis :)

    BalasHapus
  6. Aku pengen banget pasang headline news kaya punya Mas Bro di atas, mohon kasih tau caranya plus scriptnya Mas, pliis ya!!, Makasih banyak

    BalasHapus