BLOG-CYBER CORPORATION Gunakanlah Google Chrome untuk Tampilan Maksimal Blog Ini , Thanks For Visit My Blog,Jangan Lupa Follow Blog Ini. Online Peoples


Home » » Cara Membuat Breaking News Dibawah Menu Navigasi

Cara Membuat Breaking News Dibawah Menu Navigasi

Pada artikel kali saya akan menjelaskan bagaimana membuat breaking news/berita berjalan yang biasanya terdapat di bawah menu navigasi pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet,misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercantik blog anda





Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :





  • Login ke blogger dengan akun anda

  • Kemudian klik Tata Letak > pilih Edit HTML

  • Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.

  • Letakkan kode berikut di atas kode ]]></b:skin> 



/* News Ticker Wrapper

---------------------------------------------*/

.newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}

.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:#ddd;text-decoration:underline;}
  • Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>









  • Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu





<div class='menu horizontal'>
...........................................
...........................................
</div>
  • Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode navigasi menu pada template Anda.





<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
(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, 
&quot;http://maskolis.blogspot.com/feeds/posts/default&quot;) 
//Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>


  • Ganti URL yang saya beri warna HITAM dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )

  • Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.

Semoga Bermanfaat.




Like And Share :

2 komentar ~ Back To Top

 
Support By : Google | Creating Website | Alexa
Copyright © 2012. Blog - Cyber Corporation - All Rights Reserved
Template Modify by GM Latief
Powered by Blog-Cyber Corporation