Cara Membuat Widget Recent Post Keren Berwarna Pada Blog

Cara Membuat Widget Recent Post Keren Berwarna Pada Blog
Cara Membuat Widget Recent Post Keren Berwarna Pada Blog. Syalom semuanya, pada kesempatan ini, NALHACKER akan share mengenai Cara Membuat Widget Recent Post Keren Berwarna Pada Blog. Seperti yang kita ketahui bersama bahwa sebuah blog pada umumnya memiliki kewajiban untuk selalu mengupdate artikelnya dengan menulis artikel-artikel yang menarik agar tetap memiliki pengunjung serta lebih dikenal. Nah, selain itu acar agar artikel terbaru dapat dengan mudah diketahui atau dilihat oleh pengunjung salah satunya adalah dengan memasang Widget Recent Post yang mana Widget tersebut tidak disediakan oleh layanan Blogspot.

Oleh karena itu pada kesempatan kali ini NALHACKER akan mengajari anda bagaimana Cara Membuat Widget Recent Post Keren Berwarna Pada Blog. Langsung saja, untuk Cara Membuat Widget Recent Post Keren Berwarna Pada Blog, berikut langkah-langkahnya   :

Cara Membuat Widget Recent Post Keren Berwarna Pada Blog

  • Login ke Blogger
  • Masuk ke Layout
  • Pilih Add A Gadget
  • Pilih HTML/JavaScript
  • Pada Kolom Judul masukan Recent Post atau terserah anda
  • Kemudian pada kolom Content masukan script berikut ini   :
  • <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>
    <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 0 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: 93%}
    ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 93%}
    ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 93%}
    ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 93%}
    ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 93%}
    ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0 0 5px 0; 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: 13px;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>
  • Setelah itu klik Save
  • Selesai

Jika sudah, sekarang silahkan buka Blog anda untuk melihat hasilnya. Sekarang blog anda sudah memiliki Widget Recent Post Keren Berwarna. Nah, itulah  Cara Membuat Widget Recent Post Keren Berwarna Pada Blog. Semoga artikel Cara Membuat Widget Recent Post Keren Berwarna Pada Blog tersebut dapat bermanfaat bagi anda.


Subscribe to receive free email updates:

1 Response to "Cara Membuat Widget Recent Post Keren Berwarna Pada Blog"

Apa Komentar Anda? Tuliskan Komentar Anda Pada Kolom Berikut!