Cara Bikin Headline News (Update) Postingan Bergerak di Header Blog

Oleh Blogger Kode

Sabtu, 11 Februari 2017

Bagikan :

Tweet

"Apa itu Headline news?"

"Apa fungsinya jika dipakai di blog?"

"Bagaimana cara pasangnya?"

Biasanya ada template blog yang menampilkan last update atau update terbaru dengan tulisan yang bergerak horizontal. Mereka menyebutnya headline breaking news dan biasanya ditempatkan di atas header template blog. Headline news ini sangat penting juga menurut saya karena pengunjung setia sobat bisa melihat apa saja artikel yang baru di launching.

Headline news ini berfungsi untuk menampilkan artikel terupdate bergerak horizontal dan bergantian dari artikel satu dengan yang lain. Mungkin beberapa blogger tidak tahu cara pasangnya, kali ini saya akan membagikan informasi seputar hal tersebut.

#Cara Membuat Headline News (Update) Postingan Bergerak di Blog :

• Login ke blog
• Masuk dasboard pilih template dan klik edit HTML

• Letakkan kode CSS di bawah ini di atas 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/AVvXsEjAPElzJgNhUYq8xUww-VVOcZhW0ZNquMkxepiATBNDiSGVn1EE712pmbwLPVF5Sc9wCI_oh6sWgbpNO0uDYSSMQDeSNgTpijUvOMzR_PPivsqyDd3q9k3VcfwNiX9PlkROFZC38ybrJ6g/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; }

• Letakkan script ini di atas </head>, sumber seocips

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

• Letakkan kode di bawah ini di atas  <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>. Ganti url warna merah dengan url sobat, dan warna orange dengan id facebook dan feed agan.

<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.mas-fatkhun.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/mfatkhun' title='Facebook'>facebook</a></li>
<li><a class='twix' href='http://www.mas-fatkhun.blogspot.com' title='Twitter'>twitter</a></li>
<li><a class='goex' href='http://www.mas-fatkhun.blogspot.com' title='Google+'>Google+</a></li>
<li><a class='linx' href='http://www.mas-fatkhun.blogspot.com' title='Linkedin'>Linkedin</a></li>
<li><a class='pinx' href='http://www.mas-fatkhun.blogspot.com' title='Pinterest'>Pinterest</a></li>
<li><a class='drix' href='http://www.mas-fatkhun.blogspot.com' title='Dribble'>Dribble</a></li>
<li><a class='rssx' href='http://feeds.feedburner.com/masfatkhun' title='RSS'>RSS</a></li>
</ul>
</div>
</div>
<div class='clear'/>

• Simpan template

Jadi dengan berbagi informasi ini diharapkan tambah banyak pengunjung diblog kalian. Headline news biasanya di header blog dan kreasikan sendiri. Jika ada pertanyaan, saran dan kritik langsung komentar aja.

Terima Kasih 

Tag : Tips Ngeblog, Tutorial Blog