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 bila beberapa hari ini saya jarang update alasannya ialah memang sedang tidak lezat badan, namun saya berjanji akan selalu update blog ini hinggal janjkematian 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 gosip atau teknologi niscaya sudah pada tahu dengan widget ini.
Widget ini biasanya berada dibagian atau sehabis sajian atau sebelum sajian 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 kau lakukan ialah membuka dasboad blogger kamu, kemudian masuk kemu Tema kemudian pilih Edit HTML dan tambahkan instruksi CSS dibawah ini sempurna sebelum instruksi </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 instruksi dibawah ini sebelum instruksi </body>
<script type='text/j4vascript'>
//<![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 instruksi 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 kau akan menampilkan widget Newsticker keren menyerupai tumpuan pada halaman berikut ini.
Baca Juga:
Sekian informasi kali ini supaya kalian suka dengan informasi ini dan jangan lupa untuk selalu mengunjungi situs lapaklama.com alasannya ialah hampir setiap hari kami membagikan artikel terbaru.
Sumber aciknadzirah.blogspot.com