Cara Mudah Membuat Breaking News di Blog

Mungkin banyak yang pernah melihat beberapa situs website yang populer memiliki tampilan unik di bagian atas atau pun di bagian tertentu yang terlihat seperti berita tulis berjalan atau lebih kerennya breaking news atau news ticker. Pada beberapa blog maupun website, penambahan widget ini di anggap penting karena bisa membantu mempermudah pengunjung blig melihat postingan kita yang lainnya tampa harus mencar melalui pencarian maupun pada widget lain yang biasanya berada pada sidebar

Keberadaan breaking news di blog akan membuat blog kita jadi lebih keren dan lebih professinoal sekalipun kita masih menggunakan blog gratisan atau blogspot. Cara berikut ini saya share ulang dari teoridesign.com yang merupakan cara pertama (karena kita akan membagikan dua cara) dan saya rubah sedikit kode pada bagian CSSnya.

Pada widget breaking news ini, hanya menampilkan judul postingan saja tanpa memunculkan gambar / thumbnail serta deskripsi. Ini tentunya supaya breaking news / news ticker tidak menggangu loading blog pada saat mulai load.

Membuat Breaking News Blogger

Pada Tutorial ini, saya akan memberikan 2 (dua) opsi untuk cara membuat breaking news pada blogspot yang tentunya widget breakign news valid HTML5, responsive dan fast loading. Sehingga tidak terlalu mempengaruhi loading blog Anda. Opsi yang pertama yaitu menerapkan langsung pada template, sedangkan opsi yang kedua adalah menerapkan pada widget saidebar. Tergantung pada Anda nantinya, mau pilih cara yang keberapa.

Dan sebaiknya sebelum memulai tutorial ini backup terlebih dahulu tempalate blog Anda, agar jika terjadi error dll maka akan mudah bagi Anda untuk melakukan pemulihan / restore template. Tapi jika Anda menempatkan semua kodenya dengan benar maka error tidak akan muncul.

Breaking news Header

Pada cara membuat news ticker di blog pertama ini, posisi breaking newsnya ditempatkan pada header dan penerapannya langsung pada template blog. Silakan ikuti langkah demi langkah car dibawah

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

<script data-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 karena umumnya script ini biasanya sudah ada di setiap templete.

3.  Berikutnya letakkan kode 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 kode </body> letakan kode dibawah ini tepat 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 adalah meletakkan breaking newsnya, kamu mau letakkan dimana? di footer atau header. Dibawah ini adalah gambar contoh meletakkan breaking news di header

Pada gambar diatas, breaking newsnya diletakkan setelah wrapper (outer wrapper) atau tepat diatas header. Silahkan temukan kode tersebut pada template blog Anda. Tiap template biasanya memiliki kode yang berbeda. Jadi Anda haruslah jeli dalam menempatkannya. Silahkan cari pada blog Anda, lokasi yang diinginkan untuk pemasangan breaking news.

6. Selanjutnya, setelah menemukan lokasi yang tepat pada template blog Anda, letakkan kode dibawah ini diatasnya

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

Breaking News Widget Sidebar

Pada tutorial kedua tentang cara membuat breaking news di blog, penempatan kode yang diterapkan berbeda pada kode yang pertama. Kodenya kita pasang pada sidebar blog.

1. Login
2. Masuk Ke Layout atau Tata letak
3. Pilih "Add a Gadget"
4. Pilih "HTML/JavaScript"
5. Klik tanda "+"

6. Pastekan Kode Berikut Didalamnya setelah mengklik tambah html/javascript

<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #E6A816; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; } 
#dwposts {float: left;margin: -10px 10px;text-align: left;}
#dwposts ul,#dwposts li{list-style:none;margin:0;padding:0;}
#dwposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
.sidebar ul li {border:none}
</style>

<div id='news'>
<div id='dwposts'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://dewaplokis.blogspot.com/',
    numpostx = 10;
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }                
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#dwposts').html(skeleton);
            function tick(){
            $('#dwposts li:first').slideUp( function () { $(this).appendTo($('#dwposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
        } else {
            $('#dwposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#dwposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Ubah https://dewaplokis.blogspot.com/ dengan URL Anda dan untuk nilai 10 adalah jumlah maksimal postingan yang akan dimunculkan, silakan diubah sesuai selera

Untuk Anda yang sudah memberikan requesant tentang cara membuat breaking news berjalan di wordpress, belum bisa saya penuhi karena saya masih mencari beberapa referensi tambahan. Karena jelas penerapan pada blogspot akan pasti berbeda dengan wordpress.


Demikianlah tutorial cara membuat breaking news di blog. Semoga bermanfaat. Jika ada yang kurang jelas, silahkan masukkan komentarnya. Terima  kasih

Share