Membuat Headline News Melayang di Blog

Membuat Headline News Melayang di Blog, Headline News Berjalan di blog, headline di blogger yang berjalan, headline news melayang untuk blogspot atau entah apalagi lah namanya menurut blogger. Widget Blog ini berguna untuk menampilkan beberapa artikel terbaru blog dengan cara melayang dan berganti-ganti agar selalu dilihat pengunjung blog. Lihat contohnya yang ada diatas pada blog ini.

Beberapa waktu lalu ada pengunjung blog ini yang menanyakan Bagaimana Cara Membuat Headline News di Blog nah demi memenuhi permintaan pengunjung *ciee* kali ini saya akan bagikan Wiget Headline News yang keren ini muehehehe.

OK sebelumnya saya ucapkan terimakasih kepada Mas Taufik Niurrochman karena saya memakai breadcrumb melayangnya sebagai dasarnya dari Headline News Melayang ini. Tak lupa kepada Mastemplate yang telah menyediakan kode Headline News nya *maaf gak minta ijin :p*, dan terimakasih juga kepada diri saya sendiri yang sukses puyeng dibuatnya *maklum nubi dalam utak-atik css*. Terimakasih kesiapa lagi ya? Oia Terimakasih kepada pembaca blog ini, kepada yang copas artikel ini *maybe* dan memberikan sumber live linknya.

Lanjut ke pokok bahasan Membuat Headline News Blog, pertama login Blogger > Dashboard > Template > Edit HTML > Expand Template Widget > Tekan Ctrl + F pada keyboard kemudian ketikkan dan temukan kode ini ]]></b:skin> letakkan css berikut tepat diatas kode tersebut

.headline-wrapper{position:fixed;background:#333 repeat-x bottom;width:98%;height:29px;border-bottom:3px solid #999;

padding:1px 1% 1px 1%; z-index:9999;

-webkit-box-shadow:0 0 7px #000;

-moz-box-shadow:0 0 7px #000;

box-shadow:0 0 7px #000; }

.headline{width:930px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}

.headline a:hover{color:#eace12;text-decoration:underline}

Sesuaikan dengan selera dan template anda bila warna, tinggi dan lebarnya kurang tepat.

Langkah berikutnya cari kode <body letakkan kode berikut tepat dibawahnya

<div class="headline-wrapper">

<div class="headline">

<div style="float: left; padding: 7px 5px 1px 7px;">

<img alt="feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEFw-18NHixXHfAI00VHXxgcIEXkrgEBcBdbFMHUS2ZBihbwqmefZpROxES4k1AxqHHNMOnyrrFQWfhf6HwpMOndjC4zSUXmnaC_01Ytqhn2Kzei-yn_IXgzVq_b9rmi6UJQR_YWNlvZt/s47/rss_rectangle.png" />

</div>

<div style="float: left; overflow: hidden; padding: 7px 0; position: relative; width: 800px;">

<script type="text/javascript">

var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")

cssfeed.addFeed("HeadlineNews","http://anwar-lahai.blogspot.com/feeds/posts/default")

cssfeed.addFeed("Headline News", "http://blif-indo.blogspot.com/feeds/posts/default")

cssfeed.displayoptions("date")

cssfeed.setentrycontainer("div")

cssfeed.filterfeed(20, "date")

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div>

</div>