Cara Buat Related Post Dengan Thumbnail Mudah - Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat related post. Namun related Post itu tanpa thumbnails atau tanpa gambar atau image. Related post with thumbnail ini karena menyertakan gambar maka akan menarik pengunjung untuk mengunjungi halaman terkait. Fungsi dari related post silahkan simak pada artikel cara membuat related post sebelumnya.
Tampilan related post with thumbnail silahkan lihat screenshoot di atas.
Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail.
Sudah siap menyimak tutorial blogger yang akan saya sampaikan?
Oke, Mari kita simak bersama cara membuat related post with thumbnail berikut ini:
Tampilan related post with thumbnail silahkan lihat screenshoot di atas.
Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail.
Sudah siap menyimak tutorial blogger yang akan saya sampaikan?
Oke, Mari kita simak bersama cara membuat related post with thumbnail berikut ini:
1. Masuk Dasbor Blog kamu.
2. Template > Edit HTML > Lanjutkan
3. Centang Exspnd Template Widget
4. Cari kode: </head>
5. Letakkan kode berikut diatas </head>
6. Cari:<p class='post-footer-line post-footer-line-1'/>
7. Letakan kode berikut ini tepat di bawah kode no.:6.
<!--Related Posts with thumbnails Start-->Keterangan kode:
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSzbkgn_vNWEYGnYvOkWUTq9f0P8afBzkfD7F8EFiqNw19tPC0UyglA2bevVKeiyFcJ1B4CkYdgi4qh3-kQZJua9fcs-Ba-kki4pb7tbLF0mZDHcAzaYcBHf2F4UHnIj2J0xEkWjisG-Ho/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Artikel Terkait:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->
- Kode:#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar related post with thumbnail.
- Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.
6. Cari:<p class='post-footer-line post-footer-line-1'/>
7. Letakan kode berikut ini tepat di bawah kode no.:6.
<!-- Related Posts with ThumbnailsCode Start-->Keterangan kode:
<!-- remove --><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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
- Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan.
Semoga Bermanfaat :)
Anda sedang membaca artikel tentang Cara Buat Related Post Dengan Thumbnail Mudah dan anda bisa menemukan artikel Cara Buat Related Post Dengan Thumbnail Mudah ini dengan url http://agraanggakara.blogspot.com/2013/11/cara-buat-related-post-dengan-thumbnail.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Buat Related Post Dengan Thumbnail Mudah ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Buat Related Post Dengan Thumbnail Mudah sebagai sumbernya.
Related Post:
seo
- Cara Memasang Widget Share Melayang Di Blogger
- Gmail Atau Google Mail
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Gampang Pasang Navigasi Breadcrumbs di Blogger
- Cara Membuat Label di Blog
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Cara Memasang Widget Alexa
- Apa Sih Alexa Rank Itu?
- Cara Cepat Untuk Menurunkan Alexa Rank
- Daftar Blog Dofollow 2013
- Memasang Meta Tags otomatis Disetiap Postingan
- Cara Edit Page Title
tips
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Gampang Pasang Navigasi Breadcrumbs di Blogger
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Berbagai Emoticon Facebook Chat Box By Xat Keren
- Kode Emoticon Facebook Terlengkap Dan Terbaru
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Tips Cara Melihat ID Facebook Dengan Mudah Dan Cepat
- Website Pengukur Kecepatan Upload dan Download Sebuah Modem
- Cara Membuat Dan Berbagi Wifi Dengan CMD
blogspot
- Cara Memasang Widget Share Melayang Di Blogger
- Tutorial Cara Membuat Postingan Blog Dengan Gampang
- Cara Mudah dan Murah Membuat Blog di blogger.com
- Cara Buat Email Gmail Dengan Mudah dan Cepat
- Gmail Atau Google Mail
- Cara Menyembunyikan Navbar Pada Blogger Dengan Mudah
- Cara Mengganti Template Blog Download'an
- Cara Gampang Mengganti Template Blog
- Cara Membuat Read More Otomatis Pada Blogger Mudah
- Cara Menghilangkan Navbar Blogger Dengan Mudah
- Cara Buat Tombol Share Button di Atas Postingan Blog Kita
- Cara Gampang Pasang Navigasi Breadcrumbs di Blogger
- Cara Insert Gambar Pada Postingan Blog Kita
- Cara Pasang Widget Sharing is Caring Di Bawah Postingan
- Cara Membuat Label di Blog
- Cara Cepat Dan Mudah Untuk Parsing HTML
- Cara Mengukur Berat Blog Dengan Aplikasi Online
- Cara Mengukur Kecepatan Load Blog Dengan Aplikasi Online Numinion
- Pasang Widget Gambar HUT RI Ke-68 Keren
- Cara Memasang Gambar Animasi Dipojok Layar
- Memasang Berbagai Animasi Terbang Di Blog
- Cara Membuat Kotak Script Postingan
- Membuat Back To Top dengan Efek Jquery
- Cara Membuat Related Post berScroll
0 comments:
Post a Comment
Sisihkan waktu anda untuk berkomentar, tetapi berkomentarlah dengan bahasa yang baik dan sopan, Spam Sara dan Mencantumkan alamat Url tidak akan ditampilkan, Setiap komentar menunggu moderasi admin Terimakasih :)