Cara Memasang Widget Breaking News di Blog
February 28, 2020
Widget News Ticker atau Breaking News adalah sebuah widget yang berisikan teks berjalan seperti yang sering digunakan pada template Megazine atau website berita.
Memasang News Ticker di blog memilik banyak manfaat dan salah satu anfaatnya apabila memasang widget newsticker adalah dapat memberitahukan kepada pengunjung blog mengenai artikel yang baru rilis.
Membuat widget Newsticker kali ini sudah responsive dan dengan tampilan yang clean dan modern. Memasang Widget Breaking News di Blog sangatlah mudah hanya dengan menampatkan kode CSS dan kode Javascript saja.
Baiklah tidak perlu berlama-lama lagi mari kita langsung mulai saja!
Cara Membuat Widget Newsticker di Blog
Pertama, login ke blogger.com > Pilih Tema > Pilih Edit HTML dan cari kode ]]></b:skin> dan tempatkan kode css dibawah ini tepat diatas kode tersebut.
/* 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:#3749a2;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;text-decoration:none}#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:#438e68;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}}
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://imamkunblog.com/",t=12;$.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>
Jika ingin mengubah warnah background breaking news ubah kode #438e68 dengan kode warna keinginan anda.Langkah terakhir simpan template dan lihat hasilnya!!
Silahkan ganti imamkunblog.com dengan alamat blog anda.
Ganti angka 12 dengan angka sesuai keinginan untuk enampilkan jumlah post yang akan muncul.
Seperti itulah cara memasang widget newsticker di blog dengan mudah, bagaimana mudah bukan?
Baca Juga: Cara Membuat Tanda Ceklik di Samping Judul artikel blog
Demikianlah artikel kali ini cara memasang widget breaking news atau newsticker di blog dengan mudah. Semoga artikel kali ini bermanfaat sekian dan terima kasih!!
0 komentar