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.

2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS, untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery.

Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS,  karena template AMP ini sangat anti jika di tempelkan script jQuery.

(Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll)

2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog

Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger)

1. Cara Membuat Sticky Widget Sidebar dengan jQuery

• Langkah pertama masuk ke akun blogger sobat
• Pilih menu Tema, pilih Edit HTML
• Masukan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sidebar-wrapper').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sidebar4');
    var stickyTop = $('#sidebar4').offset().top;
    var stickyHeight = $('#sidebar4').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
      var windowTop = $(window).scrollTop();
        var lebar = $(window).width();
      if ((stickyTop < windowTop)&&(lebar > 759)) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

• Keterangan :
• Silahkan ganti ID #sidebar-wrapper, #sidebar4, #footer-wrapper, sesuaikan dengan ID sidebar blog sobat
• Jika tidak tampil baik, atau agak melebar silahkan masukan kode CSS ini pada ID CSS sidebar sobat.

#sidebar4{width:100%;max-width:260px;margin:0;}

• Jika tidak berhasil, coba terus menggunakan ID CSS yang lain sampai berubah
• Setelah selesai mengatur pilih Simpan tema.

(Baca juga : Cara Mudah Membuat Widget Artikel Pilihan Di Blog)

2. Cara Membuat Sticky Widget Sidebar dengan CSS

• Langkah pertama masuk ke akun blogger sobat
• Pilih menu Tema, pilih Edit HTML
• Masukan kode CSS di bawah ini tepat di atas kode </head>

<style type='text/css'>
#sidebar-sticky {
  width: 300px;
  float: right;
  padding: 0;
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}
</style>

• Catatan :
• width= Digunakan untuk mengatur lebar sidebar template blog sobat
• top = Digunakan untuk mengatur tinggi header widget sobat
• Sesuaikan dengan template blog sobat
• Pastikan CSS blog sobat tidak menggunakan overflow.
• Kemudian masukan kode di bawah ini tepat di bawah kode </aside>

<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

• Setelah selesai pilih Simpan tema
• Kemudian silahkan masukan widget yang sobat ingin tampilkan di widget sticky_sidebar
• Jika berhasil maka widget sidebar akan muncul.

(Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger)

Silahkan sobat pahami langkah-langkah di atas, demikian tutorial dari saya mengenai 2 cara membuat sticky widget sidebar dengan CSS dan jQuery. Apabila ada pertanyaan mengenai cara pemasangannya, silahkan masukan ke dalam komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai cara pemasangannya silahkan tetap kunjungi blog Tutorial Umum.