Membuat Artikel Terkait di bawah posting blogspot yang keren

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 == &quot;item&quot;'>
<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 != &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=5&quot;' 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXESTBINvHiBJ1UoJ2en8Xhiz5pqpfKGgWL-YBEYmQZWkC_y3veb3JT-rA_EuaaGkpmmCiuaE5Uu7woX1aeajUrXSoo1tUISiIdw7NVDZV-n0m0YtCT-EmBhB26QyYyluLzEzKbzvYeRc/&quot;) 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






Artikel Terkait:


Suka Artikel diatas :-)

Ayo Berlangganan Artikel Teknologi dan Software

Masukkan Alamat Emailmu Disini

*Cek email verifikasinya di kotak inbox atau spam email anda!!!

Jangan lupa Cek Email Anda Tiap Harinya..



2 komentar:

Aully bukan mengatakan...

Thanks atas infonya bro,,tapi saya gagal melakukannya,,,,

EXPOSEinBERITA mengatakan...

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