Tips Blog Widget Artikal Terbaru Sempoi

Tips Blog Widget Artikal Terbaru Sempoi

Tips blog widget artikal terbaru sempoi punya yang akan aku kongsikan kepada korang semua pada hari yang indah lagi cerah ini, hahaha. Memandangkan pada hari ini, aku berasa terpanggil untuk menunjukkan satu totorial yang paling dasyat pada tahun ini, ialah untuk memasang widget artikal terbaru, ataupun recend post yang sempoi untuk blog korang.

Mungkin ada yang sudah tahu cara untuk membuatnya, tapi biarlah, akan aku tunjukkan juga kepada yang belum tahu. Walaupun aku sendiri tak gunakan widget tersebut, namun aku rasa, widget tu cukup cantik dan comel lotey kata orang tua-tua dulu. 

Penting ka ada widget artikal terbaru dalam blog? Ya, memang penting. Dengan adanya widget artikal terbaru dalam blog kita, ianya akan memudahkan pengunjung untuk mencari dan melihat artikal yang baru diupdate oleh kita.

Baiklah, sebelum saka merasuk kedalam badan aku ni, baik aku mulakan sesi latihan macam mana nak pasang widget artikal terbaru dalam blog korang. Caranya cukup mudah dan senang. Dekat bawah ni, aku akan kongsikan tiga jenis widget artikal terbaru yang boleh korang pilih sendiri.

Cara Memasang Widget Artikal Terbaru Sempoi Pada Blog


  1. Masuk ke dashbord blog korang dan pilih Reka Letak (Layout)
  2. Kemudian pilih Tambah Alat (Add a Gadget)
  3. Lepas tu, korang boleh copy salah satu daripada code dibawah ni, dan paste kan kedalam kotak tambah alat tadi.
  4. Klik Save, dan selesai.
Widget Pertama
Tips Blog Widget Artikal Terbaru Sempoi
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script><script style="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = false;var posts_date = true;var post_summary = true;var summary_chars = 70;</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/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;border-radius:100%;padding:3px;background:#fff}.recent-posts-container{font-family:'Ubuntu Condensed',sans-serif;float:left;width:100%;min-height:55px;margin:5px 0px 5px 0px;padding:0;font-size:12px}ul.recent-posts-container{list-style-type:none;background:#fff;padding:0px}ul.recent-posts-container li:nth-child(1n+0){background:#F49A9A;width:100%}ul.recent-posts-container li:nth-child(2n+0){background:#FCD092;width:95%}ul.recent-posts-container li:nth-child(3n+0){background:#FFF59E;width:90%}ul.recent-posts-container li:nth-child(4n+0){background:#E1EFA0;width:85%}ul.recent-posts-container li:nth-child(5n+0){background:#B1DAEF;width:80%}ul.recent-posts-container li{padding:5px 10px;min-height:50px;list-style-type:none;margin:0px 5px -5px 5px;color:#777}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.post-date{color:#e0c0c6;font-size:11px}.recent-post-title a{font-size:14px;color:#444;font-weight:bold}.recent-post-title{padding:6px 0px}.recent-posts-details a{color:#222}.recent-posts-details{padding:5px 0px 5px}</style>

Widget Kedua
Tips Blog Widget Artikal Terbaru Sempoi
<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{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>

Widget Ketiga
Tips Blog Widget Artikal Terbaru Sempoi

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script><script style="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = true;var posts_date = true;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script><a style="font-size:9px;color:#CECECE;float:right;margin:5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb{width:50px;height:50px;float:right;margin:-4px -35px 0px 0px;border:4px solid #FCD6CB;border-radius:100%}.recent-posts-container{font-family:'Gloria Hallelujah',cursive;float:left;width:100%;min-height:55px;margin:5px 0px 5px 0px;padding:0;font-size:12px}ul.recent-posts-container{counter-reset:countposts;list-style-type:none;background:#fff}ul.recent-posts-container li:before{content:counter(countposts,decimal);counter-increment:countposts;z-index:2;position:absolute;left:-20px;font-size:16px;color:#616662;background:#FCD6CB;padding:9px 14px;border-radius:100%;margin-top:15px}ul.recent-posts-container li{padding:5px 0px;min-height:50px;list-style-type:none;margin:-2px 5px 5px 5px;border-top:2px solid #FCD6CB}ul.recent-posts-container{border:2px solid #FCD6CB}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.post-date{color:#e0c0c6;font-size:11px}.recent-post-title a{font-size:14px;color:#616662}.recent-post-title{padding:6px 0px}.recent-posts-details a{color:#888}.recent-posts-details{padding-bottom:5px}a.readmorelink{color:#4DACE3}</style>

Haaa , itulah serba sedikit mengenai perkongsian aku pada hari ini. Kalau tak jadi, korang boleh beritahu dekat aku, nanti aku tolong, hahaha. Aku tinggalkan korang dengan ucapan Assalammualaikum dan terima kasih kerana sanggup membaca dalam keadaan terharu entri aku yang bertajuk Tips Blog Widget Artikal Terbaru Sempoi