Cara Memasang Widget Newsticker pada Blog

www.petrussiahaan.com

petrussiahaan.com - Cara Memasang Widget Newsticker pada Blog - Jika Anda memiliki sebuah blog di platform Blogger dan ingin menambahkan widget berita berjalan (newsticker) untuk menampilkan berita terbaru atau pengumuman penting, Anda dapat melakukannya dengan mudah menggunakan beberapa langkah sederhana.

Widget Newsticker akan menarik perhatian pengunjung Anda dan memberikan mereka akses cepat ke informasi terkini. Berikut adalah panduan langkah demi langkah tentang Cara Memasang Widget Newsticker pada Blog.

Daftar Isi

Cara Memasang Widget Newsticker di Blog
Kesimpulan

Cara Memasang Widget Newsticker di Blog

Pertama Tambahkan CSS

Pertama buka Dasbor Blogger anda > 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>

Kedua Tambahkan Javascript

Selanjutnya, tambahkan kode di bawah ini tepat sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.petrussiahaan.com/",t=10;$.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>

Ganti alamat blog Anda dan kemudian angka 10 sesuai dengan jumlah post yang ingin Anda tampilkan.

Ketiga Tambahkan HTML

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(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

Demo

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah Cara Memasang Widget Newsticker pada Blog dan menambahkan elemen menarik untuk meningkatkan pengalaman pengunjung Anda. Selalu ingat untuk memeriksa tampilan blog Anda setelah menambahkan widget untuk memastikan semuanya berjalan dengan baik dan terlihat sesuai harapan. Selamat mencoba!

https://www.naminakiky.com/2019/04/cara-memasang-widget-newsticker-di-blogger.html

Beri Komentar Parse Kode

Menulis kode gunakan kode (kode harus di-parse)
Menulis dalam syntax highlighter gunakan kode panjang (kode harus di-parse)
Menyisipkan gambar gunakan URL GAMBAR (ekstensi .jpg, .png, .gif, .webp, .ico)
Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.

Petrus Siahaan