Membuat Related Post

Saya hadir lagi. :D. kali ini saya akan membahas tentang cara Membuat Related Post. Contohnya dapat sobat lihat pada gambar di atas. keren kan.. Gampang aja kok cara membuatnya. asalkan sobat mengikuti dengan baik langkah-langkah yang saya berikan. nah, dari pada kelamaan, langsung aja yuk kita praktek di TKP.

Langkah Membuat Related Post :

1. Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
2. Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
3. Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head>

Cari kode <p><data:post.body/></p> . kode pada setiap template biasanya berbeda beda. kode biasanya seperti ini <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah sobat mendapatkan kode <p><data:post.body/></p>, lalu copy-paste kode dibawah ini tepat di bawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

4. Selanjutnya simpan Template sobat

1. Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.

2. Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.

3. Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

SELAMAT MENCOBA

=========================================

Source : http://creatingwebsite-maskolis.blogspot.com

=======================================

You currently reading text about Membuat Related Post and if you want you can share Membuat Related Post this with share button below.If you intend to Copy-Paste this article Membuat Related Post to be posted on your blog, please to put a link Membuat Related Post as the source by copying the code below.

Get this widget

Description : Membuat Related Post
Rating : 4.5
Reviewer : Blogger Download
Item Reviewed : Membuat Related Post