TUTORIAL WIDGET "RECENT POST" YANG CANTIK

Assalamualaikum dan selamat sejahtera.

Contoh "Recent Post" Widget

Alhamdulillah syukur ke hadrat illahi diberi peluang untuk menaip blog pada pagi yang indah ini. Penulisan blog pada pagi ini aku nak berkongsi dengan korang tentang tips mencantikkan blog korang dengan penambahan widget "Recent Post" atau "Post Terkini" dalam blog korang.

Kalau korang perati betul-betul pada bahagian sidebar aku tu ada header yang tertulis "Topik Terkini' kan? Okay itulah dia contoh widget "Recent Post' yang memaparkan post korang yang paling terkini. Apa-apa sahaja topik atau post yang korang update akan terpampang pada widget ni.

Jadi, sekiranya korang suka akan design widget ini, korang boleh ikuti tutorialnya di sini. Okay, mari kita mulakan!

CARA MELETAKKAN WIDGET 

"RECENT POST" DALAM BLOG 

Langkah 1: korang dikehendaki 'Log In' ke Dashboard blogger >  pergi ke layout dan tambah gadget atau "Add Gadget".

Langkah 2 : Seterusnya bila korang dah tekan "add a gadget" tu, akan ada pop-out yang terkeluar. Makanya, Sila cari dan pilih HTML/Java Script.

Langkah 3 : Korang "copy and paste" code di bawah dalam pop-out HTML/Java Script yang telah korang pilih tadi.

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script><script style="text/javascript">var posts_no = 5;var showpoststhumbs = false;var readmorelink = true;var showcommentslink = true;var posts_date = true;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover{color: #4DACE3;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}.recent-post-title { margin: 5px 0px; }.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}.recent-posts-details a{ color: #888;}a.readmorelink {color: #4DACE3;}</style>

Okay, sekian sahaja daripada saya pada hari ini. Sebarang pertanyaan boleh bertanya pada section komen di bawah.

Terima kasih. :)