27 September 2017

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

(Baca juga : Cara Membuat Widget Random Post Warna Warni dengan Counter di Blog)

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.
Cara Membuat Headline Breaking News Berjalan di Blog

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.
Cara memasang Widget Breaking News Keren di Blog

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(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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 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 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 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 di Blog


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 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 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.
    Cara Membuat Widget Breaking News di 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.

13 comments

yang style ke 2 lebih keren menurut saya. tapi itu bikan blog lemot ga?

boleh nih min ane coba satu" bila ada kesalahan panduannya min

Mantao bgt nih izin coba ya

Mantap nih tutornya.kira2 cocok buat semua template gak?

waah keren gan, Tapi dikasih breakig news ini berat gak sih? memang pasti bakal menarik perhatian pengunjung, tapi kalo berat percuma juga sih.

Gan untuk template TutorMagazine3Dv1.0FreeVersion saya cari-cari tidak ketemu kode body yang tanpa tanda /. Bagaimana solusinya gan?

coba carinya kode <body
skrip body awalnya soalnya berbeda & panjang....

mas kalo misalkan breaking news nya pakai gambar atau thumbnail kek di blog ini www drakorku-id.com, itu gimana?

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon