Demo
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(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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/andestyle' 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/rizkyandes' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rs'> <a href='http://feeds.feedburner.com/masandes' 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://mas-andes.blogspot.com dengan URL alamat blog anda.
Tulisan yang berwarna merah 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.
0 komentar:
Posting Komentar