Cara Gampang Menciptakan Breaking News Di Blog

Mungkin banyak yang pernah melihat beberapa situs website yang terkenal mempunyai tampilan unik di bab atas atau pun di bab tertentu yang terlihat menyerupai info tulis berjalan atau lebih kerennya breaking news.

Penambahan breaking news di blog akan menciptakan blog kita jadi lebih keren dan lebih professinoal sekalipun kita masih memakai blog gratisan atau blogspot. Cara berikut ini aku share ulang dari teoridesign.com

Baik eksklusif ke TKP untuk menciptakan breaking news

cara menciptakan breaking news di template blog

 

1.  Loggin > Blogger > Dashboard > Template > Edit HTML
2.  Letakan arahan di bawah ini sempurna diatas arahan </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Namun Jika script ini atau sejenisnya sudah ada di template Anda silahkan dilewati langkah ini alasannya umumnya script ini biasanya sudah ada di setiap templete.

3.  Berikutnya letakkan arahan dibawah ini di atas]]></b:skin>

/* CSS Breaking News */ #breakingnews { margin:15px 0 0 0; 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:'Roboto Condensed'; font-size:16px;font-weight:400; text-transform:uppercase;padding:6.5px 22px; } #adbreakingnews li a { font-family:'Open Sans'; 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 } /* CSS Homepage Responsive */  @media only screen and (max-width:768px){ .img-thumbnail { margin:0 10px 0 0;}} @media only screen and (max-width:640px){ #content-wrapper {padding:0; } h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title { font-size:18px;margin:20px 0;clear:both;padding:20px 0 0 0; } .post {padding:15px; } .post-body { margin-bottom:10px; } .post-vinfo { margin-left:0;}.img-thumbnail { width:100%;height:auto;margin:0; } .img-thumbnail img {width:100%;height:auto; } #breakingnews {margin:20px 0 0 0;margin-right:0; } #breakingnews .breakhead {padding:6.5px 14px; } #adbreakingnews {margin-left:50px; } .post .label-info { left:15px;top:15px;}} @media only screen and (max-width:480px){ h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title { font-size:16px; } .post-body, .comment-info { display:none!important;visibility:hidden;width:0;height:0; }#breakingnews  { display:none;}}

4.  cari arahan </body> letakan arahan dibawah ini sempurna diatasnya

<script type="text/javascript"> //<![CDATA[// Breaking News$(document).ready(function(){var e="URL BLOG ANDA",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>

5. Langkah terakhir ialah meletakkan breaking newsnya, kau mau letakkan dimana? di footer atau header. Dibawah ini ialah gambar referensi meletakkan breaking news di header

Pada gambar diatas, breaking newsnya diletakkan sesudah wrapper (outer wrapper) atau sempurna diatas header. Silahkan temukan arahan tersebut pada template blog Anda. Tiap template biasanya mempunyai arahan yang berbeda. Makara Anda haruslah jeli dalam menempatkannya. Silahkan cari pada blog Anda, lokasi yang diinginkan untuk pemasangan breaking news.

6. Selanjutnya, sesudah menemukan lokasi yang sempurna pada template blog Anda, letakkan arahan dibawah ini diatasnya

<div id=’breakingnews’><span class=’breakhead’><i class=’fa fa-rss’></i></span> <div id=’adbreakingnews’>Loading…</div></div> 

Demikianlah tutorial cara menciptakan breaking news di blog. Semoga bermanfaat. Jika ada yang kurang jelas, silahkan masukkan komentarnya. Terima  kasih
Sumber https://dewaplokis.blogspot.com/

Berbagi :