Cara Memasang Breaking News Ticker Pada Template Blogger Viomagz Mas Sugeng | Template Terbaik Untuk Blogger

Memiliki template yang bagus dan menarik untuk dilihat merupakan sesuatu yang harus dilakukan oleh seorang blogger. Salah satu template yang menurut ane cukup banyak digunakan oleh para blogger di indonesia adalah template Viomagz buatan dari mas sugeng. Dalam template tersebut kita dapat melakukan redesain atau mengedit rampilan sesuai keinginan. Kita dapat menambah atau mengurangi widget yang sekiranya penting serta berguna untuk blog yang kita pakai. Salah satu fitur yang menurut ane cukup penting adalah menambahkan Breaking News Ticker.




Ga perlu berlama-lama lagi, simak cara memasang Breaking News Ticker pada template blogger. Sebagai contoh yang saya pakai adalah template blogger viomagz dari mas sugeng. Simak baik-baik jangan ada step yang terlewatkan. Dalam contoh, saya menggunakan settingan bahasa indonesia, jika bahasa yang kamu gunakan berbeda silahkan sesuaikan sendiri dengan bahasa yang saat ini kamu gunakan.

1.  Masuk dulu ke dashboard blogger kalian

2. Setelah itu, pindah ke menu tema dengan scrol kebawah

3. Jika sudah masuk menu tema, klik edit HTML.

4. Kemudian kalian akan masuk ke halaman edit template. Silahkan cari kode </head> . Untuk mempercepat pencarian, kamu bisa klik pada halaman tema yang akan di edit kemudian tekan Ctrl+F secara bersamaan dan ketik </head> kemudian tekan Enter

5. Setelah ketemu, pastekan kode dibawah ini tepat sebelum kode </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:50px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

6. jika sudah, cari lagi kode </body>. Untuuk mempercepat bisa kamu lakukan seperti cara nomor 4 tadi.

7. Pastekan kode dibawah ini tepat sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.alamatkamu.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

#Ubah tulisan berwarna biru menjadi alamat blog kalian.

8. Sekarang kita akan memasukkan kode untuk menampilkan Breaking News Ticker agar muncul pada template blogger kita. Untuk meletakkan kode berikut ini, sebenarnya bisa diletakkan dimana saja sesuai keinginan kamu. Yang penting letakkan diantara tag <body> dan </body> .

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

9. Kalau kalian menggunakan template viomagz seperti yang ane gunakan, silahkan cari kode <!-- header wrapper end -->  kemudian paste kodenya tepat diatas kode tersebut. Jika Breaking News Ticker kamu ingin tidak hilang ketika di scroll, masukkan kode tersebut sebelum kode </div> tepat diatas kode <!-- header wrapper end -->.

10. Jika sudah selesai, silahkan simpan template dan lihat blog kamu.

Untuk hasilnya silahkan lihat dibawah ini

Demo
Click here