Computer Software

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 :

1.  Login pada akun blogger.
2.  Masuk ke Tata Letak blog dan tambahkan widget.
3.  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/AVvXsEidxXfVOAx65rGTcZ_Frplz5rdtFgBr624_WKJ6a495z5ivBE0VbKQQY4frp0iOpV_iTnXQANTL3CMlWzz15H89mEvfy15X0AjGRo15F8On4vDJu_QNkJ4XWBDlAu_NL7KThx0Anl0e14W1/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>

Keterangan:
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.