[Tutorial] Cara membuat Widget Related Posts atau Artikel Terkait di blogger

-[Tutorial]  Cara membuat Widget Related Posts atau Artikel Terkait di blogger Salam sapa untuk para blogger.... :D Apa kabar...

-[Tutorial]  Cara membuat Widget Related Posts atau Artikel Terkait di blogger


Salam sapa untuk para blogger.... :D
Apa kabarnya neh?? Do'a kebaikan selalu untuk sobat sekalian.

Untuk menambah minat pembaca blog diperlukan suatu Widget yang dapat mengarahkan pengunjung kepada artikel yang terkait atau memiliki padanan isi dengan yang sedang dibaca. Artikel yang berkaitan itu mengikuti kategori atau label entri artikel tersebut. Nah... untuk itu pada kesempatan kali ini telah ada Widget yang dapat memberikan pelayanan seperti itu. MAU ??

Jika berkeinginan membuatnya, ana ingin mengulas mengenai  Cara membuat Widget Related Posts atau Artikel Terkait di blogger. Agar lebih aman, backup dulu ya template nya. Langkah-langkahnya adalah

1. Seperti biasa Log in blog sobat => Dashboard => Template => Edit HTML=> Lanjutkan.
(Jangan lupa untuk terlebih dahulu mencentang pada kotak Expand Widget Templates)

2. Kemudian cari kode </head>.
(Untuk memudahkan pencarian, dengan menggunakan keyboard tekan CTRL+F dan kemudian masukkan kode yang dicari)

3. Copy dan pastekan kode dibawah ini, dan letakkan di atas atau sebelum kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#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 ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>


NOTE : kata "Related Posts" dapat sobat ganti dengan kata pilihan sobat.

4. Kemudian cari kode  <data:post.body/> .
(Untuk mempermudah, gunakan cara seperti langkah no. 2)

5. Copy kode dibawah ini dan pastekan kode nya di bawah atau setelah kode <data:post.body/> .


<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=15&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>


6. Langkah terakhir, Lihat terlebih dahulu hasilnya dengan meng-klik Preview.
    Jika terdapat kesalahan pada kode dapat berkomentar di postingan ini. Dan jika berhasil tanpa ada error, klik SAVE.

Demikian Cara membuat Widget Related Posts atau Artikel Terkait di blogger.
Maaf jika terdapat kesalahan.
Semoga bermanfaat...
Salam Sukses.... :D

COMMENTS

BLOGGER

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara membuat Widget Related Posts atau Artikel Terkait di blogger
[Tutorial] Cara membuat Widget Related Posts atau Artikel Terkait di blogger
http://4.bp.blogspot.com/-RuTQjKQnCLY/UCxuR2FVDXI/AAAAAAAAB4M/zYutdsPN_T8/s400/related-post.jpg
http://4.bp.blogspot.com/-RuTQjKQnCLY/UCxuR2FVDXI/AAAAAAAAB4M/zYutdsPN_T8/s72-c/related-post.jpg
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/cara-membuat-widget-related-posts-atau.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/cara-membuat-widget-related-posts-atau.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy