Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Minggu, 11 Desember 2016

Cara Membuat Headline Breaking News dengan Tombol Sosial


Membuat 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

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>
Semoga bermanfaat.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi