Cara Membuat Headline News Keren Pada Blog Anda
Cara Membuat Headline News
Hallo guys kali ini kami akan membagikan kepada anda semua khususnya bagi para blogger.Nah kai akan membahas tentang cara membuat Headline News yang keren pada blog anda.Sebelumnnya bila anda belum tahu apa itu Headline News.Headline News adalah suatu widget yang kita dapat buat dengan kode css, dan java script.Kegunaannya buat apa? Kegunaan khususnya blog berita untuk menampilkan dan mengasih tahu bahwa di blog anda ada artikel yang baru di update.Nah ya udah bisa kita lihat gambar diatas.Bila berminat silahkan langsung deh ikuti cara kami ya.
Langkah-langkah :
Tulisan warna biru ganti dengan lebar blog anda.
Ganti http://duniaacara.com dengan URL alamat blog anda.
Tulisan DuniaAcara ganti dengan ID masing-masing.
4.Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.
~Silahkan Dicoba bila ada keasalahan silahkan hubungi kami.
- Login pada akun blogger.
- Masuk ke Tata Letak blog dan tambahkan widget.
- Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript.
-
<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; 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/AVvXsEhORta31clmEP5NzQCRU3gowroYFssA2krxoZ1nPIlAKUrEzHuVWBGJvVR8TM55hecbUhn9tH9yfOTz7uKsXk8_maBPUg25RBXfkeLKvBPot3g5EoceH_KdcDigHl42j0uo5MCEJdKRZGtL/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;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>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/DuniaAcara' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/104093787575230359634' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/DuniaAcara' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/DuniaAcara' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mas-andes.blogspot.com', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.ajax({
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#ltsposts').html(skeleton);
function tick(){
$('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#ltsposts').html('<span>No result!</span>');
}
},
error: function() {
$('#ltsposts').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
Tulisan warna biru ganti dengan lebar blog anda.
Ganti http://duniaacara.com dengan URL alamat blog anda.
Tulisan DuniaAcara ganti dengan ID masing-masing.
4.Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.
~Silahkan Dicoba bila ada keasalahan silahkan hubungi kami.
Tambahkan Komentar
EmoticonEmoticon