Cara Memasang Widget Newsticker di Blogger

Widget Newsticker
5/5 (1)

LAPAKLAMA.COM | Cara Memasang Widget Newsticker di Blogger

Hallo sobat blogger bagaimana kabar kalian? Semoga dalam lindungan allah ya!. sebelum saya melanjutkan panduan ini saya ingin minta maaf terlebih dahulu jika beberapa hari ini saya jarang update karena memang sedang tidak enak badan, namun saya berjanji akan selalu update blog ini hinggal ajal menjemputku hehe.

Nah dikarenakan hari ini udah lumayanan enakan saya ingin membagikan sebuah tips sederhana yaitu Cara Memasang Widget Newsticker di Blogger, Bagi teman-teman yang sering mengunjungi situs berita atau teknologi pasti sudah pada tahu dengan widget ini.

Widget ini biasanya berada dibagian atau setelah menu atau sebelum menu navigation. dan biasanya menampilkan artikel-artikel popular yang lagi trending dan banyak di baca orang.

Biasanya widget Newsticker menampilkan daftar artikel yang sedang trending dengan animasi slide dan hanya menampilkan judul postingan saja tanpa diskripsi dan tanpa thumbnail gambar.

Cara Memasang Widget Newsticker di Blogger

Seperti biasa pertama kali yang harus kamu lakukan adalah membuka dasboad blogger kamu, kemudian masuk kemu Tema lalu pilih Edit HTML dan tambahkan kode CSS dibawah ini tepat sebelum kode </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px 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>

Kemudian tambahkan lagi kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.lapaklama.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&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>
Ganti domain www.lapaklama.com dengan domain blog anda

Terahir tambahkan kode dibawah ini dimana saja terserah selama itu masih didalam body antara <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("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
            var now = new Date();
            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

Jika semuanya sudah siap jangan lupa untuk klik Simpan Perubahan dan lihat hasilnya. blog kamu akan menampilkan widget Newsticker keren seperti contoh pada halaman berikut ini.

Baca Juga:

Sekian informasi kali ini semoga kalian suka dengan informasi ini dan jangan lupa untuk selalu mengunjungi situs lapaklama.com karena hampir setiap hari kami membagikan artikel terbaru.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *