Breaking News di Blog ini berfungsi untuk menampilkan beberapa berita atau konten pada Blog anda dalam satu baris dan bergantian, dan biasanya yang di tampilkan adalah artikel terbaru dari blog tersebut. Mungkin sobat blogger pernah melihat atau bahkan sudah tidak asing lagi dengan Breaking News ini, umumnya breaking news ini di pasang di bagian header blog.
Cara Memasang Breaking News di Header Blog
1. Masuk ke menu Template > Edit HTML2. Letakkan kode CSS di bawah ini tepat di atas kode
]]></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. Tembahkan kode di bawah ini sebelum kode </body> <script type='text/javascript'>//<![CDATA[// Breaking News$(document).ready(function(){var e="http://www.lostcips.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>
Catatan:- Ganti
http://www.lostcips.com dengan alamat blog sobat4. Simpan kode di bawah ini di bawah kode
<body><div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span><div id='adbreakingnews'>Loading...</div></div>Catatan:
- Jika sobat hanya ingin menampilkan breaking news ini pada halaman utama saja, silakan sobat bungkus markup di atas dengan tag kondisional khusus halaman utama saja.
<b:if cond='data:blog.pageType == "index"'><div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span><div id='adbreakingnews'>Loading...</div></div></b:if>5. Save Template.
Sekian artikel yang saya posting hari ini, semoga bisa bermanfaat bagi kita semua. Untuk berkembangnya blog ini, silakan anda Like dan Share blog kami. Terimakasih telah berkunjung di blog kami semoga hari anda menyenangkan :D.