Cara Membuat Widget Breaking News Blogger
9 Des 2023
0
Komentar
SusahTidurZz - Halo sobat susahtidurzz gimana kabarnya semoga kalian tidak seperti nama blog ku ya SusahTidurZz oke kali ini aku akan membagikan widget breaking news di blogger yang sangat keren dan wajib kamu pasang di blog kamu.
Kemudian cari kode </style> kemudian salin kode di bawah ini dan letakan di atas </style>.
Lalu Simpan
Apa Itu Widget Breaking News Blogger?
Widget Breaking News Blogger ini adalah sebuah widget navigasi yang bertujuan untuk memberikan informasi kepada para pengunjung mengenai artikel terbaru yang ada di blog kalian, selain itu widget ini mempercantik tampilan blog kamu sehingga pengunjung akan sangat tertarik dengan blog kalian.
Cara Membuat Widget Breaking News Blogger
Sebelum memasang pastikan kamu sudah pasang AJAX jQuery jika belum ada, cara cek apakah ada atau tidak nya kamu bisa ketik jQuery pada menu Edit HTML template kamu.Jika belum ada AJAX jQuery kamu bisa salin kode dibawah ini dan letakan tepat di atas </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
Kemudian cari kode </style> kemudian salin kode di bawah ini dan letakan di atas </style>.
/* 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.
Kemudian klik Simpan.
Langkah selanjutnya, tambahkan kode javascript dibawah ini dan letakan tepat diatas </body>.
<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>
Langkah terakhir, letakan kode HTML berikut dimana saja sesuai keinginan kamu akan lebih bagus diletakan di bawah Header atau dimana saja kamu ingin menaruh HTML ini yang menurut kamu bagus.
Cara menambahkan html ini cukup tambahkan gadget, kemudian pilih HTML/Javascript lalu 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
Belum ada Komentar untuk "Cara Membuat Widget Breaking News Blogger"
Posting Komentar
Berikan Komentar Terbaik mu agar situs ini berjalan lancar