Cara Membuat Headline Breaking News di Blog - Widget headline breaking news ini hampir sama dengan widget recent post, namun headline breaking news ini berbentuk horizontal seperti navigasi yang biasa dipasang diatas header.
Sebenarnya widget ini saya temukan di blog mas andes, jadi mohon maaf jika saya pinjam kodennya ya mas andes.. hehe..
Kembali ke topik, widget headline breaking news ini akan memunculkan artikel terbaru blog anda. Widget ini juga dilengkapi menu social media yang isinnya facebook, twitter, google pluss dan rss feeds. Berikut penampakan headline breaking news
Atau demo gif nya
Berminat untuk memasangnya? mari ikuti tutorial saya kali ini tentang cara membuat headline breaking news di blog.
Sebenarnya widget ini saya temukan di blog mas andes, jadi mohon maaf jika saya pinjam kodennya ya mas andes.. hehe..
Kembali ke topik, widget headline breaking news ini akan memunculkan artikel terbaru blog anda. Widget ini juga dilengkapi menu social media yang isinnya facebook, twitter, google pluss dan rss feeds. Berikut penampakan headline breaking news
Atau demo gif nya
Berminat untuk memasangnya? mari ikuti tutorial saya kali ini tentang cara membuat headline breaking news di blog.
Membuat Headline Breaking News di Blog :
Berikut kode-kode dari widget ini (Bisa disimpan di notepad dahulu) :
CSS :
#news { background:#26A65B; 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: 940px; }
.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/AVvXsEiKTvGfR5S38caukBVhP5zYW2YxY7vOlRwVJsPWI_z0vzZ2vgDHk4kKgAmr7_iQS-0dguCL0aMWXjdtOULdSpqRqOpKvvl4OjFLzoCdJNdc0aZMWvrHEwjJ69UJbgilPkJYBW85dkdTR89J/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}
- width: 940px : sesuaikan dengan lebar blog anda.
Javascript :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.mas-aldi.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 :- http://www.mas-aldi.com : ganti dengan link blog anda.
HTML :
<div id='news'><span class='titlenews'>Latest News!</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/aldi.master.seller' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/+AldiAllesandro' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/AldiAllesandro' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/MasAldi' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
Keterangan :- Ganti link social media-nya dengan link social media anda.
Nah, sekarang tinggal pemasangannya ditemplate blog
1. Seperti biasa, pergi ke dasbor blogger -> pilih menu template -> lalu klik edit html.
2. Masukkan kode CSS tadi di atas kode ]]></b:skin> atau </style>
3. Masukkan kode Javascript tadi diatas kode </body>
4. Nah sekarang tinggal menaruh kode HTML, untuk kode ini terserah anda mau dipasang dimana. Jika ingin memasang diatas blog, bisa ditaruh dibawah kode <div id='wrapper'> atau </head>
Semoga bermanfaat :)
Sumber Kode : http://mas-andes.blogspot.com/2013/10/cara-membuat-headline-breaking-news-blog.html
makasi kakbagus hasilnya
ReplyDeleteSama2 :)
Deletemembuat breaking headline news ini yang saya cari,tapi yanng responsive ada nggak pak?
ReplyDeleteTinggal tambahin media query aja mas..
Deleteoh iya deng,lupa hehee
DeleteKeren nih mas,, lebih bagus dan menarik sekali , membuat pengunjung juga tertarik ingin menge kliknya,,dan tentunya tidak memberatkan blog
ReplyDeleteudah aku pasang mas, aku edit-edit eh malah gak karu-karuan. mau re-pasang lagi mas ^_^
ReplyDeleteSilahkan..
Deletewahh memang keren banet nih kang,, saya ijin ambil scriptnya ya :D
ReplyDeleteSilahkannn...
DeleteKalau saya dulu kalau mau buat headline, pakai yang marquee saja, yang gampang.
ReplyDeleteIya lebih gampang.. mungkin kapan2 saya akan share..
DeleteSaya masih cari cari yang untuk blog wordpress mas, kalau ada tolong kasih kabar ya Mas.
ReplyDeleteN Salam kenal kembali Mas
Saya kurang ngerti WP mas..
DeleteMaaf ya..
wha mantap gan, saya nyimak aja dulu
ReplyDeleteOke mas albar..
Deletewah dengan memasang headline breaking news ini pasti tampilan blogg jadi makin cantik yah mas :)
ReplyDeleteIyah..
DeletePanjang juga ya mas ccs dan htmlnya, ngaruh gak kecepatan blognya?
ReplyDeleteSedikit
Deletelanjutkan pakde :)
ReplyDeleteSiapp..
Deletelanjutkan pakde :)
ReplyDeleteKunjungan malam mas,, adminnya dmana nih lagi nunggu artikel selanjutnya
ReplyDeleteLagi kehilangan ide nih.. hehe..
Deletemenarik nih mas cara membuat breaking news nya.
ReplyDeletesaya save dulu ya,siapa tau nanti pengen pasang
Silahkan mas yanto..
DeleteSangat bermanfaat ni kak, ijin pasang di blog aku ya ?
ReplyDeleteAdmin : www.sagitasoft.com
Silahkan..
Deleteheadline breaking newsnya keren nih mas, izin nyimpen dulu ya & salam kenal dari www.bas-studio.com
ReplyDeleteSilahkan, salam kenal juga..
Deletekeren mas tutornya ane bookmark dulu belum ada waktu buat otak atik nih
ReplyDeleteOke2
DeleteNyerah deh kalau berhubungan dengan HTML :D
ReplyDeleteHehe, belajar dong mbak..
Deletekalau saya menyerah berhubungan dengan nyamuk mbak wida....heeee
Deletekalau pasang headline new isi gak usah pasang resent posts lagi ya...simple juga sih...selain irit tempat, tampilannya juga menarik...saya pelajari dulu ya mas aldi...terima kasih tutorialnya.
ReplyDeletemantap gan tricknya
ReplyDeletejangan lupa ya visit juga ke seosc.blogspot.com
follow ya nanti di follow balik :D
mantap dah artikelnya
ReplyDeletehttp://acemaxs31.com/obat-herbal-kolesterol/
Saya udah coba gan, cuma loading blog semakin lama, kira2 penyebabnya apa ya?
ReplyDeleteKalo nambah berat, jelas nambah dikit mas..
DeleteTak bisa jalan ni mas aldi, masalahnya dimana ya?
ReplyDeleteGak bisa jalan gimana mas?
Deleteketika dirubah ke blog saya , kenapa malah error loading feed ya mas ?
ReplyDeletegan tolong sih buatin versi responsivenya...... biar pas sama templatenya.....
ReplyDeletethx artikelnya bermanfaat....