Pengertian Web Design 9: 10 Cara edit tampilan website agar terlihat lebih keren part 7

February 20, 2017
No Comments
Cara memasang headline breaking news di blog – Oke, halo semuanya, pada kesempatan kali ini ShortcutID akan memberikan anda tutorial untuk memasang headline breaking newws di blog atau website milik anda.

Nah, disini saya sudah menyediakan tipe headline breaking news terbaik yang pastinya sangat pas jika dipasang di blog milik anda. Langsung saja simak cara memasang headline breaking news berikut ini.

1. Login kedalam akun Blogspot anda
2. Masuk kehalaman Template
3. Lalu klik Edit HTML
4. Copy kode CSS berikut ini 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(http://3.bp.blogspot.com/-7N7Yc9pfpq4/UZWTCyT3cLI/AAAAAAAAARk/v8jfsiRfs9c/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; }

5. Selanjutnya copy kembali kode berikut dan letakkan 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'/>

6. Setelah itu copy kembali kode berikut 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://linkbloganda/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'/>

Cukup mudah bukan?.

Tags: , , , , , , , ,