Cara Membuat Headline Breaking News Di Header Blog
ELANGEE - Cara Membuat Headline Breaking News Di Header Blog. Headline News di blog ini berfungsi untuk menampilkan beberapa berita atau konten pada blog kalian dalam satu baris dan bergantian dan biasanya yang di tampilakan adalah artikel terbaru dari blog tersebut. Mungkin kalian pernah melihat atau bahkan sudah tidak asing lagi dengan Headline News ini, umumnya breaking news ini dipasang di bagian header blog. Ok.. langsung saja saya akan menjelaskan cara membuatnya.
Langkah-langkah :
Ok..begitulah Caranya Membuat Headline Breaking News di Header Blog. Sekian dan selamat mencoba :) Baca juga : Cara Merakit Personal Komputer.
Hasilnya akan seperti ini
#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/AVvXsEiRyBmQFWXHE9RyO7KQGPfZ3WSiyc7EsIkE2t720058LThFo-nXxxMjafe07sDQ-awS1muJmW7UjNLumtyXbJNzFNxN4W2ZYCJ_I7HNMnnjKy0NM4sN2RweyiYMoDv_I0gFt95dN1UKOak/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'/>
<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.elangee.net/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='LINK KAMU' title='Facebook'>facebook</a></li> <li><a class='twix' href='LINK KAMU' title='Twitter'>twitter</a></li> <li><a class='goex' href='LINK KAMU' title='Google+'>Google+</a></li> <li><a class='linx' href='LINK KAMU' title='Linkedin'>Linkedin</a></li> <li><a class='pinx' href='LINK KAMU' title='Pinterest'>Pinterest</a></li> <li><a class='drix' href='LINK KAMU' title='Dribble'>Dribble</a></li> <li><a class='vmex' href='LINK KAMU' title='Vimeo'>Vimeo</a></li> <li><a class='rssx' href='LINK KAMU' title='RSS'>RSS</a></li> </ul> </div> </div> <div class='clear'/>
EmoticonEmoticon