Bocco-Bocco

Blog ini berisi tentang tips blogging dan internet serta seputar informasi kota daeng

» Tanpa Label » Membuat Headline Breaking News Di Blog

Membuat Headline Breaking News Di Blog

Pada malam ini Bocco-Bocco™ akan berbagi widget artikel terbaru yang didesain seperti berita yang berjalan di acara TV. Widget headline breaking news. ini hanya menampilkan judul artikelnya saja tanpa ada thumbnail, tampilannya cukup simple dan elegan tanpa membebani loading blog. bagi sobat blogger yang ingin memasang widget tersebut, bisa ikuti tutorial dibawah ini:

Cara Memasang Widget Breaking News Style 1
  • Login ke akun blogger mas bro
  • Setelah login, masuk ke menu Template, Edit HTML
  • Selanjutnya cari kode </head>
  • Setelah ketemu, masukkan script dibawah ini tepat diatasnya
<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 = "https://bocco-b0cc0.blogspot.co.id/";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>
  • Pengaturan:
  • Silahkan ganti URL https://bocco-b0cc0.blogspot.co.id/ dengan URL Blog Mas Bro
  • Ganti angka 10 dengan jumlah artikel yang ingin ditampilkan
  • Ganti angka 6 dengan angka yang di inginkan, angka menunjukkan kecepatan breaking news
  • Di close_button, silahkan ganti false dengan true jika ingin menampilkan tombol close
  • Kemudian cari kode </body> masukkan kode dibawah ini tepat diatasnya
<script src='http://yourjavascript.com/11023731850/bocco-bocco-breakingnews.js' 
type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById
("post_breakingnews"));
//]]>
</script>
  • Selanjutnya masukkan kode HTML dibawah ini tepat sesudah kode <body> 
<div id='breaking-newsticker'/>
  • Simpan template 
Cara Memasang Widget Breaking News Style 2
  • Login ke akun blogger Mas Bro
  • Pilih menu Tema, 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/AVvXsEgMx9U2UHcGRUuKqG4JHXwkqiw6hF-OuQJH0_jE7kVP66Hh42j1Uu9AfoOCl-vcrtarFhmH4Cbon4XZQuI3EaKtOtUX30_JOaZif7pWNtZOIu3LpFeAsqTZcqwnhTe7_dHqVxZIHsk3koiL/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://bocco-b0cc0.blogspot.co.id/', // Ganti dengan URL blog agan
    numpostx     = 5;             // 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:
  • Silahkan ganti URL https://bocco-b0cc0.blogspot.co.id/ dengan URL Blog Mas Bro
  • Ganti angka 5 dengan jumlah artikel yang ingin ditampilkan
  • Ganti angka 3000 dengan angka yang di inginkan,untuk mengatur durasi jeda dari widget
  •  Setelah selesai Simpan Template

Ditulis Oleh : Bocco-Bocco | Bocco-Bocco™

Terima kasih telah berkunjung ke blog ini jika kalian suka silahkan share. Artikel saya yang berjudul Membuat Headline Breaking News Di Blog. artikel ini resmi ditulis oleh Bocco-Bocco .Pada hari ini khususnya Monday 15 January 2018. Jika anda ingin sebarluaskan artikel ini, atau meletakan artikel ini sebagai tulisan anda mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar atau Pada Forum Diskusi. Terima kasih!!!
www.bocco-bocco.tk

0 Comment for "Membuat Headline Breaking News Di Blog"

Back To Top