<div class="thumb-post">
<noscript><img alt="Lostcips" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNco81PETPCc1rZftn-Ne4E-8Bwy-Gp5zsQCsndTnAzdf55bqgnOk7c6ROBzILzzl6wleyyVh50szLYp-k-gNPAyEtXXhQJH618kJ8k7_0eViPHUds9cYgc4yCWnlMWTtvw861nre5Rc/s1600/headline-breaking-news.jpg" width="650"/></noscript>
</div>
<b>Cara Menambahkan/Membuat Breaking News Feed di Header Blog</b> - Hallo sobat blogger semua, karna banyaknya yang bertanya mengenai bagaimana <b>Cara Menambahkan atau Membuat Breaking News Feed di Header Blog</b> kali ini saya akan share nih bagaimana cara menambahkan atau membuatnya.<br />
<div class="img-width-300 img-right">
<amp-img alt="Lostcips" height="350" layout="responsive" on="tap:lightbox1" role="button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNco81PETPCc1rZftn-Ne4E-8Bwy-Gp5zsQCsndTnAzdf55bqgnOk7c6ROBzILzzl6wleyyVh50szLYp-k-gNPAyEtXXhQJH618kJ8k7_0eViPHUds9cYgc4yCWnlMWTtvw861nre5Rc/s1600/headline-breaking-news.jpg" tabindex="0" width="650"></amp-img></div>
<br />
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.<br />
<h3>
Cara Memasang Breaking News di Header Blog</h3>
1. Masuk ke menu Template > Edit HTML<br />
2. Letakkan kode CSS di bawah ini tepat di atas kode <code>]]></b:skin></code> atau <code></style></code><br />
<pre>     /* 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;}}</pre>
3. Tembahkan kode di bawah ini sebelum kode <code></body></code><br />
<pre>     <script type='text/javascript'>//<![CDATA[// Breaking News$(document).ready(function(){var e="<code>http://www.lostcips.com</code>",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></pre>
<b><i>Catatan:</i></b><br />
<i>- Ganti <code>http://www.lostcips.com</code> dengan alamat blog sobat</i><br />
<br />
4. Simpan kode di bawah ini di bawah kode <code><body></code><br />
<pre>     <div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span><div id='adbreakingnews'>Loading...</div></div></pre>
<b><i>Catatan:</i></b><br />
<i>- 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.</i><br />
<pre>     <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></pre>
5. Save Template.<br />
<br />
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.

Membuat Breaking News Feed di Blogger Terbaru

2016

Desain Blog

Description:

Cara Menambahkan/Membuat Breaking News Feed di Header Blog - Hallo sobat blogger semua, karna banyaknya yang bertanya mengenai bagaimana Cara Menambahkan atau Membuat Breaking News Feed di Header Blog kali ini saya akan share nih bagaimana cara menambahkan atau membuatnya.

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 HTML
2. 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 sobat

4. 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 == &quot;index&quot;'><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.