Headline Breaking News di Blog

Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk Cara Membuat Headline Breaking News di Blog.

Demo bisa di lihat di atas header blog saya (Jika belum di lepas) jika sobat tertarik untuk menggunakan ikuti langkah berikut ini.

• Pergi ke Blogger.com
• Edit Template
• Copy semua CSS dan JS di bawah ini dan letakan di atas </head>

<style type='text/css'>
#headlinenews {
    position: relative;
    background: #f1c40f;
    border-bottom: 5px solid #34495e;
    border-top: 5px solid #34495e;
    display: block;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    margin: 0 auto 20px;
    padding: 5px 30px;
    width: 980px;
}
#news {
    float: left;
    margin-left: 120px;
}
#news a {
    background: none !important;
    color: #fff !important;
    font: bold 12px/22px Tahoma;
    text-decoration: none;
}
.titlenews {
    background: #34495e;
    color: #fff;
    display: block;
    float: left;
    font: bold 12px/22px Tahoma;
    padding: 9px;
    margin-top: -10px;
    position: absolute;
}
ul.shsocial {
    background#34495e;
    float: right;
    margin: -8px 0;
}
ul.shsocial li {
    float: left;
    list-style: none outside none;
    border: none;
}
ul.shsocial li a {
    background-color: transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg019nKTdF36YPGtKGvLLKPS4V69WU4u788HzsT9beRXDMjG6tU_V1yBeYdt_eEYi_j1QKqOkp2RjhbIrexYufIiGkd0of9wmTkw91KTY_onMevGb_ApSbvtDNF-TfScJQipyt3ksgVzoiU/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:34px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
    ul.shsocial li.fb a {
        background-position: 0 0
    }
    ul.shsocial li.gp a {
        background-position: -96px 0
    }
    ul.shsocial li.rs a {
        background-position: -192px 0
    }
    ul.shsocial li.tw a {
        background-position: -256px 0
    }
    ul.shsocial li.fb a:hover {
        background-position: 0 -32px
    }
    ul.shsocial li.gp a:hover {
        background-position: -96px -32px
    }
    ul.shsocial li.rs a:hover {
        background-position: -192px -32px
    }
    ul.shsocial li.tw a:hover {
        background-position: -256px -32px
    }
</style>
<script src='http://google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script src='http://yourjavascript.com/1851142251/headline-news.js' type='text/javascript'></script>

• Kemudian cari kode <div id='wrapper'> Gunakan CTRL + F
• Copy semua HTML dan JS di bawah ini dan letakan tepat di bawahnya

<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", "<data:blog.homepageurl/>feeds/posts/default")
 cssfeed.displayoptions("date")
 cssfeed.setentrycontainer("span")
 cssfeed.filterfeed(10, "date")
 cssfeed.entries_per_page(1)
 cssfeed.init()
 </script>
   </div>
<ul class='shsocial'>
  <li class='fb'>
   <a href='http://www.facebook.com/USERNAME' target='_blank' title='facebook'>
</a></li>
  <li class='gp'>
   <a href='https://plus.google.com/USERNAME' target='_blank' title='googleplus'>
</a></li>
  <li class='tw'>
   <a href='http://twitter.com/USERNAME' target='_blank' title='twitter'>
</a></li>
  <li class='rs'>
   <a href='http://feeds.feedburner.com/USERNAME' target='_blank' title='rss'>
</a></li>
</ul>
   </div>

Keterangan : Ganti USERNAME dengan ID masing-masing.
Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.

Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog sobat. Atau bisa menyesuaikan dengan menggunakan CSS.

Oke done! Dan lihat blogger sobat, Headline Breaking News di Blog sobat sudah terpasang. Sekian dulu ya sobat, Jika ada kesalahan atau saran... Silahkan berkomentar dibawah artikel ini..

Share on Facebook

Share on Twitter

Share on Google+