Memodifikasi Headline News FeedBurner Ala Beben Koben

Kenapa modifikasi headline ini dikatakan ala Beben Koben? Begini ceritanya, pagi ini gotong royong agak sedikit suntuk alasannya ialah tadi malam tidur terlalu larut, ditambah galau cari topik postingan. Coba jalan-jalan...eh nyangkut di blognya kang Beben.

Nah terlahirlah sebuah ide, mencari hal yang menarik di blog kang Beben untuk dibuat topik. Mata terpana pada pandangan ke arah footer...kebiasaan jikalau lihat cewek juga pasti lihat kakinya dulu hahahaha.... Di situ ada widget recently yang menampilkan headline news yang tampil satu per satu. Setelah dilihat ternyata itu ialah headline news dari feedburner (kalau enggak salah hehehe...).

Nah kang Beben tuh si empunya Tutorial Blog for Stylish Blogger, si Bolanglang yang katanya tampan hehehe... Isi blognya perihal tutorial blog, jadi jikalau Anda butuh tutorial blog, coba ubek-ubek blognya kang Beben hehehe....

Seperti apa sih Memodifikasi Headline News FeedBurner Ala Beben Koben ini? Bisa Anda lihat eksklusif di blognya kang Beben deh DI SINI. Coba lihat di bab footer pada widget Recently.

Bagaimana Anda tertarik untuk mencobanya? Yo kita berguru sama-sama di bawah ini.

Sebenarnya widget ini mampu eksklusif diterapkan ke blog tanpa edit HTML, Anda hanya perlu meng-copy seluruh arahan di bawah ini dan mempastenya pada gadget HTML/JavaScript.

 
 <style type="text/css">
 #bbn6 .feedburnerFeedBlock ul{margin:0;padding:0;list-style:none;position:relative;}
 #bbn6 .feedburnerFeedBlock{height:195px;overflow:hidden;}
 #bbn6 .feedburnerFeedBlock ul li{text-align:left;position:absolute;top:0;left:0;height:160px;margin:0;padding:10px;color:#666;font-weight:400;}
 #bbn6 #creditfooter{display:none;}.headline a{font-size:20px;color:#000}
 </style>
 <div id="bbn6">
 <script type="text/javascript">
 var x=2;function slideWitchs(){x+=1;if(x>5){x=1}
 $("#bbn6 .feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0});$("#bbn6 .feedburnerFeedBlock ul li:nth-child("+(x)+")").animate({opacity:1});}
 $(document).ready(function(){setInterval("slideWitchs()",5500);});
 </script>
 <script src="http://feeds.feedburner.com/kompiajaib?format=sigpro" type="text/javascript" ></script>
 </div>
 

Angka 5 untuk menampilkan berapa banyak recent post yang ditampikan.

Angka 5500 untuk mengatur kecepatan pergantian recent post.

http://feeds.feedburner.com/kompiajaib coba ganti dengan url feedburner Anda.

Untuk warna tulisan, tinggi widget, dan lain-lain silahkan atur pada arahan CSS-nya. 

Namun ada baiknya untuk menghindari error yang terjadi dikala validasi HTML5, arahan CSS dan arahan pemangilnya dipisahkan. Seperti pada postingan aku sebelumnya perihal "Hindari Penggunaan Widget Tanpa Edit HTML" sebaiknya arahan CSS-nya simpan pada edit HTML dan pemanggilnya disimpan di gadget HTML/Javascript pada tata letak atau layout.

Untuk arahan di atas, arahan CSS-nya yang harus disimpan di atas arahan ]]></b:skin> adalah:

 
 #bbn6 .feedburnerFeedBlock ul{margin:0;padding:0;list-style:none;position:relative;}
 #bbn6 .feedburnerFeedBlock{height:195px;overflow:hidden;}
 #bbn6 .feedburnerFeedBlock ul li{text-align:left;position:absolute;top:0;left:0;height:160px;margin:0;padding:10px;color:#666;font-weight:400;}
 #bbn6 #creditfooter{display:none;}.headline a{font-size:20px;color:#000}
 

Dan pemanggilnya adalah:

 
 <div id="bbn6">
 <script type="text/javascript">
 var x=2;function slideWitchs(){x+=1;if(x>5){x=1}
 $("#bbn6 .feedburnerFeedBlock ul li:nth-child(n)").animate({opacity:0});$("#bbn6 .feedburnerFeedBlock ul li:nth-child("+(x)+")").animate({opacity:1});}
 $(document).ready(function(){setInterval("slideWitchs()",5500);});
 </script>
 <script src="http://feeds.feedburner.com/kompiajaib?format=sigpro" type="text/javascript" ></script>
 </div>
 

Demikian saja postingan Memodifikasi Headline News FeedBurner Ala Beben Koben ini supaya dapat dimengerti dan bermanfaat... Selamat berkreasi...

Buat kang Beben makasih yah udah ngizinin untuk nyomot kodenya hehehe... (diizinin ga yah...? Engak boleh enggak kang Beben harus ngizinin yah...hahaha...). Kalo ada yang kurang dan salah mohon dikoreksi ya kang...