- Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
- Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
- Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>
Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <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 mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah 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>
- Simpan Template anda .
Related Post anda akan tampak seperti gambar berikut.
► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.
► 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.
► 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
► 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.
► 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 {Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
Sekian tentang Cara Membuat Related Post di Blogspot Versi 1 Semoga bermanfaat
Berwisata bersama keluarga atau orang yang dekat dengan kita memang menyenangkan, menghabikan waktu liburan bersama orang yang kita sayangi itu indah sekali, Sebelum Anda ingin menuju tempat tujuan wisata alangkah baiknya jika membaca Tips Trik Aman Berwisata terlebih dahulu supaya tak terjadi hal-hal yang tidak di inginkan. Sekian terima kasih dan semoga hari-hari Anda menyenangkan :).
Advertisement.
0 comments:
Post a Comment