Quantcast
Channel: Grizenzio Orchivillando
Viewing all articles
Browse latest Browse all 942

Cara menambahkan Artikel Terkait Widget Untuk Blogger dengan Gambar Mini 2013

$
0
0
Cara luar biasa untuk menampilkan Artikel Terkait di bawah setiap posting blog Anda, bersama dengan gambar mini. Artikel-artikel terkait dipilih dari posting lainnya dalam kategori yang sama / label / tag. Dengan cara ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat Artikel Terkait.
related post, related posts blogger, blogger widgets
Langkah menambahkan Posting terkait Widget ke Blogger / Blogspot

Langkah 1. Buka Blogger Dashboard >> Template >> Edit HTML;

Langkah 2. Klik Lokasi Html lalu tekan Cari (CTRL + F) dan cari kode di bawah ini:

 </head>

Langkah 3. Copy dan paste kode di bawah ini sebelum / di atas </ 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: 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;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:
- Untuk mengubah gambar default, ganti URL warna biru dengan URL Anda sendiri.
- Untuk menampilkan lebih dari 5 posting, ganti angka 5 warna merah.
- Menghapus kode di ungu jika Anda ingin Artikel Terkait yang akan ditampilkan berada          di halaman depan.

Langkah 4. Sekarang cari kode berikut:

    <div class='post-footer'>

Catatan Penting: Jika Anda menemukan <div class='post-footer'> lebih dari satu. 
                         Pilih yang pertama!
                         
Langkah 5. Copy dan paste kode di bawah ini letakan di atasnya :

<!-- 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Catatan:
- Mengubah angka 6 untuk jumlah posting yang ingin ditampilkan.
- Jika Anda ingin Artikel Terkait yang akan ditampilkan berada pada halaman depan juga,    hapus kode warna ungu.

Step 6. Simpan atau save

100% Worked Berhasil Bro.
Lihat Contohnya pada blog saya!

Enjoy :)

Source : grizenzioorchivillando.blogspot.com

Viewing all articles
Browse latest Browse all 942

Trending Articles