Memodifikasi Headline News Feedburner Ala Beben Koben

Kenapa modifikasi headline ini dikatakan ala Beben Koben? Begini ceritanya, pagi ini sesungguhnya agak sedikit suntuk alasannya 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 dibentuk topik. Mata terpana pada pandangan ke arah footer...kebiasaan jika lihat cewek juga niscaya 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 ganteng hehehe... Isi blognya ihwal tutorial blog, jadi jika 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 pribadi 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 sanggup pribadi 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 saat validasi HTML5, arahan CSS dan arahan pemangilnya dipisahkan. Seperti pada postingan aku sebelumnya ihwal "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 sanggup 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...

Sumber https://www.kompiajaib.com/

Share this post