Cara Menambahkan Breaking News Keren di Blog

Salah satu widget penunjang pada sebuah blog atau web adalah Breaking News Feed. Dengan menambahkan widget ini, pengunjung dapat langsung melihat artikel terbaru yang nantinya akan muncul bergantian. Bila Anda tertarik untuk mencoba menggunakannya, berikut cara penerapannya :

Catatan : Sebelumnya sobat sudah menautkan fontawesome pada template

1. Sebaiknya sobat sudah menautkan CSS fontawesome pada template. Bila belum, silahkan letakkan kode berikut tepat di atas </head>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Buka Blogger > Template > Klik Edit HTML
Tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Breaking News */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}

@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}

3. Kemudian tambahkan kode di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://wajahilmu.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Ganti http://wajahilmu.blogspot.com dengan alamat blog sobat

4. Selanjutnya simpan kode di bawah ini di mana saja bebas, terapkan di dalam tag body (Diantara tag pembuka <body> dan tag penutup </body>)

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>

5. Jika ingin menampilkan breaking news ini hanya pada halaman utama saja, silakan bungkus markup di atas dengan tag kondisional khusus halaman utama

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>

6. Terakhir simpan template.

Result

Source : http://twistedshape.blogspot.com/2015/04/cara-menambahkan-breaking-news-feed-di-blog.html

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/05/cara-menambahkan-breaking-news-keren-di.html

14 komentar

Tuliskan komentar

Unknown

author

16 May 2015, 09:05:00 delete

wahh saya izin coba dulu deh gan, heheheh, bagus banget nih gan

Balas

s1223

16 May 2015, 09:11:00 delete

bermanfaat nih postnya :D makasih gan

16 May 2015, 11:32:00 delete

bisa di coba nih, terutama untuk blog dengan niche berita..
tapi apa tidak membuat loading blog menjadi lambat? mohon pencerahannya

Muhammad taufiq nur

16 May 2015, 16:30:00 delete

tidak kok, soalnya widget ini lumayan ringan

admin

16 May 2015, 16:35:00 delete

nice info gan, sngt bermanfaat

16 May 2015, 16:51:00 delete

wahh bagus ni artikelnya :)

PulsaInter.NET

16 May 2015, 17:10:00 delete

mesti coba nih gan, artikelnya keren

16 May 2015, 17:18:00 delete

Info yang bermanfaat gan...

17 May 2015, 04:08:00 delete

maaf nanya ini bikin berat blog gak

17 May 2015, 05:19:00 delete

lumayan ringan gan, ane juga pernah pasang tapi ane comot krna gak sesuai dengan niche blog ane. di situ jga udh ada tutorial pengaturannya agar hanya muncul di homepage. jadi loadingnya gak berpengaruh sama artikel agan

17 May 2015, 17:02:00 delete

Cukup bermanfaat buat saya Thanks mas :)

17 May 2015, 17:30:00 delete

sip gan (y)

22 May 2015, 17:26:00 delete

nah ini dia yg ane cari2, infony sangat bermanfaat gan.
nanti ane coba dehh :D

27 May 2015, 08:16:00 delete This comment has been removed by a blog administrator.

✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.

EmoticonEmoticon OOT

Cara Menambahkan Breaking News Keren di Blog

Share this :

14 komentar