Tutorial Membuat Widget Breaking News di Blogspot

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Tutorial Membuat Widget Breaking News di Blogspot, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang android, Blogger, CSS, Javascript, Tutorial, Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Widget breaking news atau juga bisa di bilang headline news merupakan widget untuk membantu pengunjung atau visitor Anda mengetahui artikel yang terkait maupun postingan menarik yang sudah Anda publikasikan atau posting.

Widget breaking news biasanya digunakan/dipasang pada bagian header dari pada template Anda, agar bertujuan pengunjung yang mengunjungi dapat melihat postingan menarik lainnya.

Widget ini dapat mencegah terjadinya penurunan visitor/traffic karna breaking news ini dapat memuat hingga 10 postingan/artikel sekaligus. Tutorial ini saya dapatkan dari blog TutorialUmum.com.

Cara Memasang Widget Breaking News/Headline News di Blogger

Disini saya akan membagikan 2 (dua) style widget breaking news, semuanya mempunyai fitur slider untuk memuat semua postingan Anda.

Membuat Widget Breaking News Style 1

Copy dan Paste kode CSS dibawah ini ke atas kode </style> atau dibawah kode <style>

#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/AVvXsEgLh5Jq0MFw3Jn6hLfLXtikZHcNISKavxDqiEefr8KY6REuxg7L5JLYyjfVN-I1DimVEiKvd4oxkBH66MZeB9AXQDbbjKbpw1KLSfSjznVS6pfz9n8s_HznMKHcdRQNqIoP9bW5VgCy_lwT/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}

Kemudian Anda Pastekan kode dibawah ini ke bawah kode <body>

<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>

Selanjutnya Pastekan kode Javascript dibawah ini ke atas kode </head> atau </body>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://mrdzgn.blogspot.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>

Silakan Anda ganti http://mrdzgn.blogspot.com dengan url blog Anda, angka diganti 10 dengan jumlah artikel yang ingin Anda tampilkan, dan angka 3000 silakan di ganti dengan durasi dari pergantian tiap postingannya.

Membuat Widget Breaking News Style 2

Pastekan kode dibawah ini ke atas kode </head>

<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;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 = "https://mrdzgn.blogspot.com";

var jumlah_post = 10;

var marquee_speed = "6";

var close_button = false;

var info_text = true;

</script>

Silakan Anda ganti tulisan yang saya tandai dengan url blog Anda. Kemudian Copy dan Paste kode dibawah ini di atas kode </body>

<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>

Langkah terakhirnya adalah pemasangan kode untuk memanggil script yang sudah di pasang. Silakan Pastekan kode dibawah ini dimana Anda ingin memasang widget breaking news ini.