KeyzeX – Selamat datang para pemirsa semua, jumpa lagi bersama saya Rahadina Budiman Sundara dalam acara Tutorial Blogging yang pada kesempatan ini akan membawakan sebuah berita yang berjudul
” Menambahkah Breaking News pada Blog “
Berbicara Breaking News, pasti yang agan ketahui adalah sebuah berita yang terbaru dan biasanya hanya tampil sekali saja dalam tipi dan itu bukan dari acara sebuah tipi tersebut. Kembali lagi menuju pembahasan, Breaking News ini berfungsi untuk menampilkan beberapa berita, konten, maupun artikel terbaru dari blog tersebut. Umumnya Breaking News ini terdapat pada header blog.
Menambahkan Breaking News pada Blog
-
- Pastikan agan terlebih dahulu login pada www.blogger.com
- Lalu pada bagian dashboard masuk ke Template > Edit HTML, lalu pastekan kode di bawah ini tepat sebelum code ]]></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;}}
-
- Kemudian tambahkan lagi code di bawah ini tepat sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://keyzex.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>
-
- Masukan code di bawah ini tepat sesudah <body> ataupun sebelum </body>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading.....</div></div>
Catatan :
- Ganti http://keyzex.blogspot.com dengan URL blog agan