Cara Membuat Headline Breaking News di Blog Terbaru - Bahry Logger

Wednesday, August 22, 2018

Cara Membuat Headline Breaking News di Blog Terbaru


Mungkin sudah banyak yang membuat tutorial Cara Membuat Headline Breaking News di Blog - Tapi tutorial yang saya buat mungkin sedikit berbeda dari headline yang orang lain buat jadi langsung saja menuju tutorialnya

Pertama buka Blogger > Template > Klik Edit HTML

Tambahkan kode di bawah ini di bawah ]]></b:skin> atau </style>

/* Breaking News */
#breaking-newsticker{margin:0 auto 20px auto;position:relative}
#post_breakingnews{background:#fff;position:relative;z-index:9;overflow:hidden;padding:0;width:100%;border:1px solid rgba(0,0,0,.08)}
.breakingnewstitle{background:#f80538;float:left;color:#fff;text-transform:Capitalize;padding:7px 15px;letter-spacing:1px;position:relative;font-weight:700;font-size:13px}
.breakingnews marquee{color:#999;width:84%;font-size:12px;font-weight:400;position:absolute;bottom:2px;}
.breakingnews marquee a{color:#999;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}}

Kemudian tambahkan kode di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
var url_breaking = &quot;/&quot;;
var jumlah_post = 8;
var marquee_speed = &quot;8&quot;;
var close_button = false;
var info_text = true;
</script>
</b:if>

Perhatikan yang berwarna !!!
warna orange adalah kode agar breaking newsnya hanya tampil di homepage.
warna merah adalah jumlah postingan yang akan ditampilkan.
warna hijau kecepatan postingan bergerak.

Selanjutnya tambahkan kode di bahwah ini sebelum tag penutup </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script src='https://cdn.rawgit.com/bahrylogger/bahrylogger/dc751efd/Breaking-News.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>

Lalu simpan kode di bawah ini di mana saja, tapi terapkan di antara tag pembuka <body> dan tag penutup </body>

<div id='breaking-newsticker'/>

Terakhir simpan template

Untuk demo bisa dilihat di HomePage blog ini.

Dalam demo saya menggunakan tag khusus agar breaking news hanya tampil dalam mode desktop dan di home page saja

Subscribe To Our Newsletter

TOP