Bloggerabiz | Bagi anda yang kesulitan membuat artikel terkait yang super keren layaknya artikel terkait blog ini, dan enak dilihat baca, tutorial singkat ini akan membahas
Cara Membuat Artikel Terkait di bawah posting blogspot yang keren
Bagi yang menggunakan
draft.blogger.com,
Klik
template> Edit Template HTML > Ceklis Expand Widget Template
Langsung aja
copy script ini
dibawah kode <div class='post-body entry-content'><data:post.body/> (cari dengan ctrl +F)
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Artikel Terkait : </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>
lalu copy ini
diatas ]]></b:skin>
#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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXESTBINvHiBJ1UoJ2en8Xhiz5pqpfKGgWL-YBEYmQZWkC_y3veb3JT-rA_EuaaGkpmmCiuaE5Uu7woX1aeajUrXSoo1tUISiIdw7NVDZV-n0m0YtCT-EmBhB26QyYyluLzEzKbzvYeRc/") 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;
}
kode yang berupa
angka dan kode hexadecimal warna diatas bisa dubah-ubah sesuai keinginan
dan terakhir copy script ini dibawah ]]></b:skin>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>
semoga tampilannya seperti dibawah ini atau makin keren lagi
Kembali ke Atas
Tambah Komentar
2 komentar:
Thanks atas infonya bro,,tapi saya gagal melakukannya,,,,
ijin mencoba mas,
coba ditambahkan sedikit gambar mengenai bentuk tampilan artikel terkaitnya .
saya kira ini akan menambah minat untuk tertarik dan mencoba
terimakasih
Posting Komentar