Cara Membuat 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 bisa melihat breaking news atau headline news ini, di website berita juga selalu ada. Untuk itu pada tutorial kali ini saya akan memberikan tutorial cara membuat 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 menggunakan widget ini selain niche berita juga di perbolehkan, karena berdampak positif bagi blog seperti menambah view dan memberitahukan kepada visitor bahwa ada artikel lainnya di dalam blog atau situs agan.

Cara Membuat Widget Breaking News 2 Style di Blogger

Style Widget Breaking News

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

Style 1

Widget breaking news ini memiliki cara pemasangan yang tidak rumit, dan juga tambahan icon dengan menggunakan Font Awesome. Untuk pergeserannya, widget breaking news ini bergeser keatas sehingga terlihat elegan. Berikut adalah tampilan dari widget breaking news style 1.

Style 2

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

Jika agan sudah melihat beberapa style dari widget breaking news ini, sekarang tinggal memilih 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 Mudah 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 menu Tema, pilih Edit HTML, cari kode <body> kemudian tempatkan kode 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/AVvXsEgMrE6ul6NFO33FDN_Z86yPmhhqqOqm9d_x4JbF0V-McN_rd-qfAh-P9B4f05SUBa6jsYo5bBYwgKkqiVAss8uuO4bdrPPmfHGtslZHU6muL2B8MRf9OJku2FmClY0WHWCGvGqZKuFok8hf/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 = 'https://tutorialbloggerindo1.blogspot.co.id/', // 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>

Pengaturan :

Ganti URL https://tutorialbloggerindo1.blogspot.co.id/ dengan URL blog agan.
Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan.
Ganti angka 3000 dengan angka yang agan inginkan, gunanya adalah mengatur durasi jeda dari widget breaking news ini.

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

Cara Memasang Widget Breaking News Style 2

Langkah pertama silahkan agan masuk ke akun Blogger agan
Pilih menu Tema, pilih Edit HTML, cari kode </head> kemudian tempatkan kode 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 https://tutorialbloggerindo1.blogspot.co.id/ 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 jika agan ingin menampilkan tombol close.

Kemudian cari kode </body> masukan kode 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 kode HTML di bawah ini tepat sesudah kode <body>

<div id='breaking-newsticker'/>

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

Demikian tutorial dari saya mengenai cara membuat 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, semoga 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 Tutorial Umum.

Cari Blog Ini