Cara Membuat Floating Widget Breaking News / Headline News di Blogger

Setelah sebelumnya saya membagikan widget breaking news 2 style, pada artikel kali ini saya akan memberikan tutorial tentang cara membuat floating widget breaking news atau headline news di blogger. Sebelumnya saya menempatkan braking news ini pada area header dari blog, tetapi kali ini saya akan membuat widget ni menjadi melayang di bawah layar pengunjung blog.

Baca juga : Cara Membuat Widget Breaking News 2 Style di Blogger

Sebenarnya sudah jelas dari judul artikel ini adalah floating widget berarti widget mengambang atau mengapung. Jadi floating widget breaking news adalah widget mengambang breaking news, saya menempatkan widget ini di bawah, karena biasanya template atau tampilan blog rata-rata menggunakan floating menu navigasi jadi pandangan pengunjung akan berkurang di atas.

Dilihat dari fungsi, floating widget braking news atau headline news ini sangat berguna sekali, apalagi bagi pengunjung agar mengetahui informasi-informasi terbaru dari situs atau blog tersebut. Nah, untuk cara memasang floating widget breaking news atau headline news ini, silahkan ikuti langkah-langkah dari saya di bawah ini.

Baca juga : Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Cara Memasang Floating Widget Breaking News / Headline News di Blogger

1. Langkah pertama masuk ke akun Blogger kalian.
2. Pilih menu Tema, klik Edit HTML.
3. Cari kode </body> dengan menekan Ctrl + F pada keyboard, kemudian masukan kode di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>
        $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});});
</script>
        <!--start: Float Widget Breaking News / Headline News-->
        <div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'>

    <div style='text-align:center;display:block;max-width:1000px;height:auto;overflow:hidden;margin:auto'>
        <!--Script Float Widget Breaking News / Headline News-->
<style scoped='scoped' type='text/css'>
#news { background:#333333; border-bottom: 4px solid #1194f2; 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; }
#ltsposts {float: left;margin: -2px 0px 0px 150px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
</style>

<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-newspaper-o fa-lg'/> BREAKING <span style='color:#ff4f4f;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.tutorialumum.com/', // Ganti dengan URL blog agan
numpostx     = 10;             // Maximum berita yang akan muncul
$.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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>
<!--Akhir script Float Widget Breaking News / Headline News-->
        </div>
 </div><!--end: Float Widget Breaking News / Headline News-->

• Pengaturan :
• 1000px adalah ukuran lebar floating widget breaking news, silahkan ganti sesuai ukuran yang kalian inginkan.
• #333333 di gunakan untuk menampilkan warna background.
• #1194f2 di gunakan untuk menampilkan warna garis bawah.
• http://www.tutorialumum.com/ ganti dengan URL blog kalian.
• 10 adalah jumlah artikel yang akan tampil.
• Silahkan atur sesuai keinginan kalian.
4. Setelah selesai mengatur, silahkan pilih Simpan tema.
5. Jika berhasil maka widget breaking news akan tampil seperti ini.

Baca juga : Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar

Demikian tutorial dari saya mengenai cara membuat floating widget breaking news atau headline news di blogger. Jika ada pertanyaan mengenai cara memasang atau mengenai floating widget braking news ini, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai widget ataupun tutorial blogging tetaplah kunjungi blog Tutorial Umum.