W E L C O M E | Assalamualaikum dan selamat sejahtera buat para pembaca senyap dan aktif. Saya ingin mengucapkan jutaan terima kasih buat pembaca yang sudi menggerakkan jari-jemari halus menekan tetikus semata-mata mahu menjenguk, membaca dan memberikan komentar dalam blog yang sederhana ini.

P E R H A T I A N | Penulisan dalam blog ini telah menggunakan bahasa yang tidak baku secara total dan masih berstruktur. Jika bahasanya bukan pilihan anda, maka penulis ingin menyarankan agar saudara/saudari mula berganjak daripada menjenguk atau membaca blog ini sebelum penyakit Pembenci atau istilah lain ialah Haters mula menular di dalam blog ini. Sekian dan Wassalam.

P E N U L I S | Ameelia merupakan seorang penulis blog amatur yang telah melibatkan diri dalam bidang penulisan blog selama 8 tahun. Penulisan blog adalah berkaitan dengan liku-liku kehidupannya sebagai seorang hamba Allah, anak, isteri, guru di kawasan pedalaman, pelajar dan pelukis amatur. VIEW

February 20, 2016

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. :)

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...