Cara Gampang Menciptakan Breaking News Di Blog

Mungkin banyak yang pernah melihat beberapa situs website yang terkenal mempunyai tampilan unik di cuilan atas atau pun di cuilan 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 pribadi ke TKP untuk menciptakan breaking news

cara menciptakan breaking news di template blog

 

1.  Loggin > Blogger > Dashboard > Template > Edit HTML
2.  Letakan aba-aba di bawah ini sempurna diatas aba-aba </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 sebab umumnya script ini biasanya sudah ada di setiap templete.

3.  Berikutnya letakkan aba-aba 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 aba-aba </body> letakan aba-aba 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 yaitu meletakkan breaking newsnya, kau mau letakkan dimana? di footer atau header. Dibawah ini yaitu gambar pola meletakkan breaking news di header

Pada gambar diatas, breaking newsnya diletakkan sesudah wrapper (outer wrapper) atau sempurna diatas header. Silahkan temukan aba-aba tersebut pada template blog Anda. Tiap template biasanya mempunyai aba-aba yang berbeda. Kaprikornus 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 aba-aba 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/

Bagikan Artikel ini