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 karena sudah banyak di share, tapi mungkin saja kamu tertarik mengambilnya dari blog ini.

Headline news atau lebih dikenal dengan breaking news ini biasanya dipasang diatas header blog atau juga dibawah navigasi menu. Headline breaking news pada demonya (dibawah) saya meletakannya diatas header blog diikuti dengan tombol sosial widget disampingnya, tombol sosial widget ini kamu dapat mengisinya sesuai dengan link sosial milik kamu.

Widget breaking news berikut ini menampilkan artikel terbaru dari blog kamu.  Kode ini sebenarnya sudah dibagikan dari tahun2 kemarin, tapi sepat tidak work atau tidak bekerja karena script yang dihapus dari Google code, tapi tenang saja karena sekarang sudah di perbaiki dan script telah di pindahkan ke penyimpanan yang baru.
Cara Membuat Headline Breaking News dengan Tombol Sosial


Cara Membuat Headline Breaking News dengan Tombol Sosial

Untuk menerapakannya kamua dapat meletakan CSS di atas kode ]]></b:skin> atau </style>, Script kamu dapat meletakannya diatas </head>, dan HTML dapat kamu letakan di widget html atau langsung kedalam template , kalau di Demo saya, saya meletakannya di atas <div class='headerpic-wrapper'> atau juga sobat dapat meletakannya dibawah navigasi menu, tapi itu semua tergantung template yang digunakan, bisa saja kodenya berbeda di blog sobat.

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://www.seocips.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>

Script Breaking News

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

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