Tutorial kali ini kami akan menjelaskan langkah-langkah Cara Membuat Breaking News Feed Responsive di Blog. Langsung saja silahkan Anda ikuti langkah-langkahnya di bawah ini. Contohnya seperti yang ada di blog Kami ini.
1. Pertama, silahkan Anda Buka Blogger ► Template ► Edit HTML.
2. Kemudian, silahkan Anda cari kode HTML ]]></b:skin> atau </style> menggunakan ctrl+F pada keyboard selanjutnya copy-paste kode tersebut lalu tekan Enter.
3. Tahap selanjutnya, silahkan Anda masukan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style> yang Anda cari tadi.
3. Tahap selanjutnya, silahkan Anda masukan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style> yang Anda cari tadi.
Kode CSS |
|---|
/* 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 #2C2C2C;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:#FF0000;margin-top:10px;transition:all 0.5s ease-in-out;} #adbreakingnews li a:hover {color:#359bed;} #adbreakingnews {float:left;margin-left:175px;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;}} |
4. Kemudian, silahkan Anda masukan kode javascript dibawah ini sebelum tag penutup </body>.
Kode Java Script |
|---|
<script type='text/javascript'> //<![CDATA[ // Breaking News $(document).ready(function(){var e="https://allwindowstutorial.blogspot.co.id/",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> |
Silahkan Anda ganti url : https://allwindowstutorial.blogspot.co.id/ dengan alamat blog Anda.
5. Untuk tahap selanjutnya silahkan Anda simpan kode dibawah ini terserah dimana saja dengan ketentuan diantara tag pembuka <body> dan tag penutup </body>.
Kode HTML |
|---|
<div id='breakingnews'><span class='breakhead'><span>Breaking News</span></span> <div id='adbreakingnews'>Loading...</div></div> |
Jika Anda ingin menampilkan Breaking News hanya pada halaman utama atau hanya pada main page blog Anda, silahkan Anda bungkus tag markup di atas dengan tag kondisional khusus pada halaman utama seperti di bawah ini.
Kode HTML |
|---|
<b:if cond='data:blog.pageType == "index"'> <div id='Breaking News'><span class='breakhead'><i class='fa fa-rss'/></span> <div id='adbreakingnews'>Loading...</div></div> </b:if> |
6. Tahap terakhir silahkan Anda simpan template.
Semoga bermanfaat.
Post a Comment