Cara membuat News Ticker dengan Marquee

Cara membuat Newsticker dengan Marquee

Selamat sore semua ,pada kesempatan yang berbahagia kali ini admin masih sempetin buat Update blog di sela-sela jadwal admin yang padat sebagai mahasiswa semester 3,dan kesibukan yang lainnya.Postingan kali ini admin akan membahas tentang NEWSTICKER atau yang biasa kita sebut dengan BREAKINGNEWS yang biasa kalian lihat di tv atau di blog dengan template khusus ,lalu bagaimana cara mereka membuat dan bagaimana bentuk dari NEWSTICKER atau BREAKING NEWS itu sendiri yuk kita simak saja penjelasan sederhana di bawah .

Gambar di atas adalah contoh dari breaking news yuk kita applikasikan ke blog kita 

1. Masuk ke Blogger.com
2. Klik menu Tata letak
3.Pilih Edit HTML
4.masukan Script di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/*List Css By :
-idblanter.com (Cara membuat News Ticker dengan Marquue)
-chibianimeblogs.blogspot.com
Edited By :
-Giri diwa adam (Colored and Styling).
-Rhinokage Rio(Making and Prefecting).
Thanks to :
-idblanter.com
-cdnrawgit.com
-allsupported.
*/
/* Newsticker CSS */
#blanter-newsticker{margin:20px 0;position:relative}
#recent_post{position:relative;border:1px solid #2196F3;z-index:9;overflow:hidden;padding:2px;width:77%!important;border-radius:6px;}
#recent_post a{margin:0 15px;line-height:2}
.newstitle{float:left;background:#2196F3;color:#fff;padding:7px 10px;font-weight:bold;border-radius:6px;text-transform:uppercase}
#recent_post .wrapper{width:1120px;max-width:100%;text-align: none;margin:0 auto;border-radius:6px;}
@media screen and (max-width:684px){
.newstitle{font-size:14px;padding:3px 10px!important}#recent_post{top:60px!important;padding:0!important}#recent_post marquee{width:67%!important;line-height:1}}

5.Kalau sudah , Masukan kode berikut tepat diatas </header>
"Tergantung masing-masing blog"

<div id='blanter-newsticker'>
<div id='recent_post' title='Breaking News'>
      <div class="wrapper">
  <div class="newstitle">Breaking News</div>
            <marquee style="float:left; margin-left:10px; width:82%; text-align:justify;" scrollamount="5" onmouseover="this.stop()"onmouseout="this.start()"><a href="https://chibianimeblogs.blogspot.co.id/2017/11/gui-grapichal-user-interface-cli-comand.html">GUI (Grapichal User Interface) & CLI (Comand Line Interface)</a>|<a href="https://chibianimeblogs.blogspot.co.id/2017/11/sisi-gelap-kehidupan-masyarakat-jepang.html">Sisi Gelap Kehidupan Masyarakat Jepang Part 1
</a>|<a href="https://chibianimeblogs.blogspot.co.id/2017/11/masign-simple-responsive-material.html">Masign Simple Responsive Material Design Blogger Template
</a>|<a href="https://chibianimeblogs.blogspot.co.id/2017/11/memasang-tombol-konversi-emoticon-di.html">Memasang Tombol Konversi Emoticon di Form Threaded Comments</a>[BREAKING NEWS]<a href="http://www.idblanter.com/2017/04/masign-orange-premium-responsive-blogger-template.html">Masign Orange Premium Material Design Blogger Template</a></marquee> 
        </div>
    </div>
</div> 

6.Jika kedua script sudah di letakan secara rapih kini masukkan script berikut tepat diatas kode </body>

<script src='https://cdn.rawgit.com/blanter/design/master/blanter-newsticker.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[document.getElementById("blanter-newsticker").appendChild(document.getElementById("recent_post"));//]]></script> 

7.Kalau sudah Klik simpan dan Lihat hasilnya .

Jreng.jreng kini blog anda sudah mempunyai News ticker sendiri.Jika ada yang kurang Jelas bisa bertanya di Kolom komentar.

NOTE : WARNA DAPAT DI GANTI #2196F3 bisa kalian ganti sesuai selera kalian

NOTE 2: Untuk warna material desgin bisa kunjungi situs berikut : https://material.io/color/

 Terimakasih Banyak .