Kali ini Penulis bakal sharing tips mengenai Cara Memasang Widget Newsticker di Blogger. Widget Newsticker saya bagikan sebab tersedia permohonan berasal dari teman baik Blogger dan kebetulan tempo hari saya memperbaharui template Asal SEO Pro, menjadi tidak tersedia salahnya saya saya sharing salah satu fitur Pro berasal dari template tersebut sebab sesungguhnya di Source code blog demo fitur ini sengaja dibikin terbuka untuk alasan sebabkan postingan ini.
Adapun fungsi utama berasal dari widget ini yaitu untuk menampilkan daftar sebagian artikel teranyar bersama animasi slide nyaris sama bersama widget recent post, namun yang ditampilkan hanya dalam wujud judul postingannya saja. Oke, segera saja. Berikut ini adalah beberapa langkah Cara Memasang Widget Newsticker di Blogger.
Cara Memasang Widget Newsticker di Blogger
Pertama buka Blogger > Klik menu Tema dan tombol Edit HTML > Kemudian tambahkan kode CSS ini sebelum </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>
Selanjutnya, tambahkan kode di bawah ini tepat sebelum </body>.
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://aanchannel.my.id/",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 kode yang ditandai dengan alamat blog Anda dan ganti angka 10 sesuai dengan jumlah post yang ingin Anda tampilkan.
Baca Juga :
Nah, selanjutnya tambahkan kode di bawah ini bebas dimana saja selama masih di dalam body diantara <body> dan </body> seperti pada postingan sebelumnya.
<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'/>
Setelah itu klik tombol Simpan tema dan Selesai! Silakan lihat hasilnya di blog Anda. Jika berhasil dan pemasangan tepan akan tampil seperti pada blog saya ini.
Oke, cukup sekian dari Aan Channel YT. Kalau teman-teman masiih mengalami kendala, silahkan tinggalkan dikolom komentar, insyallah akan saya bantu. Semoga bermanfaat buat Anda semua.