Cara Membuat Newstiker Otomatis di Blog

---

Membuat Newstiker di blog ini merupakan salah satu cara agar penampilan blog lebih menarik, khususnya buat blog yang berhubungan dengan berita atau informasi-informasi penting. namun barangkali buat blog secara umum juga ga ada salahnya kalau mau memasang ini toh itu tergantung si pemiliknya saja. 

Apalagi buat blogger pemula seperti saya yang masih belajar dalam mengedit template ini adalah suatu pembelajaran dimana ini menjadi pengalaman manakala ini berhasil. Tutorial ini saya tidak terapkan pada blog ini, namun saya terapkan pada blog saya yang lain dan Alhamdulillah berhasil. kalau mau lihat kunjungi Disini

Oh. barangkali ada sobat yang belum tau dengan apa yang akan saya bahas tentang Membuat Newstiker di blog lihat contoh dibawah ini;

 

Selain istilah newstiker ada headline news, Breaking news dan istilah yang lainnya. maksudnya itu-itu juga. Oke, Sobat kita lanjut saja pada pokok utama ya, ikuti langkah-langkahnya:

1. Login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik tab Edit HTML. 
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Carilah kode ]]></b:skin>, copy lalu paste kode berikut ini persis diatas kode ]]></b:skin>

.headline-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkryU-dtDmwx70gSvkGWH4r3lE6ameomnu5QS0DOc-zCekZu5ctO6iQTwMXlSWU6Xm-3ooSs_oQEjgnSXKoGZkLRbyH3Z9AlvwBVTizs0KEHdQv4wHef0LbTKR5P5wYoMr_xd-eeVhmlCv/s1600/headline.png) repeat-x bottom;border-bottom:0px solid #444;width:980px;height:22px;margin:0 auto;padding:0 auto}
.headline{width:980px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.headline a:hover{color:#eace12;text-decoration:underline}

6. Selanjutnya sobat cari kode  </head>, copy lalu paste kode berikut persis diatas kode </head>

<script src='https://www.google.com/jsapi?key=AIzaSyCAh1eKFrY0CciTXhdUcZxck6oQJUm4zXg' type='text/javascript'/>
<script src='http://my-project-favicon.googlecode.com/files/newsticker.js.txt' type='text/javascript'/>

7. Selanjutnya copy paste kode berikut dibawah kode HTML menu navigasi sobat. Kodenya akan seperti dibawah ini, jadi perhatikan saja penutup menunya atau </div> nya sebagai penutup menu.

<div class='menu navigasi sobat'>
---------------------
---------------------
</div>

        Letakan kode dibawah tepat dibawahnya;

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Headline News&quot;, &quot;http://azzam10.blogspot.com/feeds/posts/default&quot;)
cssfeed.displayoptions(&quot;date&quot;)
cssfeed.setentrycontainer(&quot;div&quot;)
cssfeed.filterfeed(10, &quot;date&quot;)
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>
<div style='clear:both;'/>
</div>

8. Simpan template sobat

Untuk peletakan kode tersebut silahkan sobat atur sendiri sesuai dengan keinginan sobat.

Catatan:

           Untuk Javascript diatas itu menggunakan API key saya dan apabila sobat mau menggantinya silahkan buat saja sendiri, namun tidak diganti juga tidak apa-apa hanya untuk jaga-jaga barangkali lain waktu kode tersebut error atau lain hal. buat yang mau membuat API key silahkan cari di google karena saya belum sempat membuat tutorialnya, namun apabila memang sobat ada yang meminta maka akan segera saya buatkan tutorialnya. 

 

Sumber