"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.
#Cara Membuat Headline News (Update) Postingan Bergerak di Blog :
#1. Login ke blog
#2. Masuk dasboard pilih template dan klik edit HTML
#3. 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%;}#4. Letakkan script ini di atas </head>, sumber seocips
#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/AVvXsEj78SGixc4G5m0ldJhRSdlsrhHbkpAJSVVWbu1AxL7IM6gCHKbb2tkpBCyOvQwbbziUwvvsjNODjagTwpzb_S1Ar-WOwnEjqY_Q7y58tKVDXWjaCzcfRvXixoaH5lCrLF3-cb33uI-liQ8/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; }
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline1.js'/>
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline2.js'/>
#5. 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("example1", "example1class", 5000, "_new")
cssfeed.addFeed("Feed Blog", "http://www.mas-fatkhun.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("span")
cssfeed.filterfeed(10, "date")
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'/>
#6. 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. Tutorial lainnya bisa dibaca disini.
Terima Kasih
0 komentar
Posting Komentar