Tutorial membuat Widget Breaking News di Blogger

Tutorial Breaking News di Blogger

Widget Breaking News adalah sebuah widget navigasi yang bertujuan untuk memberitahukan kepada para pengunjung mengenai artikel terbaru.

Selain untuk mempercantik tampilan Blogger, widget ini juga bisa untuk meningkatkan visitor.

Khusus untuk yang menggunakan Blogger, berikut cara pemasangannya.

Panduan pemasangan

Sebelum pemasangan, alangkah baiknya Backup terlebih dahulu template yang mau Kamu modif. Hal itu bertujuan untuk menghindari terjadinya error ketika salah saat pemasangan.

Langsung saja Kita ke tutorial berikut:

• Sebelumnya, pasang AJAX Jquery jika belum ada. Untuk mengecek apakah ada atau tidak, Kamu bisa search jquery di template Kamu.
• Letakan kode berikut diatas </head>, jika belum punya Jquery

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

Lalu tambahkan CSS berikut ini:

• Masuk ke Blog
• Pilih menu Tema
• Klik Edit Tema
• Lalu cari kode </style>
• Silhakan Copy kode berikut:

  /* Breaking News by Dizhaowa */

#bd-breakingnews {position: relative;margin: 0 auto;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #9c74aa;box-shadow: 0 5px 35px rgb(0 0 0 / 7%);border-radius: 10px;}

#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #9c74aa;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}

#breaking-bsd-news li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}

#breaking-bsd-news li a:hover {color:#9c74aa;}

#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}

#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}

@media only screen and (max-width:640px){

#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}

#bd-breakingnews .head-breaking {padding:6.5px 14px;}

#breaking-bsd-news {margin-left:60px;}}



/* Dark Mode Breaking News */

.drK #bd-breakingnews {background:#192834;border:1px solid #9c74aa;box-shadow: 0 5px 35px rgb(0 0 0 / 7%);}

.drK #bd-breakingnews .head-breaking {background:none repeat scroll 0 0 #9c74aa;color:#fff;}

.drK #breaking-bsd-news li a:hover {color:#9c74aa;} 

.drK #breaking-bsd-news li a {color:white;}

Sesuaikan CSS .drK dengan CSS dark mode yang ada di template Kamu. Ubah juga #9c74aa untuk warna, dan #192834 untuk mode gelap.

• Paste script diatas tepat di atas </style>
• Klik Simpan

Untuk selanjutnya, tambahkan kode Javascript berikut di template Kalian.

<script>/*<![CDATA[*/  $(document).ready(function(){var e="https://www.dizhaowa.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});

/*]]>*/</script>

• Paste script diatas tepat di atas </body>
• Klik Simpan

Ganti https://www.dizhaowa.com dengan alamat URL blog Kamu.

Untuk terakhir, letakan kode HTML berikut dimana saja sesuai keinginanmu. Namun, letak terbaiknya adalah dibawah header. Maka dari itu, coba-coba di Tata letak, lalu Tambahkan gadget, kemudian pilih bagian HTML/Javascript. Letakan kode berikut ini:

<div id='bd-breakingnews'>
  <span class='head-breaking'>
    <svg class='line' viewbox='0 0 24 24'><g transform='translate(4.000000, 5.000000)'><path d='M14.6559111,3.63457778 C15.9092444,5.90568889 15.9092444,8.67724444 14.6559111,10.9403556'></path><path d='M0.6672,7.28728889 C0.663644444,8.50595556 0.6672,9.93528889 1.67342222,10.7895111 C2.67964444,11.6446222 3.47875556,11.2917333 4.78097778,11.7201778 C6.08408889,12.1495111 7.90897778,14.7966222 9.92497778,13.6010667 C11.0147556,12.8268444 11.5285333,11.3655111 11.5285333,7.28728889 C11.5285333,3.20906667 11.0378667,1.76373333 9.92497778,0.973511111 C7.90897778,-0.221155556 6.08408889,2.42595556 4.78097778,2.8544 C3.47875556,3.28373333 2.67964444,2.93084444 1.67342222,3.78506667 C0.6672,4.63928889 0.663644444,6.06862222 0.6672,7.28728889 Z'></path></g></svg>
  </span>
  <div id='breaking-bsd-news'>Loading...</div>
</div>

Lalu Simpan

Untuk demo, bisa klik dibawah ini:

Demo

Go to Link