Memodifikasi Headline News FeedBurner Ala Beben Koben

Memodifikasi Headline News FeedBurner Ala Beben Koben

Bola Hero Gawai

Memodifikasi Headline News FeedBurner Ala Beben Koben

Headline News
Kenapa modifikasi headline ini dikatakan ala Beben Koben? Begini ceritanya, pagi ini sebenarnya agak sedikit suntuk karena tadi malam tidur terlalu larut, ditambah bingung 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 kalau 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 adalah 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 tentang tutorial blog, jadi kalau 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 langsung di blognya kang Beben deh DI SINI. Coba lihat di bagian footer pada widget Recently.

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

Sebenarnya widget ini bisa langsung diterapkan ke blog tanpa edit HTML, Anda hanya perlu meng-copy seluruh kode 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 kode CSS-nya. 

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

Untuk kode di atas, kode CSS-nya yang harus disimpan di atas kode ]]></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 semoga 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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×