Cara Membuat Breaking News Berjalan di Blog Blogger

Bagaimana cara membuat breaking news berjalan di blog berplatform blogger?. Simak jawabannya di postingan saya kali ini.

Memberikan navigasi yang baik kepada pengunjung atau pembaca blog adalah salah satu kewajiban dari pengelola sebuah blog (blogger). Hal ini penting guna memberikan experience terbaik kepada pengunjung dalam mengakses konten terupdate dari blog anda. 

Salah satu navigasi yang hari ini sering digunakan untuk mengarahkan pembaca ke kontet terupdate dari sebuah blog adalah widget breaking News. Widget ini umumnya dapat menampilkan konten terbaru dari sebuah blog dalam bentuk running text. Widget ini sendiri biasanya banyak ditemukan di sejumlah blog dengan jenis niche blog, berita.

Khusus untuk anda yang menggunakan platform blogger dan ingin menambahkan breaking news berjalan pada blog anda. Pada artikel kali ini, saya akan sedikit memberikan tutorial mudah cara membuat breaking news berjalan di blog blogger ini untuk anda.

Penasaran?

Langsung saja, ikuti panduan cara membuat breaking news berjalan di blog blogger yang telah saya rangkum di bawah ini.

Panduan Cara Membuat Breaking News Berjalan di Blog

Melansir informasi dari beberapa informasi dari beberapa blog tutorial ternama dan setelah mencobanya sendiri, berikut ini adalah panduan mudah cara membuat breaking news berjalan di blog blogger yang dapat anda coba di blog anda.

1. Login ke blogger anda.
2. Selanjutnya, pilih blog yang ingin anda kelola melalui menu bar di bagian kiri (klik tanda segitiga terbalik)
3. Pilih menu tema (theme)
4. Klik tanda segitiga terbalik di sebelah pilihan customize pada tema yang anda gunakan dan pilih edit HTML.
5. Temukan tag html </head> (gunakan perintah Ctrl + F, agar lebih cepat).
6. Selanjutnya, masukkan script di bawah ini pada bagian atas </head>.

Script di atas </Head>

<style type="text/css">
/*Breaking News Ticker Mas Tamvan*/

/*Warna Background*/
#breakingnews{
    background-color: white
}
#breakingnews:before{
    background-color: red
}

/*Warna text*/
#breakingnews:before{
 color: white
}

span.close_button a {
 color: red
}

#breakingnews#breakingnews,#breakingnews a{color: #424242;}

/*Tulisan Breakng News*/
#breakingnews:before{
    content:'Breaking News';
}
#breakingnews{position:relative;padding:10px 0;margin:10px 0;font-size:13px;box-shadow:0 5px 5px -5px #3339}#breakingnews:before{position:absolute;left:0;top:0;bottom:0;z-index:9;padding:5px;font-weight:700;margin: 5px 0;}#breakingnews marquee{padding:0;margin:0}.close_button{position:absolute;right:2px;border-radius:50%;top:-18px}#breakingnews .nitip{color:transparent}
</style>
<script type='text/javascript'>
var url_breaking = "https://www.garuda.website/blog/";
var jumlah_post = 10;
var marquee_speed = "10";
var close_button = false;
var info_text = true;
</script> 

*Catatan:

https://www.garuda.website/blog/	Ganti dengan URL blog anda
var jumlah_post = 10;	Jumlah post yang ingin ditampilkan
var marquee_speed = “10”;	Kecepatan scroll
var close_button = false;	Ganti false ke True, untuk menampilkan tombol Close.

7. Setelah menambahkan script di atas, anda dapat melanjutkannya dengan mencari html tag </body>
8. Selanjutnya, masukkan script di bawah ini dibagian atas </body>

Script di atas </body>

<script src='https://rawcdn.githack.com/mastamvan/2022/2e143abc8c77fa04be22ed763813387fc1156251/js/breaking-news.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>

9. Save Template

Menampilkan Headline Breaking News

Langkah terakhir dari cara membuat breaking news berjalan di blog blogger ini adalah menempatkan headline breaking news ini; di bagian bawah header, atas/bawah menu navigasi, sidebar atau di footer.

Untuk bagian ini, anda dapat mengikuti langkah di bawah ini:

1. Kembali ke dashboard blogger anda, klik menu Layout (Tata Letak).
2. Sebagai contoh, misalnya jika anda ingin memasang breaking news di bagian atas/bawah header.
3. Anda dapat mengakses Add Gadget (Tambahkan Gadget) dan cari gadget “HTML/JavaScript”
4. Selanjutnya, anda akan disajikan tampilan pop out yang memuat konfigurasi HTML
5. Masukkan script di bawah ini ke bagian kotak pop out sebelumnya.

<div id=’breaking-newsticker’/>

6. Tempatkan (drag) gadget ke bagian bawah dari header.
7. Langkah terakhir, Save pengaturan dan breaking news pun telah terpasang.

Itulah sedikit panduan singkat cara membuat breaking news berjalan di blog blogger yang telah saya rangkum. Semoga artikel singkat ini bermanfaat dan dapat meningkatkan user experience dari pengunjung blog anda.

Jika anda ingin lebih mengoptimalkan user experience dan juga performa dari blog anda, saya sendiri menyarankan agar anda berkonsultasi dengan web developer atau jasa SEO sebagai pilihan.

Jangan lupa juga untuk tetap mengikuti blog ini, agar anda tidak melewatkan update artikel belajar SEO dan blogging lainnya dari saya. Terima kasih telah menyempatkan membaca.