Related Posts Yang Paling Cool Untuk Blogger

Assalamualaikum WBT dan selamat sejahtera kepada tetamu yang dihormati. Related post ini ialah daripada rakan saya dari Indonesia iaitu Mas Maskolis. Siapa yang tidak kenal dengan Maskolis. Kehebatan beliau mencipta template yang mengiurkan menyebabkan seluruh dunia mengenalinya. Semalam saya ada post artikel "Bagaimana nak menambah traffik blog". Hari ini, alhamdulillah saya ada sedikit kelapangan masa untuk berkonsikan bersama anda Related post yang direka oleh Mas Maskolis dan diubahsuai oleh Saya.

Lihat Demo

Menambahkan Related Posts Pada Blogger

1. Log In Blogger.com

2. Drop Down Menu > Template

3. Edit Template

4. Proceed

5. Cek kotak > Expand Widget Templates

6. Cari code tersebut:-

<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both;'/>
<div class='post-share-buttons'>

7. Copy code di bawah dan letakkan code di bawah > di atas code tadi(6):-

<style>
ul#related-posts{background:none repeat scroll 0 0 #F9FAFB;border:1px solid #DDDDDD;border-radius:10px 10px 10px 10px;box-shadow:0 0 5px buttonshadow inset;float:left;font:17px verdana;list-style:none outside none;margin:10px 0;padding:10px}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
ul#related-posts li a{border:4px solid #BBBBBB;color:#EAEAEA;display:block;height:100px;position:relative;text-decoration:none;text-shadow:0 1px 0 #000000;width:100px}
ul#related-posts li .overlay{height:95px;line-height:16px;padding:6px 0 0 6px;position:absolute;width:95px;z-index:10}
ul#related-posts li a:hover .overlay{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg303tvj97IJPYvKKLOh-OMpSpePe5-levTCMtbAeeBJwbqsMDIze4zfBPzt4oXD9UV9_i8-UYaQ0tCRipBnviYkNLktSfTS7GViumrK9LhY1ktz4pSc3iv4079n4R8FuTDESmQ450eHkw/s1600/transparant.png") repeat scroll 0 0 transparent;display:block !important}
ul#related-posts li img{bottom:0;padding:0 !important}
ul#related-posts li a:hover{border:4px solid #666666}
</style>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7KL_dLyqlqT5aJBlSzZX6CNhL1zq7nq0XCirAJrdj0o8d8rBbbe8VmwNyKK0jNKLz-LAQRs1b6HDTZ-C86ZSDwJgkO5k2d3-SeamO3M00jVuiR2ecnsu2h6LeNFNLw3g69G0Aig3vDM/s1600/no+image.jpg";
var maxresults=5;
</script>
<script src='http://dl.dropbox.com/u/77764861/relatedimage.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if>

8. Preview Template

9. Kalau tiada Error > Save N Done !

Pengubahsuaian

Untuk pengubahsuaian, kita boleh mengubah

DE4 - Kode warna merah yang ditulis 5 kepada jumlah yang kita mahukan. Kalau kita tulis 10 maka 10 lah yang akan keluar related post nanti.
Dikemaskini: Jumlah post yang nak kita paparkan

DE4 - Kode highlighting itu dutilis 6. Kalau kita mahu tulis pada code merah tadi 10, maka code kuning mesti kena lebih 1 daripada jumlahnya.

Tak faham?

Okey. Kalau saya tulis

var maxresults=10;

yang max-results=6 akan lebih satu

max-results=11

Harapa anda faham. Yang penting faham

Maka berakhirlah tutorial saya hari ini ^_^
Wasalam