Friday, October 28, 2011

Tutorial 120 : Related Posts Widget.

Assalamualaikum..
Selamat pagi Jumaat.
Maaf pada my reader sebab lambat update tutorial untuk korang. Busy dengan class, dengan paper work dan macam-macam. Hope korang faham. Kalau ada masa terluang insyaallah akan diupdate permintaan korang ye.

Kali ini aku nak tunaikan permintaan reader untuk cara-cara buat Related Post Widget. Widgets ini akan keluar kalau korang buka single entry. Macam korang buka ENTRY INI.

Contoh gambar seperti berikut :


CARA-CARANYA ADALAH SEPERTI BERIKUT :

*Adalah lebih selamat kalau korang back-up full template terlebih dahulu

1. Sign in blogger > Design > Edit HTML > Expand Widget Templates

2. Cari code ini, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

</head>
3. Copy dan letakkan code di bawah, dan pastekan di atas/sebelum code yang korang cari tadi :

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqZa9oZwAHltzkUBeID0mkX9chG__t_yxQUpE8fKHTQj-3fX-jMTkarduaOlWfzfbJRPKts0rhutXi6bA6GFTJg8OtA3Mdv-k-WIkQjE8uHeHHKICTiRFuHFCsFNGzmTiBIJJCjFU8oQ/") 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; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>
4. Selepas itu, korang cari lagi code ini :

<data:post.body/>

kalau tak jumpa, try code ini pula :

<div class='post-body>

masih lagi tak jumpa? ok tandanya tu template korang memang tak boleh join tutorial ni :)

5. Selepas itu, copy code di bawah dan paste di bawah code yang korang cari tadi.

<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 != &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>

Nak ubah suai supaya lebih comel lagi?


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqZa9oZwAHltzkUBeID0mkX9chG__t_yxQUpE8fKHTQj-3fX-jMTkarduaOlWfzfbJRPKts0rhutXi6bA6GFTJg8OtA3Mdv-k-WIkQjE8uHeHHKICTiRFuHFCsFNGzmTiBIJJCjFU8oQ/ - tukar kepada url icon kegemaran korang.
Related Posts : - Tukar kepada ayat korang sendiri.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqZa9oZwAHltzkUBeID0mkX9chG__t_yxQUpE8fKHTQj-3fX-jMTkarduaOlWfzfbJRPKts0rhutXi6bA6GFTJg8OtA3Mdv-k-WIkQjE8uHeHHKICTiRFuHFCsFNGzmTiBIJJCjFU8oQ/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqZa9oZwAHltzkUBeID0mkX9chG__t_yxQUpE8fKHTQj-3fX-jMTkarduaOlWfzfbJRPKts0rhutXi6bA6GFTJg8OtA3Mdv-k-WIkQjE8uHeHHKICTiRFuHFCsFNGzmTiBIJJCjFU8oQ/


Aku carikan icon cute untuk korang, kalau nak cari icon pastikan dia saiz macam ni juga ye. Jangan terlalu besar.

http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif 
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif


http://dl2.glitter-graphics.net/pub/1244/1244732vlnxggrj2r.gif
http://dl2.glitter-graphics.net/pub/1244/1244732vlnxggrj2r.gif


http://dl8.glitter-graphics.net/pub/408/408738b3qm69j5vi.gif
http://dl8.glitter-graphics.net/pub/408/408738b3qm69j5vi.gif


http://dl.glitter-graphics.net/pub/744/744341avwwooaawb.gif
http://dl.glitter-graphics.net/pub/744/744341avwwooaawb.gif


http://dl9.glitter-graphics.net/pub/718/718449s271pnji46.gif
http://dl9.glitter-graphics.net/pub/718/718449s271pnji46.gif


http://dl6.glitter-graphics.net/pub/1419/1419796d8zt5640x8.gif
http://dl6.glitter-graphics.net/pub/1419/1419796d8zt5640x8.gif


http://dl8.glitter-graphics.net/pub/819/819668pl148949wc.gif
http://dl8.glitter-graphics.net/pub/819/819668pl148949wc.gif


http://dl8.glitter-graphics.net/pub/701/701238uz4bd7an0z.gif
http://dl8.glitter-graphics.net/pub/701/701238uz4bd7an0z.gif


http://dl8.glitter-graphics.net/pub/322/322178y1bgrri674.gif
http://dl8.glitter-graphics.net/pub/322/322178y1bgrri674.gif


# Comelkan? ambilah kalau suka :)

6. Dah siap edit semua, korang PREVIEW, jika tak ada error silalah SAVE. Kalau korang nak lihat hasil click mata-mana entry korang ( single entry ) dan lihatlah hasilnya.

Credit :
Tutorial asal DI SINI, diolah oleh Cik Nurfarah.



SHARE:

9 comments

  1. wah. sgt berguna tutorial ni. hehe

    ReplyDelete
  2. aww..sy guna tuto ni yer cik farah..ehehe..

    ReplyDelete
  3. akak ena guna ni eh..nk mik yg comey2 tu skli..

    ReplyDelete
  4. @ to all

    ok sayang semua..silalah guna nanti lagi ramai reader baca anda punya entry y berkaitan

    ReplyDelete
  5. hepy sgt ada tutorial cam gini nice n tq so much to cik farah yg berhati mulia nih thanks again

    ReplyDelete
  6. tak boleh pun cik farah tak keluar pun...ada hantu agaknya kat blog saya

    ReplyDelete
  7. terima kasih.. alhamdulillah.. menjadi..

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH