Cara Menciptakan Floating Widget Breaking News / Headline News Di Blogger

Setelah sebelumnya saya membagikan widget breaking news 2 style, pada artikel kali ini saya akan memperlihatkan tutorial wacana cara menciptakan 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 menciptakan widget ni menjadi melayang di bawah layar pengunjung blog.

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

Sebenarnya sudah terang dari judul artikel ini yakni floating widget berarti widget mengambang atau mengapung. Kaprikornus floating widget breaking news yakni widget mengambang breaking news, saya menempatkan widget ini di bawah, alasannya yakni biasanya template atau tampilan blog rata-rata memakai floating sajian navigasi jadi pandangan pengunjung akan berkurang di atas.

Dilihat dari fungsi, floating widget braking news atau headline news ini sangat berkhasiat sekali, apalagi bagi pengunjung semoga 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 sajian Tema, klik Edit HTML.
3. Cari isyarat </body> dengan menekan Ctrl + F pada keyboard, lalu masukan isyarat 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 isu 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 yakni 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 yakni jumlah artikel yang akan tampil.
• Silahkan atur sesuai harapan kalian.
4. Setelah final mengatur, silahkan pilih Simpan tema.
5. Jika berhasil maka widget breaking news akan tampil menyerupai ini.

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

Demikian tutorial dari saya mengenai cara menciptakan 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 , semoga artikel di atas bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai widget ataupun tutorial blogging tetaplah kunjungi blog .

• Twitter
• Facebook
• Google
• Pinterest

Subscribe to receive free email updates: