Cara Membuat Breaking News Responsive Horisontal Keren di Blog
13 November 2019
Baik Sobat seklaina, satu lagi tips & trik Cara membuat breaking news responsive berjalan di blog seperti yang terlihat pada gambar bisa sobat buat dengan mudah. Dengan adanya headline news maka blog kita akan terlihat seperti cuplikan berita berjala di TV.
Membuat headline keren berjalan di blog sama seperti widget recent post (postingan terbaru) nama pada widget headline breaking news responsive ini berbentuk horisontal karena akan di pasang di header atau widget breaking news ini biasa di pasang di bawah menu.
Langsung saja berikut tutorial cara menambahkan widget headline breaking news responsive di blog.
Login pada akun blogger.
Masuk ke Layout → Add a Widget.
Copy kode dibawah ini, lalu masukan kedalam widget HTML/Javascript.
<!-- breaking news ferlyando sandala -->
<style scoped='scoped' type='text/css'>
#news { background:#25282d; border-bottom: 4px solid #e60303; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -3px 0px 0px 137px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: 0px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHutJ9q2qGniwiNHAYNEAHNaumO1NUDS7Fh5AHfMP81cv-bT73q4K6e9SvFr8ShoHeaua94AxDXuH2lZO0iKiyLu-DjHGE9Ms93a4OAI20oYXjmusvrR21vmh3MpF0e6WVWvx7Dw8X559q/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:25px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:-8 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-bookmark'/> BREAKING <span style='color:#E6A816;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://namablogkamu.blogspot.co.id/', // Ganti dengan URL blog sobat
numpostx = 10; // Maximum berita yang akan muncul
$.ajax({
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#ltsposts').html(skeleton);
function tick(){
$('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
}
setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
} else {
$('#ltsposts').html('<span>No result!</span>');
}
},
error: function() {
$('#ltsposts').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
Keterangan:
// Warna merah URL, ganti dengan URL blog sobat
// 10 warna merah, maximum berita yang akan muncul
// 3000 warna merah, kecepatan yang diinginkan
// background:#25282d Sesuaikan warna yang anda suka tampilkan
4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.
Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog sobat dengan mengubah beberapa value kode html widget tersebut.
TAMBAHAN : Selain menggunakan Add a Wigdet, sobat bisa langsung memasukan kode tersebut dibawah kode html menu pada pengaturan "Edit HTML" blog sobat, biasnya struktur kode menu setelah </header>
Jika mau lihat kode warna yang sobat suka disini.
Kalau mau di pasang dibawa menu atau rubrik, contohnya lihat gambar dibawa ini.
Itu saja tutorial cara menambahkan breaking news responsive horisontal keren pada blog, semoga bermanfaat & berhasil...