Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail dimana artikel tidak ahanya  menampilkan "Judul" saja pada setiap artikel yg terkait, tetapi juga di barengi dengan sebuah gambar pada artikel yg terkait pada postingan sobat, jadi intinya sobat tinggal memilih satu di antara 2 artiket tersebut. pilih yg sesuai dengan design Blogspot sobat ..

Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

1. Login ke Bloggger sobat --Dasbor--Template--Edit HTML:

    *jangan lupa centang Expand Widget Template

2. Cari Code </head> [Tekan F3 pada keybord sobat  untuk mempermudah pencarian]

     *letakkan Code di bawah ini , tepat di atas Code </head>

---

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CVkoP4nndzXnpjdFnc9ydpXGgas3rHstERLyTC-bXCqyWYNNNKYMrckS8LWX16lzDSToc3sFG7nT1ZkFmNX1_EaeghjYnW6_GkjyAZKrs-dbXoHa28OnTeVcqNgt-GcMOB4kemSeRWo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.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-->

---

Keterangan :
- Code yg ditandai dengan warna biru itu adalah untuk menampilkan Gambar/Thumbnail di setiap halaman. jadi apa bila sobat tidak ingin menampilkan di setiap halaman, maka hapus saja 2 code biru di atas ..
- Rubah/ Ganti setiap Code yg ditandai dengan warna merah menurut selera sobat

3. Selanjutnya carilah kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> [di karenakan Code template di masing" Blogger  berbeda, maka silakan cari salah 1 dari 2 code di atas] Bila sudah ketemu.

* letakkan Kode di bawah ini, tepat di bawah salah satu Code di atas ..

---

<!-- 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>

---

Ket :
- Ganti code yg ditandai dengan warna merah menurut selera sobat ..
- Ganti Juga Tulisan yg seperti Code warna biru di atas .. Bila ingin menampilkan di halaman Posting saja ..

4. Click Preview untuk melihat apakah ada yg Error .. bila tidak ada yg Error , sialkan sobat click "Simpan Template"

Nah sampai di sini dulu Artikel tentang "Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail"
Apabila sobat masih sedikit tidak mengerti tentang tutorial di atas .. silakan tanyakan melalui post komentar di bawah ini ..

Semoga artikel ini memeberi manfaat untuk kita semua ..

Share :

• Tweet

Related posts

Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

Description: Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail Rating: 4.5 Reviewer: Unknown ItemReviewed: Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

Al

Mbah Qopet Updated at: 08.47