Membuat Artikel Terkait Dibawah Posting Blog
Selasa, September 24, 2013
By
Unknown
Membuat Artikel Terkait Dibawah Posting Blog
Membuat Artikel Terkait Dibawah Posting Blog – tentu widget ini
sudah tidak asing lagi keberadaanya didalam sebuah blog, widget yang
sudah familiar dengan setiap artikel halaman blog dan banyak di gunakan
oleh para blogger untuk menampilkan judul dari halaman artikel yang
terkait atau istilah lainnya biasa di sebut-sebut related post. Memang
sudah banyak widget artikel terkait yang lebih bagus dan dengan berbagai
gaya, di antaranya mulai dari yang sudah dilengkapi icon thumbnail
maupun tooltip dan yang lainnya. Namun pada tutorial ini saya akan
membahas untuk membuat widget artikel terkait yang sederhana dan menurut
saya lebih simple. Untuk memasang widget artikel terkait dibawah
posting blog caranya cukup mudah. Apabila blog yang di gunakan belum
terdapat widget artikel terkait bisa mengikuti langkah-langkah yang
terdapat dibawah. Berikut tutorialnya untuk Membuat Artikel Terkait Dibawah Posting Blog.1. Login ke akun blogger.
2. Copy kode berikut ini lalu taruh di atas kode
]]></b:skin>
#related-posts {clear: both;border:2px solid #52e052;}
#related-posts h2{color: #000;background-color: #52e052;padding:5px 5px 5px 10px;}
#related-posts ul{padding: 0;list-style: none;margin:0px;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 5px 5px 5px 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; transition: padding-left 250ms ease-out;}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}
3. Copy kode berikut ini lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/related-posts.js'/> <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 cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> <h2>Artikel Terkait</h2> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>4. Langkah terakhir Simpan template.
Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat 2 atau 3 kode
<data:post.body/>.
Anda bisa menaruh kode tersebut pada kode yang terakhir, namun apabila
kurang sesuai maka silahkan di coba saja pada kode yang pertama atau
kedua. Jika menaruhnya pada kode <div class='post-footer'>
biasanya terdapat 2 kode tersebut. Anda bisa menaruhnya pada kode yang
terakhir, namun apabila kurang tepat dengan template blog anda silahkan
di coba saja pada kode yang pertama.
