Cara Membuat Breaking News / Headline di Blog Unik - Haloo sobat blogger posting kali ini saya akan memberikan cara membuat floating breaking news di blog. belakangan ini banyak yang request melalui email maupun komentar di blog saya, karena saya orangnya baik hati dan tidak sombong :D heheh saya akan bagikan script saya untuk kalian blogger sejati. oke tidak usah panjang lebar simak baik baik ya :
 |
| Perhatikan lingakaran merah di gambar |
|
Langkah-langkahnya, mohon di simak baik baik ya :
1.Buka edit html template kalian ( pasti udah pada tau kan ? )
2.cari kode
]]></b:skin> dan pastekan kode dibawah ini tepat
diatas ]]></b:skin> :
/*------ Breaking news chijoho ---------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZneQ5GqCj0ds4fUrrk-SpebrIkVtft78UdnfBVX0Og1kB-3ceyjX5WPTK7Tkd3rfsmf3DBbz7FycrRUAzruvlHlg1y7Sjy7Hd1QQ2Lf80aeH5MBe7cdJOEQuEtURvsGtQGI0Tdg43rn8/s1600/news.gif) no-repeat top left;margin:0 auto;padding:0 auto;height:32px;color:#fff; -moz-transition: all 0.25s ease-out 0s;
border: 0 none;
border-radius: 10px 10px 10px 10px;
bottom: -32px;
height: 30px;
list-style-type: none;
padding: 2px 0 7px 40px;
position: fixed;
z-index: 10000;
width:96.6%;}
.newspic:hover {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZneQ5GqCj0ds4fUrrk-SpebrIkVtft78UdnfBVX0Og1kB-3ceyjX5WPTK7Tkd3rfsmf3DBbz7FycrRUAzruvlHlg1y7Sjy7Hd1QQ2Lf80aeH5MBe7cdJOEQuEtURvsGtQGI0Tdg43rn8/s1600/news.gif) no-repeat top left;margin:0 auto;padding:0 auto;height:32px;color:#fff; -moz-transition: all 0.25s ease-out 0s;
border: 0 none;
border-radius: 10px 10px 10px 10px;
bottom: -32px;
height: 50px;
list-style-type: none;
padding: 2px 0 7px 40px;
position: fixed;
z-index: 10000;
width:96.6%;
}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#0556CF;text-decoration:underline;}
3. Cari kode </body> dan pastekan kode dibawah ini tepat diatas </body> :<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Creating Website", "http://chijoho.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
4. Simpan template kalian.
Keterangan :
- Warna : mengatur tinggi dan lebar.
- Warna : ganti dengan url blog kalian.
Oke sobat mudah kan ? silahkan dicoba gan, kalo ada yg bingung langsung tanya aja dengan cara berkomentar di bawah ini :)
Home