Blogger Widgets

Senin, 31 Desember 2012

Tutorial Membuat Related Post/Artikel Terkait

Assalamu'alaikum Wr. Wb.


Related Post/Artikel Terkait
Pada siang yang cerah ini alhamdulillah masih dapat berbagi di Blog Ndewo ini. Diawal tahun 2013 ini saya ingin berbagi tentang widget related post/artikel terkait ini. Gunanya untuk memberi daftar artikel yang sesuai dengan label blog. Dapat di pasang di atas postingan atau dibawah postingan.

Pada postingan sebelumnya saya telah membagikan tentang Cara Menulis Artikel Berstandar Seo Yang Berkualitas. Bagi yang belum membaca silahkan nanti bisa dibaca baca.

Widget Related Post/Artikel Terkait ini bisa membuat pengunjung anda berlama lama di blog anda. Contohnya saja ketika seseorang sedang membaca artikel, lalu melihat daftar artikel terkait maka ia akan tertarik untuk membacanya. Jumlah pengunjung blog anda pun pasti bertambah

Dan pastinya widget ini berpengaruh besar untuk kualitas seo blog anda. Dan cara membuatnya pun cukup mudah. Langsung saja berikut Cara Membuat Related Post/Artikel Terkait :

1. Login ke Blogger
2. Pilih menu "Template"
3. Pilih menu "Edit HTML"
4. Beri tanda centang pada "Expand Template Widget"
5. Cari kode </head> menggunakan CTRL+F supaya lebih mudah
6. Letakkan kode dibawah ini sebelum/diatas kode </head>


<!--Related Posts Scripts and Styles www.blogndewo.blogspot.com Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://blogndewo.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a><style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat left center;
border-bottom:1px dotted #d1d1d1;
line-height:1.7em;
margin:0 0 0 5px;
padding:2px 2px 2px 15px;
</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles www.blogndewo.blogspot.com End-->
Jika anda ingin mengubah judul "Artikel Terkait" ganti saja kode dibawah ini
var relatedpoststitle=&quot;Artikel Terkait&quot;; 
7. Cari kode dibawah ini
<div class='post-footer-line post-footer-line-1'/>
jika tidak ketemu cari yang ini
<div class='post-footer-line post-footer-line-1'> 
jika masih tidak ketemu cari kode yang ini
<p class='post-footer-line post-footer-line-1'/> 
8. Letakkan kode dibawah ini setelah/dibawah kode nomer 7
<!-- Related Posts Code www.blogndewo.blogspot.com
 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>
<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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://blogndewo.blogspot.com'><img alt='Related Posts Widget for Blogger' src='http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyFOT4CmhI/AAAAAAAAADM/MvlLp1fyfoM/s1600/blogger-widgets.png' style='border: 0'/></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code www.blogndewo.blogspot.com
 End--> 
9. Simpan Template

Mungkin itu saja yang bisa saya bagikan pada tahun baru ini. Jika ada kesalahan kode tolong beritahu saya.

Wassalamu'alaikum Wr. Wb.

Get free daily email updates!

Follow us!

4 comments

1 Januari 2013 21.46

mau tanya bang, supaya related postnya sedikit gimana sih bang?.. atau ada scrool box nya gimana bang.. kayanya kepanjangan deh related post di blog saya ini.. thanks

1 Januari 2013 22.08

@Indra AntaraKalau untuk mengatur jumlah postingannya diganti aja "var maxresults=5" yang diganti angka 5 nya. Untuk memberi scroll nya edit aja css related postnya tambahin kode overflow:auto; :D

2 Januari 2013 06.33

Berkunjung nih bang,mantef banget tutornya bang trims sdh abang share ya..hahahahyyy

11 Januari 2013 00.15

@Icah Banjarmasinemang mantef bang haha :p

Poskan Komentar

◄ Newer Post Older Post ►