Cara Menciptakan Widget Breaking News 2 Style Di Blogger

Breaking News atau headline news biasa kita lihat di televisi. Breaking news ini biasanya menayangkan berita-berita terbaru secara sekilas, namun tidak hanya di televisi saja kita dapat melihat breaking news atau headline news ini, di website informasi juga selalu ada. Untuk itu pada tutorial kali ini saya akan menunjukkan tutorial cara menciptakan widget breaking news 2 style di blogger.

Widget breaking news ini biasanya di gunakan oleh situs atau blog dengan niche berita, namun bagi agan yang mau memakai widget ini selain niche informasi juga di perbolehkan, alasannya berdampak konkret bagi blog menyerupai menambah view dan memberitahukan kepada visitor bahwa ada artikel lainnya di dalam blog atau situs agan.

Breaking news ini biasanya menayangkan informasi Cara Membuat Widget Breaking News 2 Style di Blogger

Style Widget Breaking News

Widget breaking news yang saya bagikan ini mempunyai 2 style, berikut tampilan widget breaking news 2 style :

Style 1

Widget breaking news ini mempunyai cara pemasangan yang tidak rumit, dan juga komplemen icon dengan memakai Font Awesome. Untuk pergeserannya, widget breaking news ini bergeser keatas sehingga terlihat elegan. Berikut yaitu tampilan dari widget breaking news style 1.

Style 2

Widget breaking news yang terakhir ini sama menyerupai yang sering kita lihat di televisi, yaitu bergeser kesamping. Berikut yaitu tampilan widget breaking news style 2.

Jika agan sudah melihat beberapa style dari widget breaking news ini, kini tinggal menentukan style yang mana yang agan ingin pakai. Untuk cara memasang widget breaking news 2 style, silahkan ikuti langkah-langkah dari saya berikut ini.

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

Cara Memasang Widget Breaking News 2 Style di Blogger

Cara Memasang Widget Breaking News Style 1

Langkah pertama silahkan agan masuk ke akun Blogger agan
Pilih hidangan Tema, pilih Edit HTML, cari arahan <body> kemudian tempatkan arahan dibawah ini tepat di bawahnya

<style scoped='scoped' type='text/css'> #news { background:#49505a; 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; } ul.shsocial { background:#333; float: right; margin: -8px 0; } ul.shsocial li {float:left;list-style: none outside none;border:none;} ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskkP4QkR7Gi8q3iOD6_QgIP4YhCDjH5gn2tgyY8aFJD9mzVmLn3kgJVbVuWwMHENqy3VgQ0Ml_BZXpwiuLb288ggXYvALXRoBZgn-dszV2YeZgKSIyU-qHUf6CO0ovnIeFkQLv1yntH61/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} ul.shsocial li.fb a{ background-position:0 0} ul.shsocial li.gp a{ background-position:-96px 0} ul.shsocial li.rs a{ background-position:-192px 0} ul.shsocial li.tw a{ background-position:-256px 0} ul.shsocial li.fb a:hover{ background-position:0 -32px} ul.shsocial li.gp a:hover{ background-position:-96px -32px} ul.shsocial li.rs a:hover{ background-position:-192px -32px} ul.shsocial li.tw a:hover{ background-position:-256px -32px} </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 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>

Pengaturan :

Ganti URL http://www.tutorialumum.com/ dengan URL blog agan.
Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan.
Ganti angka 3000 dengan angka yang agan inginkan, gunanya yaitu mengatur durasi jeda dari widget breaking news ini.

Setelah selesai mengatur pilih Simpan tema, jikalau berhasil maka akan muncul widget breaking news ini sempurna di atas blog agan.

Cara Memasang Widget Breaking News Style 2

Langkah pertama silahkan agan masuk ke akun Blogger agan
Pilih hidangan Tema, pilih Edit HTML, cari arahan </head> kemudian tempatkan arahan dibawah ini tepat di atasnya

<style type="text/css"> #breaking-newsticker{margin:15px 0;position:relative} #post_breakingnews{position:relative;z-index:9;overflow:hidden;padding:8px;width:100%!important;box-sizing:border-box;box-shadow:0 5px 5px -5px #3339} .breakingnewstitle{float:left;background-color:#f54b4b;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase;position:relative} .breakingnewstitle:after{height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-top:1px;border-left:13px solid #f54b4b;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;margin-top: -3px;z-index:9} .breakingnews marquee{width:80%;position:absolute} @media screen and (max-width:800px){.breakingnews marquee{width:70%}} @media screen and (max-width:500px){.breakingnews .breakingnewstitle{width:90px;font-size:11px;font-weight:normal}.breakingnews .breakingnewstitle:after{content:none}.breakingnews marquee{width:55%}} .breakingnews marquee a{color:#1893fc;margin:0 15px;line-height:2} #post_breakingnews .breakingnews{width:1120px;max-width:100%;margin:0 auto} </style> <script type='text/javascript'> var url_breaking = "http://www.tutorialumum.com"; var jumlah_post = 10; var marquee_speed = "6"; var close_button = false; var info_text = true; </script>

Pengaturan :

Silahkan ganti URL http://www.tutorialumum.com/ dengan URL blog agan.
Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan di widget breaking news.
Ganti angka 6 dengan angka yang agan inginkan, angka ini di gunakan untuk kecepatan breaking news.
Di close_button, silahkan ganti false dengan true jikalau agan ingin menampilkan tombol close.

Kemudian cari arahan </body> masukan arahan di bawah ini tepat diatasnya

<script src='https://rawgit.com/mastamvan/backup/master/breakingnews.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews")); //]]> </script>

Selanjutnya masukan arahan HTML di bawah ini sempurna sesudah arahan <body>

<div id='breaking-newsticker'/>

Setelah selesai memasukan semua arahan di atas, silahkan klik Simpan tema, jikalau berhasil maka widget akan muncul di atas blog.

Demikian tutorial dari saya mengenai cara menciptakan widget breaking news 2 style di blogger. Jika ada pertanyaan mengenai cara mengatur atau pemasangan widget ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial umum, supaya artikel mengenai widget breaking news di atas bermanfaat untuk agan dan sista semua. Untuk tutorial yang lainnya mengenai widget di blogger, silahkan tetao kunjungi blog .