Membuat Artikel Terkait Pada Blogger

Blogger Tune-Up ingin membuat berbagai tips dan trik blogger hack yang sederhana, fleksible tapi dengan hasil lumayanlah, cukup memuaskan. Mau mencoba tips trik blogger hack kali ini mengenai related post atau artikel terkait (ada juga yang memberi nama "Artikel Menarik Lainnya")? Ikuti langkah dibawah ini...


Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Masukan Cascading Stye Sheet (CSS) seperti dibawah ini:
Cari kode dibawah ini :

]]></b:skin>

Copy Paste (CoPas) kode dibawah ini tepat diatasnya :

#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 {

color : #940f04;

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#related-posts a {

color : #054474;

font-size : 11px;

text-decoration : none;

}

#related-posts a:hover {

color : #054474;

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/AVvXsEgRwxmHgZC5wsxHqOn__NGDeNIxpm59B6MP_rNZvmZ2P31_unXfUkL3c5PTcdtYmloPT0861VTj5rpEUsNGPWOezlF3l2KdO6GvYeAh3705PWrV2VDb5WPNTlkVDg8660aTU3gXqf5MAGU/s800/icon-biru.gif") no-repeat 0 0;

margin : 0;

padding-top : 0;

padding-right : 0;

padding-bottom : 1px;

padding-left : 16px;

margin-bottom : 5px;

line-height : 2em;

border-bottom:1px dotted #cccccc;

}

Langkah 6
Sebaiknya simpan terlebih dahulu template untuk mencegah terjadinya error template
Langkah 7
Cari kode dibawah ini :

</head>

Langkah 8
Masukan link dibawah ini tepat diatas langkah 7 :

<script src="'http://wittoblog.googlecode.com/files/terkait.js'" type="'text/javascript'/">

Langkah 9
Cari kode dibawah ini :

<data:post.body/>

Langkah 10
Masukakan kode dibawah ini tepat dibawah langkah 9 :

<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>

Langkah 11
Simpanlah template dan preview blog

Keterangan :

• Silahkan ubah kode CSS tersebut sesuai dengan keinginan.

Selamat Mencoba,..



Cari Artikel Lainnya Disini

Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.