Teknologi
16.16
Cara Membuat Breaking news berjalan di Blog
Jakarta, Wongso News Selamat Siang Sobat OTS Lovers, Cara membuat breaking news responsive berjalan pada blog bisa agan buat dengan mudah. Dengan adanya breaking news bergerak membuat blog anda lebih menarik dan atraktif. Membuat Breaking news berjalan ini bisa melalui widget pada blogger atau di taruh setelah <header> pada edit template.
Cara Membuatnya :
1. Log in pada akun blogger sobat,
2. Masuk ke Layout -> add a Widget -> HTML/Javascript,
3. Copi kode listing <Script> dibawah ini :
<!-- breaking news OnTheSpotLovers -->
<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #E6A816; border-top: 0px solid #333; display: block; float: left; height: 30px; 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: -8px 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/AVvXsEjlO2SE_qHGYOWYWY3Za0RP8fSBMlMavTcYChq7OQNnXU9rk68z_6e6QaGQdrmJBDO_0qEig_NSUc4FFYRLcoRmoBfBk_vyx45MnJr6reH4UQCi_axnXjkfB33eaY5u99kpLawdNXdKjZK1/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;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:0 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 = 'https://pecintaonthespot.blogspot.com//', // 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>
<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #E6A816; border-top: 0px solid #333; display: block; float: left; height: 30px; 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: -8px 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/AVvXsEjlO2SE_qHGYOWYWY3Za0RP8fSBMlMavTcYChq7OQNnXU9rk68z_6e6QaGQdrmJBDO_0qEig_NSUc4FFYRLcoRmoBfBk_vyx45MnJr6reH4UQCi_axnXjkfB33eaY5u99kpLawdNXdKjZK1/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;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:0 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 = 'https://pecintaonthespot.blogspot.com//', // 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: //Ganti dengan URL Blog Agan
//Maksimum berita yang muncul
//Kecepatan waktu kemunculan berita
4. Setelah semua selesai 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>
5. Semoga artikel saya bermanfaat. Bila ada kekurangan pada penulisan atau hal lain-nya. Penulis menerima kritikan dan saran.
Thanks To: KangIbay
