Cara Memasang Haedline Breaking News di Blogger

Halo gan ini postingan pertama saya di blog baru saya, Nah sekarang gua akan bagikan tutorial nih Yaitu "Cara Memasang Haedline Breaking News di Blogger" Baiklah akan saya berikan tutorialnya Check It Out!

1. Pertama, buka Blogger kamu Klik Disini

2. Selanjutnya, Kamu masuk ke Template >> Edit HTML

3. Setelah itu, Letakkan kode css dibawah ini tepat dibawah ]]></b:skin> 

#headlinenews { position:relative;background:#343434; display: block;border-top:3px solid #FF6600; height: 33px; line-height: 33px; overflow: hidden;margin:0 auto;padding: 0px;width: 100%;} #news { float: left; margin-left: 120px; } #news a { background: none !important; color:#fff !important; font: bold 11px/33px Arial; text-decoration: none; } .titlenews { background:#FF6600; color: #fff; display: block; float: left; font: bold 12px/33px Arial; padding: 9px; margin-top: -10px; position: absolute; } #socialicon { float:right; width:230px; padding:5px 0; } #socialicon ul,#socialicon li { padding:0; margin:0; list-style:none; } #socialicon li { float:left; margin:0 2px; } #socialicon a { display:block; text-indent:-9999px; width:24px; height:24px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6KTdWp9r77v9ePfBx_jFeAxvKmWPzYYgrWuLcAiM8jA-J5xBIwO-LTrdMM7KSa9ldo_AVExQy95MmBAwExzovYI2C8b20Yna9Oc-4Bi_CRINo9KgAxJvz0t9WKYUBPlBXzvUtC2553M/s1600/soicon.png); background-position:-1px 0; background-repeat:no-repeat; position:relative; } #socialicon a:active { top:1px; } #socialicon .fbx { background-position:-1px 0; } #socialicon .twix { background-position:-27px 0; } #socialicon .goex { background-position:-53px 0; } #socialicon .linx { background-position:-131px; } #socialicon .pinx { background-position:-79px 0; } #socialicon .drix { background-position:-157px; } #socialicon .vmex { background-position:-183px 0; } #socialicon .rssx { background-position:-105px; }

4. Jika sudah, Cari Kode </head> dan Copy kode dibawah ini tepat diatas kode </head>

<script src="https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline1.js">

<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline2.js'/>

</script>

5. Langkah Terakhir,  Cari Kode <div id='header'>
Atau <div id='header-wrapper'> Atau <div id='header-outer'>
Jika sudah Letakkan Kode dibawah ini diatas kode tersebut

<div id='headlinenews'>

    <span class='titlenews'>Latest Post</span>

  <div id='news'>

 <script type='text/javascript'>

 var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)

 cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://www.allgames-entals.blogspot.com/feeds/posts/default&quot;)

 cssfeed.displayoptions(&quot;date&quot;)

 cssfeed.setentrycontainer(&quot;span&quot;)

 cssfeed.filterfeed(10, &quot;date&quot;)

 cssfeed.entries_per_page(1)

 cssfeed.init()

 </script>

   </div>

<div id='socialicon'>

        <ul>

          <li><a class='fbx' href=http://www.facebook.com/seocips' title='Facebook'>facebook</a></li>

          <li><a class='twix' href='http://www.seocips.com' title='Twitter'>twitter</a></li>

          <li><a class='goex' href='http://www.seocips.com' title='Google+'>Google+</a></li>

          <li><a class='linx' href='http://www.seocips.com' title='Linkedin'>Linkedin</a></li>

          <li><a class='pinx' href='http://www.seocips.com' title='Pinterest'>Pinterest</a></li>

          <li><a class='drix' href='http://www.seocips.com' title='Dribble'>Dribble</a></li>

          <li><a class='vmex' href='http://www.seocips.com/2014/07/cara-membuat-headline-breaking-news.html' title='Vimeo'>Vimeo</a></li>

          <li><a class='rssx' href='http://feeds.feedburner.com/Seocips' title='RSS'>RSS</a></li>

        </ul>

      </div>

   </div>

          <div class='clear'/>

Keterangan: Ganti Kode yang berwarna merah menjadi url blog kamu

Cara Memasang Headline Breaking News 2

1. Masuk ke blogger sobat Klik disini

2. Masuk ke Tata Letak >> Tambahkan Gadget 

3. Pilih HTML/Javascript

4. Masukkan Kode Dibawah ini

<style type='text/css' scoped="scoped">

#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }

.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }

#ltsposts { float: left; margin-left: 120px; }

#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}

#ltsposts li a { background: none !important; color:#333 !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/AVvXsEgrmBtu_iTkOa6QQ8wxw0P1F-g6r9AUrLgvgOfn340xu0lWhnl6IOa7nUrPh04bhA1EP5gdrxA0ToCpK5ZenpX5vbM9OqfLlxT57eX8PXe5vgsDxLUwlQ_dzNSCGnZV5bZhYWVhyrI2yesO/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'>Latest Post</span>

<div id='ltsposts'>Loading...</div>

<ul class='shsocial'>

<li class='fb'>

<a href='http://www.facebook.com/seocips' rel='nofollow' target='_blank' title='facebook'>

</a></li>

<li class='gp'>

<a href='https://plus.google.com/100265901462951809989' rel='nofollow' target='_blank' title='googleplus'>

</a></li>

<li class='tw'>

<a href='http://twitter.com/seocips' rel='nofollow' target='_blank' title='twitter'>

</a></li>

<li class='rs'>

<a href='http://feeds.feedburner.com/Seocips' rel='nofollow' target='_blank' title='rss'>

</a></li>

</ul>

</div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://allgames-entals.blogspot.com', // Replace With your Blog Url

numpostx     = 20; // Maximum Post

$.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 () }, 5000);

        } else {

            $('#ltsposts').html('<span>No result!</span>');

        }

    },

    error: function() {

            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');

       }

});

});

//]]>

</script>

 

Keterangan: Ganti kode yang berwana biru menjadi url blog sobat

Sekian tutorial dari saya, Jika perlu silahkan anda berlangganan lewat email dibawah,, dan jangan lupa share postingan ini (Usahakan Disertakan Sumber) 

 Achlesy Man adalah seseorang yang hobby nge post & Gonta Ganti Platform Blogger Karena Senangnya, Dia sampai Lupa Waktu