Membuat Widget Recent Post Lebih Menarik

Widget Recent Post ini sebenarnya berfungsi untuk menampilkan artikel terbaru dari blog kita. Namun kebanyakan tutorial yang menjelaskan ...

Membuat Widget Recent Post Lebih Menarik

Widget Recent Post ini sebenarnya berfungsi untuk menampilkan artikel terbaru dari blog kita. Namun kebanyakan tutorial yang menjelaskan tentang pembuatan widget ini tampilannya masih sangat sederhana atau dapa dibilang agak kurang memuaskan jika dipandang. Kali ini saya akan menjelaskan bagaimana cara membuat Widget Recent Post menjadi lebih menarik dan lebih keren. Dengan widget yang menarik dan keren ini saya yakin pengunjung blog anda betah berlama-lama untuk melihat artikel terbaru anda.

  1. Buka akun Blogger anda
  2. Pilih Tata Letak -- Tambah Gadget -- HTML/JavaScript
  3. Letakkan kode berikut di dalamnya
  4. <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://bagisecret.blogspot.com/2015/09/membuat-widget-recent-post-lebih-menarik.html" title='Recent Posts Widget' 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: center;width: 90%;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; right: 0px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: -5px;}
    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>
  5. Setelah itu tinggal Simpan
Untuk kustomisasi pada widget tersebut saya rasa anda bisa melakukannya sendiri, sekian tutorial tentang Membuat Widget Recent Post Lebih Menarik.

Comments

BLOGGER : 6
Loading...
UsersCloud Free Unlimited Cloud Storage, host your files secure.
Name

Blog CSS3 HTML5 SEO Tips & Trick Widget
false
ltr
item
Bagi Secret: Membuat Widget Recent Post Lebih Menarik
Membuat Widget Recent Post Lebih Menarik
http://4.bp.blogspot.com/-hvgs8d8_YtY/VgI2D-VHbvI/AAAAAAAAAhs/SZYqgjmk_CQ/s1600/Recent%2BPost%2BWidget.jpg
http://4.bp.blogspot.com/-hvgs8d8_YtY/VgI2D-VHbvI/AAAAAAAAAhs/SZYqgjmk_CQ/s72-c/Recent%2BPost%2BWidget.jpg
Bagi Secret
http://bagisecret.blogspot.com/2015/09/membuat-widget-recent-post-lebih-menarik.html
http://bagisecret.blogspot.com/
http://bagisecret.blogspot.com/
http://bagisecret.blogspot.com/2015/09/membuat-widget-recent-post-lebih-menarik.html
true
3427754455455898956
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy