Cara Membuat Widget Notifikasi Breaking News, Widget ini bertujuan untuk memberitahukan kepada pengunjung blog bahwa ada banyak artikel menarik lainnya. Selain untuk hanya sekedar hiasan, widget ini juga bermanfaat untuk meningkatkan visitor. Ketika seseorang melihat notifikasi ini, dan menemukan judul yang terlihat menarik, maka sudah jelas dia akan mengunjungi artikel tsb.
Cara Membuat Widget Notifikasi Breaking News Di Blogger
Okay, langsung saja kita ke tutorial cara pembuatannya. Namun seperti biasa, pada setiap pemasangan widget ataupun redesain template. Saya selalu mengingatkan untuk melakukan Backup tema terlebih dahulu sebelumnya, jadi silahkan Backup tema dulu untuk menghindari kesalahan fatal yang akan membuat blog jadi berantakan.
Jika template sudah di Backup, dan file cadangan terdownload dengan sukses sekarang kita lanjut ke tahap berikutnya dengan menambahkan kode CSS di bawah ini pada tema blog kalian.
/* Breaking News By: xploit.my.id */
#bd-breakingnews {position: relative;margin: 0 auto;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid var(--themeC);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 var(--themeC);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:var(--linkC);}
#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:50px;}}
/* Breaking News Dark Mode By: xploit.my.id */
.drK #bd-breakingnews {background:var(--darkBs);border:1px solid var(--darkU);box-shadow: 0 5px 35px rgb(0 0 0 / 7%);}
.drK #bd-breakingnews .head-breaking {background:none repeat scroll 0 0 var(--darkU);color:#fff;}
.drK #breaking-bsd-news li a:hover {color:var(--darkU);}
.drK #breaking-bsd-news li a {color:white;}
Silahkan sesuaikan CSS dark mode pada template kalian, ubah .drK menjadi CSS untuk mengaktifkan mode gelap. Jika tidak ada mode gelap di tema kalian, silahkan di hapus saja bagian CSS dark modenya.
Selanjutnya, tambahkan kode Javascript di bawah ini pada template blog kalian. Biasanya javascript pada tema blogger disimpan di bagian paling bawah yaitu di antara tag </body>.
/* Breaking News by xploit.my.id */ $(document).ready(function(){var e="https://www.xploit.my.id",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>")}})});
Ganti bagian yang saya tandai yaitu https://www.xploit.my.id dengan URL blog kalian.
Kemudian yang terakhir, silahkan simpan kode di bawah ini terserah mau di tempatkan di mana saja. Namun usahakan tempatkan di bagian atas setelah header, agar notofikasi dapat dilihat dengan jelas.
Saya tidak memebrikan tutorialnya secara rinci, karna setiap template memiliki penempatan tag yang berbeda dan tidak semuanya sama.
<div id='bd-breakingnews'>
<span class='head-breaking'>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64" width="40px" height="40px"><g data-name="12-megaphone"><path fill="#e4e4e4" d="M5,29v1H3a2.006,2.006,0,0,1-2-2V24a2.006,2.006,0,0,1,2-2H5v7Z"/><path fill="#e4e4e4" d="M61.83,23.17A4,4,0,0,1,59,30V22A4.025,4.025,0,0,1,61.83,23.17Z"/><path fill="#f03332" d="M33,35v3a4,4,0,0,1-4,4H19a4,4,0,0,1-4-4V35Z"/><polygon fill="#e4e4e4" points="33 17 33 35 15 35 13 35 13 17 33 17"/><polygon fill="#595959" points="59 22 59 30 59 46 56 44.73 56 5.5 59 4 59 22"/><path fill="#e4e4e4" d="M32.8,45.33a.987.987,0,0,1-.08,1.28l-1.98,2.07,2.02,8.89a2.012,2.012,0,0,1-2,2.43H24.73a2.038,2.038,0,0,1-2-1.57L19,42H30Z"/><path fill="#f03332" d="M13,17V35H11a6,6,0,0,1-6-6V23a6,6,0,0,1,6-6Z"/><polygon fill="#f0f0f0" points="56 5.5 56 44.73 33 35 33 17 56 5.5"/><path fill="#cfcfcf" d="M30,17V28a3,3,0,0,1-3,3H13v4H33V17Z"/><path fill="#c1c1c1" d="M61,26a4.025,4.025,0,0,0-1.17-2.83,4.078,4.078,0,0,0-.83-.613v6.886a4.078,4.078,0,0,0,.83-.613A4.025,4.025,0,0,0,61,26Z"/><path fill="#ca2a28" d="M11,31a3,3,0,0,1-3-3V17.811A6,6,0,0,0,5,23v6a6,6,0,0,0,6,6h2V31Z"/><polygon fill="#383838" points="56 39.2 56 44.73 59 46 59 40.4 56 39.2"/><path fill="#d9d9d9" d="M44.286,34.514A10,10,0,0,1,38,25.23V14.5L33,17V35l23,9.73V39.2Z"/><path fill="#cfcfcf" d="M3,22v4a2,2,0,0,1-2,2,2.006,2.006,0,0,0,2,2H5V22Z"/><path fill="#ca2a28" d="M22,37H33V35H15v3a3.99,3.99,0,0,0,3,3.859V41A4,4,0,0,1,22,37Z"/><path fill="#c1c1c1" d="M30.74,48.68l1.98-2.07a.987.987,0,0,0,.08-1.28L30,42H28.615l2.32,7.54Z"/><path fill="#d9d9d9" d="M25.642,55.45l-2.077-9A2,2,0,0,1,25.514,44h3.717l-.616-2H19l3.73,16.43a2.038,2.038,0,0,0,2,1.57h6.03a2.012,2.012,0,0,0,2-2.43L32.63,57H27.591A2,2,0,0,1,25.642,55.45Z"/><rect width="10" height="3" x="13.5" y="17" fill="#f7f7f7" rx="1.5" ry="1.5"/><rect width="4" height="3" x="25" y="17" fill="#f7f7f7" rx="1.5" ry="1.5"/><ellipse cx="51.684" cy="12.695" fill="#f6fafd" rx="1.642" ry="2.286" transform="rotate(-45.02 51.684 12.695)"/><ellipse cx="51.682" cy="17.708" fill="#f6fafd" rx=".825" ry="1.148" transform="rotate(-45.02 51.681 17.708)"/><ellipse cx="29.682" cy="54.708" fill="#f6fafd" rx=".825" ry="1.148" transform="rotate(-45.02 29.681 54.708)"/><ellipse cx="10.427" cy="19.208" fill="#f6fafd" rx=".413" ry=".574" transform="rotate(-45.02 10.428 19.208)"/><rect width="8" height="2" x="19.102" y="38" fill="#fc4747" rx="1" ry="1"/><rect width="3" height="2" x="28.5" y="38" fill="#fc4747" rx=".977" ry=".977"/><path fill="#383838" d="M22,35v5A9,9,0,0,1,4,40V30H3a1.975,1.975,0,0,1-1-.279V40a11,11,0,0,0,22,0V35Z"/></path></rect></rect></ellipse></ellipse></ellipse></ellipse></rect></rect></path></path></path></path></path></polygon></path></path></path></polygon></path></path></polygon></polygon></path></path></path></g></svg>
</span>
<div id='breaking-bsd-news'>Loading...</div>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
Disini aya memasang kode tsb di bagian Tata Letak dengan membuat widget baru HTML / Javascript yang berisikan kode di atas, tidak melalui pengaturan Tema > Edit HTML karna lebih simple.
Untuk demonya bisa kalian scrooll ke atas blog ini, anda akan melihat notifikasi artikel terbaru. Atau untuk hasilnya bisa kalian lihat gambar di bawah ini.
