Cara Membuat Breaking News di Blogspot
Posting berikut admin akan memberikan tips bagaimana Cara Membuat Breaking News di Blog , sebenarnya untuk membuat ini sama saja seperti menambahkan widget di menu header tata letak blogspot. Widget yang bisa agan pasang ini berbentuk horisontal seperti navigasi yang umumnya 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 Breaking News di Blog.
Untuk menggunakannya ikuti langkah berikut ini :
1. Login/masuk ke situs Blogger.com
2. Masuk ke TATA LETAK
3. Tambahkan Gadget Widget (HTML/Javascript) misal dibawah navigasi menu
4. Copy Semua Kode ini & paste ke Widget (HTML/Javascript) tersebut
2. Masuk ke TATA LETAK
3. Tambahkan Gadget Widget (HTML/Javascript) misal dibawah navigasi menu
<style type='text/css'>
#headlinenews { position:relative;background:#86000; border-bottom: 5px solid #34495e; border-top: 5px solid #34495e; display: block; height: 22px; line-height: 22px; overflow: hidden;margin:0 auto;padding: 5px;width: 920px;}
#news { float: left; margin-left: 120px; }
#news a { background: none !important; color:#000 !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/AVvXsEjKyc7wlS7JJaVahgpA7UUOgOgMoxddkM4Tl8m4ANdBFmWjapp8CphWeMHEbroPkRdI3bB9S_Z9ZpNCv2u0oxDbH4hLTnwHD6QMt8xFL1insACZeN7u4YomglAJ3rtzXIhsIRCVVuCLObUj/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>
<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", "http://idnsoftware.blogspot.com/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 title="cara membuat breaking news" href='http://www.facebook.com/USERNAME' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a title="cara membuat breaking news" href='https://plus.google.com/USERNAME' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a title="cara membuat breaking news" href='http://twitter.com/USERNAME' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a title="cara membuat breaking news" href='http://feeds.feedburner.com/USERNAME' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
Keterangan:
- Ganti warna merah http://idnsoftware.blogspot.com dengan URL alamat blog agan/i
- Ganti warna merah USERNAME ganti dengan ID sosial masing-masing.
- Untuk mengganti ukuran panjang dan lebar bisa menganti height dan width
5. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan, dan lihat blog agan/i
6. Untuk menentukan tata letak widget breaking news tersebut bisa sesuaikan dengan blog agan/i masing-masing dengan menggeser elemen tata letak atau bisa juga menyesuaikan langsung dengan menggunakan kode CSS pada halaman edit template.
7. Jika ada error mohon untuk berkomentar dibawah ya, terima kasih
Post a Comment