Screenshot:
GIF:
Memasang Kotak Breaking News Berjalan di Blog
Cara Pertama :1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan <CTRL+F> 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.
1 comments:
keren gan bermanfaat tutorialnya
Notes :
- Tidak Diperbolehkan untuk Mempromosikan Barang atau Berjualan
- Disarankan Berkomentar Menggunakan Bahasa Indonesia yang sopan