Cara Membuat Breaking News di Blog – Atau yang sering disebut dengan breaking News. Dari yang saya telusuri di google, ada beberapa macam he...
Cara Membuat Breaking News di Blog – Atau yang sering disebut dengan breaking News.
Dari yang saya telusuri di google, ada beberapa macam headline news, tapi dengan headline news yang saya sharing ini berbeda dan unique, yaitu ada tombol Social Media yang berada di sebelah kanan nya.
Sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk Cara Membuat Headline News pada Blog kita.
1. Login pada akun blogger.
2. Masuk ke Tata Letak blog dan tambahkan widget.
3. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript.
<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !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/AVvXsEi9NgAWVJBmU_yV-XN5sxxKiYRzdLv8vExfTP2f-XY8DVohGqF2EoSlezyBuhjo75gPNeyh1jsHOSiphZZK3OZyJCH4mCynWiKvIXr7nQI9CIE6DMt55Slp1BhTzJSfDBwZxYFr7sWNPP4Y/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'>Latest Post.....</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/officalsitepalmahutabarat' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/105343109942045056844' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/palmarapper' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/PalmaHutabarat_ErnRapperSpeed' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://palmahutabarat69.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>';
$('#ltsposts').html(skeleton);
function tick(){
$('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#ltsposts').html('<span>No result!</span>');
}
},
error: function() {
$('#ltsposts').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
Keterangan:
- Tulisan warna bold kuning 835px ganti dengan ukuran lebar pada blog anda.
- Ganti http://palmahutabarat69.blogspot.com dengan URL alamat blog anda.
- Tulisan yang berwarna merah ganti dengan ID masing-masing yang sobat miliki.
- Dan yang bertulisan bold 20 warna orange , adalah jumlah postingan yang akan ditampilkan pada headline news yang kita buat barusan tadi.
4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan Deh.
Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak yang cocok.
Thanks To Mas Andes
