Cara Memasang Headline Breaking News di Blogspot Blogger

pada kesempatan ini saya akan membagikan tentang bagaimana cara memasang Headline breaking news di blog template blogger. Headline breaking news ini biasanya atau lebih sering kita temui di pasang di bagian atas atau header suatu blog, sebenarnya ini sudah pernah saya bagikan, tapi karena masih banyak yang bingung cara pemasangnya, maka saya tulis kembali disini untuk mempermudahnya.

Headline News ini berfungsi untuk menampilkan beberapa berita atau konten pada Blog dalam satu baris dan bergantian. Biasanya yang di tampilkan adalah artikel terbaru dari blog tersebut. Mungkin kamu pernah melihat atau bahkan sudah tidak asing lagi dengan Headline News ini, berikut saya bagikan tutorialnya.

Cara Membuat Headline Breaking News di Blog Blogger

Cara membuat dan memasang headline breaking News di blog, disini saya mempunya dua model yang berbeda. Sialhkan pilih aja yang mana yang sesuai dengan template yang kamu gunakan.

• Masuk ke menu Template >> Edit Html
• Selanjutnya, letakkan kode CSS dibawah ini tepat diatas kode ]]></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/AVvXsEgJAzTlPXWXTfiwS5tb7YDj44Jl3IkaMevDRyUpc0s1YFUoLdqOAEYxu17XRdTHY99J7ipkLlcHC0A_f_vOA103CjUkSzRRwxGWzpSRXc9NHqUTgVP28WPI8Zrll7UKJW3W9mbzFnnhyxY/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; }

• Selanjutnya, letakan kode berikut diatas kode </head>.

<script src='https://cdn.staticaly.com/gh/ariesvenus/blogcozone/c1b1a0d8/headline1.js'/>
<script src='https://cdn.staticaly.com/gh/ariesvenus/blogcozone/6cf6a804/headline2.js'/>

• Letakan kode dibawah ini diatas kode <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>.

<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.blogcozone.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/blogcozone' title='Facebook'>facebook</a></li>
<li><a class='twix' href='http://www.twitter.com' title='Twitter'>twitter</a></li>
<li><a class='goex' href='http://www.blogcozone.com' title='Google+'>Google+</a></li>
<li><a class='linx' href='http://www.blogcozone.com' title='Linkedin'>Linkedin</a></li>
<li><a class='pinx' href='http://www.blogcozone.com' title='Pinterest'>Pinterest</a></li>
<li><a class='drix' href='http://www.blogcozone.com' title='Dribble'>Dribble</a></li>
<li><a class='vmex' href='http://www.blogcozone.com/2017/12/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'/>

Catatan:
Ganti link www.blogcozone.com dengan link blog kamu.

• Simpan template dan lihat hasilnya.