Cara membuat Headline News di blog

Breaking news adalah istilah kren dalam dunia berita terkini, dan para bloger juga memanfaatkan moment tersebut untuk membuat tampilan halaman blognya semakin menarik, disamping itu pungsinya sangat membantu bagi para pengunjung blog kita. Untuk tampilan ini, saya sendiri sangat suka dengan sebutan News Line dengan alasan bahwa berita yang ditampilkan hanya berupa satu garis saja... heheheh itu istilah saya... Oke seperti biasa kita berangkat ke TKP.

1. Login ke Blog anda

2. Masuk menu Edit HTML Jangan lupa  Expand Template Widget  dicentang.

3. Cari kode ]]></b:skin> untuk mempercepat pencarian klik Ctrl + F

4.Copy script dibawah ini Letakan kode  tepat diatas kode ]]></b:skin>

    /* News Line Script
    ---------------------------------------------*/ 
    .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiT060jx_hrbXYigQImD3Hqe07tPRXJqTl0irL1jjw9Corf9-oijqQnta7IZrrCLZQyjUflQTrnnmdx0KRjulT9wqLmIvtLolFFJQHpCaXYaXfsamHV22flwJArGbtF2X7cpWVjrQqEBM/h64/news.gif) no-repeat top left;width:910px;margin:0 auto;padding:0 auto;height:32px;color:#ADFF2F;} 
    .news {width: 910px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ADFF2F;overflow:hidden;clear:both;} 
    .news a:link, .news a:visited{color:#ADFF2F;text-decoration:none;} 
    .news a:hover {color:#ddd;text-decoration:underline;} 

Keterangan Script

• Yang di block dengan warna biru diatas adalah gambar atau icon yang disamping kiri news line
• [ width: 910px ]  adalah lebar dari news line tersebut. sesuaikan menurut lebar blog anda

 Ganti script yg diblock warna biru diatas untuk gambar dibawah ini, copy script dibawah lalu pastekan, tapi hati hati dengan tanda kurungnya jangan sampai terhapus atau dobel.

---

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5TpvZA0p6VyWC-GAo9WZITLeKQwIV-9YSM1399owMvXAbyRsVfrpEbcUExQZNVNt6qIYiiCO-hnWyL5ggEQ0Ql_vt121DdMAwAANbeR1btL0UltN6CyQWp5EVL4lknF4FdZdf7XZloc/s1600/cth-1.gif

---

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc832Sm3d7XWyn9bC73eewVN6bCB6VdDUkXNjpmA9sPsiViRXAGftQdjfPJhanbFJyPrP0QiO3W3u6EvnCYZoWdIMhtcMaaSuzXEPKSxkYRWqDg3eEGP5lKbOEwk4n_GRrkVUYf-RFmqE/s1600/cth-2.gif

---

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNTPXiUskriqQw-irhm8dyJEMeLAsPPPGacsnpEUgc-rt1t2QIFC9zaMCUJULg8Bb_95UHMZKEV9lhm24qINqJwtqBM69IpTgllvXE1B6hy6d-ONTkdzeoL-XVkrCLsT2A9wsKFhEpGMg/s1600/CTH-3.gif

---

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHwS75BP_yAcVkkxnrYcamOwjUVGi87sMQDylu1tmlruRN8YHWDqIxg-Ju8e0JAPBrF9hUqZcHMD7p-cazxRXPoofJgIgBz1Nu05FUG3y7KUXy3bxDxh4u2tlrgd0-ijhenHjJLdw1Kg/s1600/CTH-4.gif

---

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYemKo4tqA9rB8ew9h3gu3VKlfGH8LacupR32AMTKZVDpNYaVyqs_9KHFQmWPIZbO15dazusH79yWR6Va4N79AlamMKnXJE_NjThvrfl2o80S2YZeCRP54CaNMLkYHI04zjS_-E2jO3c/s1600/CTH-5.gif

---

Kode script diatas adalah code CSS dari news line yang akan kita buat.
Kita akan memanggil code tersebut untuk ditampilkan di halaman blog kita.
Copy code script dibawah ini dan tempatkan dimana anda suka. Saran saya bagusnya ditempatkan di atas Navigasi pada blog kita., atau diatas navigasi halaman blog kita. Seperti news line yang ada pada blog saya.

<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;Alamat Blog Anda/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>

• Keterangan script

Block biru diatas adalah code lebar tampilan news. & Tinggi nya
Block merah pada code adalah URL dari blog anda ( Alamat Blog anda )

Untuk melihat hasilnya sementara klik pratinjau pada blog anda sebelum anda save untuk mencegah error scriptnya. bila sudah yakin dengan scriptnya silahkan save dan lihat hasil akhirnya...

Salam bloger semoga penjelasan script news line pada artikel kali ini bermanfaat buat sohib...

 

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe diatas . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubingi saya.

sumber :  http://rivai-silaban.blogspot.com

Tweet