Membuat Headline Breaking News. Ok sobat seocips.com tutorial template Blogger berikut ini adalah tentang cara membuat headline Breaking News di Blog dengan widget sosial share sperti facebook twitter Google plus. Mungkin tutorial blog berikut ini sudah tidak asing lagi untuk anda.

Headline news atau lebih dikenal dengan breaking news ini biasanya dipasang diatas header blog( seperti di blog ini) atau juga dibawah navigasi menu. Headline breaking news didemonya berikut ini saya meletakan diatas header blog diikuti dengan sosial widget disampingnya dimana sosial widget ini sobat dapat mengisinya sesuai dengan link sosial media milik sobat.

widget breaking news berikut ini menampilkan artikel terbaru dari blog sobat, jadi yang akan muncul adalah beberapa artikel terbaru yang baru di update yang ada di homepage blog sobat. untuk demonya kebetulan saya memasangnya ditemplate seocips yang lainnya yang tentu saja akan kami bagikan gratis pada waktunya.

Cara Membuat Headline Breaking News dengan Tombol Sosial


Cara Membuat Headline Breaking News dengan Tombol Sosial

Berikut ini adalah beberpa kode yang dapat anda gunakan. Untuk menerapakannya anda dapat meletakan Css di atas kode ]]></b:skin> atau </style>, Script anda dapat meletakannya diatas </head>, dan HTML anda dapat meletakannya di widget html atau langsung kedalam template anda, kalau di Demo saya, saya meletakannya di atas <div class='headerpic-wrapper'> atau juga sobat dapat meletakannya dibawah navigasi menu.

CSS Breaking News

#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; }

HTML Breaking News

<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://blog.spezer.net/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>

Script Breaking News

<script src='https://seocipsheadlinenews1.googlecode.com/svn/seocipsheadline1'/>
<script src='https://seocipsheadlinenews1.googlecode.com/svn/seocipsheadlinenews2'/>

CSS SosMed

#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; }

HTML SosMed

<div id='socialicon'>
        <ul>
          <li><a class='fbx' href='#' title='Facebook'>facebook</a></li>
          <li><a class='twix' href='#' title='Twitter'>twitter</a></li>
          <li><a class='goex' href='#' title='Google+'>Google+</a></li>
          <li><a class='linx' href='#' title='Linkedin'>Linkedin</a></li>
          <li><a class='pinx' href='#' title='Pinterest'>Pinterest</a></li>
          <li><a class='drix' href='#' title='Dribble'>Dribble</a></li>
          <li><a class='vmex' href='#' title='Vimeo'>Vimeo</a></li>
          <li><a class='rssx' href='#' title='RSS'>RSS</a></li>
        </ul>
      </div>
Jika sobat ingin memasangnya seperti di DEMO tadi tinggal sobat gabungkan saja css dan html breaking news dengan sosial widget. Nah sekian tutorial blog seocips kali ini, dan jangan lupa untuk melihat artikel update terbaru lainnya. Sekian mengenai Cara Membuat Headline Breaking News dengan Tombol Sosial di blog blogger, semoga bermanfaat.
1 Komentar untuk "Cara Membuat Headline Breaking News dengan Tombol Sosial"

wah sangat bermanfaat mas, perlu di coba... oya mas, itu slider punya mas itu ga di publish ya? saya kepengen hehe