Menambahkan Headline Recent Post Pada Blog

Buat teman-teman blogger, mungkin ada yang ingin memperindah blog dengan tampilan "headline" post, berikut langkah-langkahnya. sebelumnya seperti ini screenshoot headline post tsb.

1.  Login ke blogger dulu.
2. Masuk ke tab Design > Page Elements 
3. Selanjutnya klik add a gadget pada kolom widget yang tersedia.Pokoknya,terserah kolom widget yang mana.
4. Pilih HTML/JavaScript.Klik tanda tambahnya ya.
5. Copy paste kode berikut di dalamnya.

<style type="text/css">.gfg-root { width : 318px; height : auto; position : relative; overflow : hidden; text-align : center; font-family: "Arial", sans-serif; font-size: 10px; border: 1px solid #BCCDF0; } .gfg-title { font-size: 12px; font-weight : bold; color : #FFFFFF; background-color: #666666; line-height : 1.4em; overflow : hidden; white-space : nowrap; } .gfg-title a { color : #3366cc; } .gfg-subtitle { font-size: 12px; font-weight : bold; color : #3366cc; background-color: #E5ECF9; line-height : 1.4em; overflow : hidden; white-space : nowrap; margin-bottom : 0px; } .gfg-subtitle a { color : #3366cc; display:none !important; } .gfg-entry { background-color : white; width : 100%; height : 6.9em; position : relative; overflow : hidden; text-align : left; margin-top : 3px; } /* To allow correct behavior for overlay */ .gfg-root .gfg-entry .gf-result { position : relative; background-color : white; width : auto; height : 100%; padding-left : 5px; padding-right : 5px; } .gfg-list { position : relative; overflow : hidden; text-align : left; margin-bottom : 5px; display:none !important; } .gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; margin-left : 5px; margin-right : 5px; } .gfg-listentry-odd { background-color : #F6F6F6; } .gfg-listentry-even { } .gfg-listentry-highlight { background-image : url('garrow.gif'); background-repeat: no-repeat; background-position : center left; } /* * FeedControl customizations. */ .gfg-root .gfg-entry .gf-result .gf-title { font-size: 12px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; margin-bottom : 2px; } .gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px; } /* * Easy way to get horizontal mode, applicable via js options to gadget. */ .gfg-horizontal-container { position : relative; } .gfg-horizontal-root { height : 1.5em; _height : 100%; position : relative; white-space : nowrap; overflow : hidden; text-align : center; font-family: "Arial", sans-serif; font-size: 13px; border: 1px solid #AAAAAA; padding : 5px; margin-right : 80px; } .gfg-horizontal-root .gfg-title { font-weight : bold; background-color: #FFFFFF; line-height : 1.5em; overflow : hidden; white-space : nowrap; float : left; padding-left : 10px; padding-right : 12px; border-right: 1px solid #AAAAAA; } .gfg-horizontal-root .gfg-title a { color : #444444; text-decoration : none; } .gfg-horizontal-root .gfg-entry { width : auto; height : 1.5em; position : relative; overflow : hidden; text-align : left; margin-top : 0px; margin-left : 0px; padding-left : 10px; } /* To allow correct behavior for overlay */ .gfg-horizontal-root .gfg-entry .gf-result { position : relative; background-color : white; width : 100%; height : 100%; line-height : 1.5em; overflow : hidden; white-space : nowrap; } .gfg-horizontal-root .gfg-list { display : none; } /* * FeedControl customizations. */ .gfg-horizontal-root .gfg-entry .gf-result .gf-snippet, .gfg-horizontal-root .gfg-entry .gf-result .gf-author { display : none; } .gfg-horizontal-root .gfg-entry .gf-result .gf-title { color: #0000cc; margin-right : 3px; float : left; } .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer { float : left; } .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer, .gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate { display : block; color: #AAAAAA; } .gfg-branding { white-space : nowrap; overflow : hidden; text-align : left; position : absolute; right : 0px; top : 0px; width : 80px; } .gfg-collapse-open, .gfg-collapse-closed { background-repeat : no-repeat; background-position : center; cursor : pointer; float : right; width : 17px; height : 20px; } .gfg-collapse-open { background-image : url('arrow_open.gif'); } .gfg-collapse-closed { background-image : url('arrow_close.gif'); } .gfg-collapse-href { float : left; } .clearFloat { clear : both; } #feedGadget { margin-top : 5px; margin-left: auto; margin-right: auto; width : 500px; font-size: 10px; color: #9CADD0; } </style><noscript><a href="http://sam-mathic.blogspot.com" target="_blank">My Live And Mathematic</a></noscript><script src="http://www.google.com/jsapi/?key=internal-sample" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><script type="text/javascript">function showGadget() { var feeds = [ {title:'title', url:'http://sam-mathic.blogspot.com/feeds/posts/default'}, ]; new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "My Live And Mathematic"}); } google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script><noscript><a href="http://sam-mathic.blogspot.com" target="_blank">My Live And Mathematic</a></noscript><div id="feedGadget">Loading Headline News</div><div style="font-size: 8px; text-align: right;"><a href="http://sam-mathic.blogspot.com/" target="_blank">Widget by My Live And Mathematic</a></div>

• Ganti http://sam-mathic.blogspot.com dengan alamat blog Anda
• Ganti My Live And Mathemathic dengan Nama blog Anda

6. Klik Save dan lihat hasilnya.

Semoga bermanfaat. Kritik dan saran ditunggu....