Memasang Kotak Breaking News Berjalan di Blog

Memasang Kotak Breaking News Berjalan di Blog 1

Hallo Bloggers... Lama tidak berjumpa... Di postingan kali ini saya akan membahas cara memasang Kotak Breaking News berjalan di blog. Breaking News? Ya seperti berita terbaru atau berita terupdate. Untuk apa? Untuk memcantik blog dan untuk mempermudah pengunjung mengetahui postingan terupdate blog.

Screenshot:

Memasang Kotak Breaking News Berjalan di Blog 2

GIF:

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>.

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>.


/* breakingnews-danandroid-download */
#beritahangat {
background:#359BED;
float: left;
height: 42px;
line-height:  42px;
overflow: hidden;
width: 70%;
}
#beritahangatterakhir li a {
color:#fff;
font-family: sans-serif;
font-weight: bold;
}
#beritahangatterakhir li a:hover {
color:#444;
}
#beritahangat .tulisbreaking {
background:#0566A9;
}
#beritahangat .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
span.tulisbreaking:after{
content: close-quote;
position: absolute;
width: 0px;
top: 15px;
right: -12px;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid #006ECC;
border-top: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
}
#beritahangat .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #006ECC;
}
#beritahangatterakhir {
float: left;
margin-left: 74px;
}
#beritahangatterakhir ul,#beritahangatterakhir li{list-style:none;margin:0;padding:0}

Catatan:
- Width: 70% bisa diganti sesuai lebar template anda.

3. Temukan lagi <CTRL+F> kode <body> atau </header>.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <body> atau </header>.


<!--beritahangatdanandroid-download-->
<div id='beritahangat'><span class='tulisbreaking'>News</span>
<div id='beritahangatterakhir'>Tunggu Sebentar...</div></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://danandroid-download.blogspot.com/', // Replace With your Blog Url
    numpostx= 20; // Maximum Post
$.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>';
$('#beritahangatterakhir').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#beritahangatterakhir li:first').slideUp( function () { $(this).appendTo($('#beritahangatterakhir ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#beritahangatterakhir').html('<span>No result!</span>');
}
},
error: function() {
$('#beritahangatterakhir').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
<div style='clear:both;'/>

Catatan :Ganti URL dengan URL blog kalian.

Sekian postingan saya kali ini jika ada masalah silahkan menulis di kolom komentar di bawah. Terima kasih sudah berkunjung ,sampai jumpa di kesempatan berikutnya dan tolong bagikan : Memasang Kotak Breaking News Berjalan di Blog.