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 menunjukkan tutorial perihal 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.

Sebenarnya sudah terang dari judul artikel ini yaitu floating widget berarti widget mengambang atau mengapung. Makara floating widget breaking news yaitu widget mengambang breaking news, saya menempatkan widget ini di bawah, alasannya yaitu biasanya template atau tampilan blog rata-rata memakai floating hidangan 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 hidangan Tema, klik Edit HTML.
3. Cari arahan </body> dengan menekan Ctrl + F pada keyboard, lalu masukan arahan 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://murid-kreatif.blogspot.com/', // Ganti dengan URL blog agan numpostx     = 10;             // Maximum informasi 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 yaitu 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://murid-kreatif.blogspot.com/ ganti dengan URL blog kalian.
• 10 yaitu jumlah artikel yang akan tampil.
• Silahkan atur sesuai harapan kalian.
4. Setelah simpulan mengatur, silahkan pilih Simpan tema.
5. Jika berhasil maka widget breaking news akan tampil ibarat ini.

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.

sumber:tutorialumum.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: