Cara Membuat Headline News pada Blog Terbaru

Pada artikel sebelumnya pernah kami tuliskan cara membuat breaking news pada blog, hanya saja kode yang dipakai untuk widget breaking news pada artikel tersebut sudah tidak berfungsi lagi. Nah, pada kesempatan ini kami akan menuliskan kembali cara membuat breaking news atau headline news pada blog. Konsep headline news hampir sama dengan widget artikel terbaru, bedanya widget artikel terbaru biasanya diletakkan pada sidebar blog sedangkan headline news biasanya terpasang dibawah header atau menu tab sebuah blog, apalagi dengan tampilan judul artikel berjalan pada headline news akan mempercantik tampilan blog.

Langsung saja berikut cara membuat headline news pada Blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tema >> Klik Edit HTML.
3. Kemudian cari kode </head> (Gunakan Ctrl+F untuk mempercepat pencarian)
4. Copy paste kode berikut diatas kode </head>

<style type="text/css">
/*Breaking News id-pemula.blogspot.com*/
#breaking-newsticker{margin:15px 0;position:relative}
#post_breakingnews{position:relative;z-index:9;overflow:hidden;padding:8px;width:100%!important;box-sizing:border-box;box-shadow:0 5px 5px -5px #3339}
.breakingnewstitle{float:left;background-color:#f54b4b;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase;position:relative}
.breakingnewstitle:after{height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-top:1px;border-left:13px solid #f54b4b;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;z-index:9}
.breakingnews marquee{width:80%;position:absolute}
@media screen and (max-width:800px){.breakingnews marquee{width:70%}}
@media screen and (max-width:500px){.breakingnews .breakingnewstitle{width:90px;font-size:11px;font-weight:normal}.breakingnews .breakingnewstitle:after{content:none}.breakingnews marquee{width:55%}}
.breakingnews marquee a{color:#1893fc;margin:0 15px;line-height:2}
#post_breakingnews .breakingnews{width:1120px;max-width:100%;margin:0 auto}
</style>
<script type='text/javascript'>
var url_breaking = "https://namablog.blogspot.com";
var jumlah_post = 9;
var marquee_speed = "5";
var close_button = false;
var info_text = true;
</script>

Keterangan :
Ganti namablog.blogspot.com dengan URL blog Anda.
Ganti angka var jumlah_post = 9; untuk menampilkan jumlah posting yang ditampilkan.
Ganti angka var marquee_speed =”5”; untuk menentukan kecepatan text berjalan.
Ganti var close_button=false menjadi var close_button=true untuk menampilkan tombol close.
5. Selanjutnya cari kode </body> copy paste kode berikut diatas </body>

<script src='http://yourjavascript.com/153651797/breakingnews-idpemula.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>

6. Terakhir Simpan tema.
7. Kemudian untuk menampilkan headline news, copy paste kode berikut pada HTML/JavaScript dengan cara masuk ke menu tab blogger Tata Letak >> Tambahkan Gadget >> HTML/JavaScript, letakkan dibawah menu navigasi atau footer.

<div id='breaking-newsticker'/>

8. Kemudian klik Simpan.

Nah, itu tadi cara membuat headline news pada blogger, cukup mudah kan? Dapat Anda praktekkan pada blog dan semoga berhasil.