 |
| Cara Menambahkan Breaking News Feed di Blog |
Tampan Community™ - Halo sobat semua karena banyak yang bertanya ke saya bagaimana Cara Menambahkan Breaking News Feed di Blog, Pada kesempatan kali ini saya akan membuat post yang mana merupakan jawaban dari pertanyaan sobat blogger di blog Tampan Community™.
Silahkan sobat perhatikan Langkah-langkah Berikut dan cara penerapannya :
Pertama silahkan sobat buka Blogger => Template => Klik Edit HTML
Kemudian 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;}}
Kemudian tambahkan kode di bawah ini sebelum tag penutup </body>
Ganti http://lunafy.blogspot.com dengan alamat blog sobat<script type='text/javascript'>//<![CDATA[// Breaking News$(document).ready(function(){var e="http://lunafy.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>
Kemudian simpan kode di bawah ini di mana saja bebas, terapkan di dalam tag body (Diantara tag pembuka <body> dan tag penutup </body>)
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.<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span><div id='adbreakingnews'>Loading...</div></div>
Langkah Terakhir simpan template sobat, Mudah bukan Cara Menambahkan Breaking News Feed di Blog, Semoga Artikel ini bermanfaat buat sobat semua. Terima Kasih<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>
kayaknya bagus nih, saya coba dulu.. oh ya berat gak nih kalo nambah widget ini ?
BalasHapus