Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, March 4, 2013

Cara membuat Headline News di blog


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/AVvXsEh6kHj1gE7Og_H6W2yS8bLfTmF2OrbEHKkWFO8Ftp3pa7J2QuEG03xNEhg1GgL6rFg1KiDfI7hT1h1yQAFxUTem4lixkNp49VaOZHlMUZqBZltljW4JrRAVihDCNjdcYJ-JETTWC2kAZqA/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.



    image 1https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9Y7rgdWVyH96RhTtzM7F9Gt2PH86N0Om4pVFveoiY0vGRMj-1iLkTKNenYRFdefTTpn_7WcJwYRdbU7OFd56OC0t-sYRWf5eEHuzDsY6E2fuB6aJ8VNCnJ7PrsK8v8NVmo6g18v4KS8/s1600/cth-1.gif

    image 2 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocAMngI9jYit1lLB_FtkP-crtCaQlcfyFeQGo2dp9qX0_tpSs9WcZTxHR9ovMxFzZvkUJ3X274hdBv3O6jyMCCdQLDNu6504V8jvRcgbi6zhPXRNyKLz3NlKpZ_W4jFPAdIh0i79eNIs/s1600/cth-2.gif

    image 3 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisB2IjJEuA8JTIVjAlqyytpylhxXq9rHr2Vz9h-pP-8o8LX6zAgp-VGrpTNdKW5tb9pENMXlxCIAa6Rnhuw_LucgGumsJszNKr1GSBLzu3ddbCbzV7rTcN-DNzl2-KQotkUdu53-HDods/s1600/CTH-3.gif

    image 4 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgkOf0uwi1ach7yXZavf2Zhue8r57xdtFscpC1iTLU_bUeaIDvhmpV8UWodfWu8_t1hxGJL_EPPMcVTEfXmGnPpJnawhLV2RWoG4m3J7sLIhWY34oUIMD5tTt1-F3EK9rGOh-lRCs7QSU/s1600/CTH-4.gif

    image 5 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VYnEMKIe2QXRg_iqBfb3S7ZZLi5w_vtkj-Gj5GS72tjhA2SqZvfRvkaKfbHZoVFyllJik6wLNJaCIqsjfdyFdj69exZA1Esk5XK8Nd48M1aRAtBeQtz-uJvL-LXjvCxEOUYr3aFJK88/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 dibawah halaman . 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 menghubungi saya.

    Salam Blogger.... !!! .

    Me

    Admin Rivai Silaban

    Share article with : Google+ Facebook Twitter
    Di posting oleh : Unknown Update pada : 4:41 AM

    15 comments :

    1. Terima kasih mas, sya sudah coba.

      berhasil,

      tapi saya harus menambahkan script diatas head lagi mas..

      thanks ya mas..

      ReplyDelete
      Replies
      1. oya baguslah kalo scripnya ditambah... yang penting berfungsi sob.

        Delete
      2. kode apa ya yang harus di tambahkan di atas head gan

        Delete
    2. Sama sama sob, maaf sob semalam aku dah pgi buat postingannya, sehingga contohnya ngak saya buat, ini sudah saya Update kembali..
      sekali lagi maaf ya.....Ganti aja gambar iconnya sob...

      ReplyDelete
    3. ga ngeerti,, terlalu banyak pilihan,, hehe
      gimana yah ko rapi di blog saya,,

      ReplyDelete
    4. @Ian Azhari
      Makasih atas kunjungannya bang. heheh pilih saja yang sesuai dengan thems blognya..

      ReplyDelete
    5. Wah Keren nih Sob, Coba dulu deh. terima kasih sudah berbagi

      ReplyDelete
      Replies
      1. silahkan sob...
        thx atas pendapatnya dan juga kunjungannya..
        salam kenal dari saya...

        Delete
    6. mantap gan.. tapi ga muncul judul dan rincian headline newsnya gan...
      cuma gbr .gifnya doang gimana itu :o

      ReplyDelete
    7. mohon maaf buat agan agan semua saat ini code scriptnya lagi di update agar lebih ringan, mungkin butuh waktu, tapi kami akan secepatnya untuk mempublish.

      ReplyDelete
    8. gak muncul bos news cuma gambar doang

      ReplyDelete
      Replies
      1. kan saya sudah buat informasinya soal scriptnya masih di perbaiki kembali..

        Delete

    1. Komentar SPAM Akan secepatnya dihapus
    2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
    3. Cek komentar masuk sebelum bertanya.
    4. Link aktiv tidak akan berpungsi.
    5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
    6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
    7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
    8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

    Salam bloger .. !!
    Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
    Konversi Kode Forum Diskusi Join to Blog