Cara Membuat Breaking News di Blogger

kali ini blog haliminfo akan berbagi widget artikel terbaru yang dikemas atau ditampilkan dengan model breaking news berjalan diblogger. . w...

kali ini blog haliminfo akan berbagi widget artikel terbaru yang dikemas atau ditampilkan dengan model breaking news berjalan diblogger. .

widget ini mengambil artikel terbaru dari blog atau web kita, yang memiliki tampilan seperti berita berjalan di acara-acara tv, dalam widget breaking news ini hanya menampilkan judul dari artikel-artikel terbaru di blog kita, tanpa adanya thumbnail atau yang lainya.

buat sobat yang ingin mencoba widget ini silahkan ikuti langkah-langkah dibawah ini.

1. buka blogger sobat dan edit html dari template yang sobat pakai.
2. cari dan temukan kode </body>
3. pastekan kode dibawah ini tepat diatas atau sebelum kode </body>

<!-- Breaking News -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script src='https://raw.githack.com/halim04/BreakingNews/master/breakinpixie.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){0==$(".blog-posts").has("article").length&&$(".blog-pager").remove()});
// Breaking News
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>
</b:if>

4. jika sudah cari lagi kode ]]></b:skin> dan latakan kode dibawah ini tepat diatasnya

/* Breaking News */
#breaking-newsticker{margin:20px auto 0 auto;position:relative}
#post_breakingnews{padding:10px;position:relative;z-index:9;overflow:hidden;width:100%;border:1px solid rgba(0,0,0,0.08)}
.breakingnewstitle{background:#111;float:left;color:#fff;text-transform:uppercase;padding:7px 15px;letter-spacing:1px;position:relative;font-weight:700;font-size:13px;border-radius:2px;margin:0 10px 0 0}
.breakingnews marquee{color:#888;width:83%;font-size:12px;font-weight:400;position:absolute;bottom:12px;}
.breakingnews marquee a{color:#888;margin:0 15px;line-height:2;transition:all .6s}.breakingnews marquee a:hover{color:#222}
@media screen and (max-width:800px){.breakingnews marquee{width:80%}}
@media screen and (max-width:500px){.breakingnews .breakingnewstitle{font-size:11px;padding:7px 10px}}

5. cari dan temukan lagi kode </head>
6. letakan lagi kode dibawah ini tepat diatasnya.

<!-- Breaking News -->
<script type='text/javascript'>
var url_breaking = &quot;/&quot;;
var jumlah_post = 10;
var marquee_speed = &quot;4&quot;;
var close_button = false;
var info_text = true;
</script>

7. untuk kode yang terakhir ini bersifat optional, teman-teman bebas mau meletaannya dimana saja sesuai keinginan sobat sendiri.

<!-- Breaking News -->
<div id='breaking-newsticker'/>

kode diatas diambil dari temlate Viral Go 3 dari arlina design. untuk melihat hasilnya silahkan lihat pada blog berikut.

Beli / Pesan Beli / Pesan