Cara Membuat Widget Feed News / Breaking News di Blog. widget breaking news atau feed news ini adalah sebuah widget berita artikel atau halaman judul artikel berjalan, widget ini berfungsi menunjukan sebuah judul artikel bergulir dan muncul secara acak, mungkin kelebihannya, pembaca bisa melihat link artikel dari halaman breaking news ini dan keuntungannya bisa melihat lebih banyak artikel yang di sediakan halama widget feed atau widget breaking news ini.
Untuk widget feed news yang akan kita buat, tampilannya seperti gambar diatas atau di tombol demo untuk melihat langsung, menurut saya, selain memberikan saran artikel lainnya, tampilan widget breaking news ini juga sangat keren, jadi sobat patut mencobanya, oke mari kita mulai saja tutorialnya, bagi yang ingin memasang halaman feed tersebut.
Cara Membuat Widget Breaking News / Feed News di Blog
1. Buka akun blogger anda
2. Pilih menu template>>klik edit HTML
3. Sekarang letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* NAVIGATION MENU */
.top-menu {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 0 28px;
background-color: #4B4C4D;
}
.top-menu1 {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
#beakingnews {
background: #4B4C4D;
float: left;
height: 30px;
line-height: 31px;
overflow: hidden;
margin-top: 5px;
width: 80%;
}
.social-icons{float:left;}
.social-icons{margin:9px 0 0 10px;text-align:center;}
.social-icons a{display:inline-block;position:relative;overflow:hidden;line-height:0px;margin:1px;}.social-icons a i{width:24px;height:24px;line-height:24px;font-size:13px;}.social-icons.icon-32 a i{width:32px;height:32px;line-height:32px;font-size:18px;}.social-icons.icon-12 a i{width:18px;height:18px;line-height:18px;font-size:9px;}.social-icons.icon-12 a i.icon-home{padding:0;height:18px;font-size:15px;font-weight:normal;}
.social-icons a i{color:#FFF!important;display:inline-block;text-align:center;overflow:hidden;border-radius:100%;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}.social-icons a i.icon-home{background:#4e5462;}.social-icons a i.fa-facebook{background:#507cbe;}.social-icons a i.fa-twitter{background:#65cdef;}.social-icons a i.social_icon-rss{background:#fbab5d;}.social-icons a i.fa-google{background:#ee8180;}.social-icons a i.fa fa-pinterest{background:#f16361;}.social-icons a i.social_icon-myspace{background:#2e9fdf;}.social-icons a i.fa fa-dribbble{background:#d97aa5;}.social-icons a i.social_icon-linkedin{background:#91c9db;}.social-icons a i.fa fa-evernote{background:#8ac979;}.social-icons a i.social_icon-flickr{background:#db97be;}.social-icons a i.fa fa-youtube{background:#f16361;}.social-icons a i.social_icon-skype{background:#38c3f2;}.social-icons a i.fa fa-digg{background:#4ea1d9;}.social-icons a i.social_icon-reddit{background:#7fc1d7;}.social-icons a i.fa fa-delicious{background:#5a91de;}.social-icons a i.fa-stumbleupon{background:#e36644;}.social-icons a i.fa fa-tumblr{background:#4e7da2;}.social-icons a i.fa-vimeo-square{background:#87d3e0;}.social-icons a i.fa fa-blogger{background:#fbc95d;}.social-icons a i.fa fa-wordpress{background:#dddcdc;}.social-icons a i.fa fa-yelp{background:#c64947;}.social-icons a i.social_icon-lastfm{background:#c35252;}.social-icons a i.social_icon-grooveshark{background:#2ab8ed;}.social-icons a i.social_icon-xing{background:#639d71;}.social-icons a i.social_icon-posterous{background:#e7c16f;}.social-icons a i.social_icon-deviantart{background:#95a595;}.social-icons a i.social_icon-openid{background:#fb915d;}.social-icons a i.social_icon-behance{background:#18ace3;}.social-icons a i.social_icon-instagram{background:#c8c5b3;}.social-icons a i.social_icon-paypal{background:#4ea1d9;}.social-icons a i.social_icon-spotify{background:#6fcb57;}.social-icons a i.social_icon-viadeo{background:#9ec7d5;}.social-icons a i.social_icon-googleplay{background:#ce5452;}.social-icons a i.social_icon-forrst{background:#64bb8d;}.social-icons a i.social_icon-vk{background:#568bb0;}.social-icons a i.social_icon-appstore{background:#cdcccb;}.social-icons a i.social_icon-amazon{background:#f0b22e;}.social-icons a i.fa-soundcloud{background:#f35839;}.social-icons a i:hover{background:#434347;}
a.tooldown{display:inline-block;}.tipsy{font-size:12px;position:absolute;padding:5px;z-index:100000;}.tipsy-inner{background-color:#232323;color:#FFF;max-width:200px;padding:0px 8px;text-align:center;border-radius:3px;}.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #232323;}.tipsy-arrow-n{border-bottom-color:#232323;}.tipsy-arrow-s{border-top-color:#232323;}.tipsy-arrow-e{border-left-color:#232323;}.tipsy-arrow-w{border-right-color:#232323;}.tipsy-n .tipsy-arrow{top:0px;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;cursor:help;}
div.conty {
width: 960px;
margin: 0 auto;
}
#beakingnews {
background: #4B4C4D;
float: left;
height: 30px;
line-height: 31px;
overflow: hidden;
margin-top: 5px;
width: 80%;
}
#recentpostbreaking li a {
color:#fff;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 32px;
}
#recentpostbreaking li a:hover {
color:$(maincolor);
}
#beakingnews .tulisbreaking {
background:#f8674a;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #f8674a;
border-radius: 3px;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
}
#recentpostbreaking {
float: left;
margin-left: 98px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#social-counter-widget{padding:0px!important;margin-bottom:20px!important;overflow:hidden;clear:both;display:block;position:relative;}#social-counter-widget ul.social-counter-widget{}#social-counter-widget ul.social-counter-widget,#social-counter-widget ul.social-counter-widget li{list-style:none!important;margin:0!important;padding:0!important;}#social-counter-widget ul.social-counter-widget li{display:inline-block;}#social-counter-widget ul.social-counter-widget li a{display:block;overflow:hidden;color:#282a2b;}#social-counter-widget ul.social-counter-widget li a i{margin:0 0 10px 0;}#social-counter-widget ul.social-counter-widget li a span{font-size:16px!important;font-family:inherit;line-height:22px!important;font-weight:normal!important;}#social-counter-widget ul.social-counter-widget li a small{color:#c1c1c1;}#social-counter-widget.style1-SC{background-color:#f9f9f9;border:1px #f0f0f0 solid;border-radius:3px;padding:10px 0px!important;}#social-counter-widget.style1-SC li{display:block;width:33%;overflow:hidden;float:left;}#social-counter-widget.style1-SC li a{display:inline-block;text-align:center;padding:10px 0px;overflow:hidden;}#social-counter-widget.style1-SC li a i,#social-counter-widget.style1-SC li a span,#social-counter-widget.style1-SC li a small{clear:both;display:block;}#social-counter-widget.style1-SC ul.social-counter-widget li a i{color:#FFF!important;display:inline-block!important;width:50px!important;height:50px!important;line-height:50px!important;vertical-align:middle;text-align:center;font-size:28px;overflow:hidden;border-radius:100px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style1-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style1-SC ul.social-counter-widget li a:hover i.icon{background:#232323!important;}#social-counter-widget.style2-SC{padding:0;}#social-counter-widget.style2-SC ul.social-counter-widget li{display:block;width:100%;overflow:hidden;margin:0 0 3px 0!important;border-radius:2px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style2-SC li a{display:block;text-align:left;padding:5px;overflow:hidden;}#social-counter-widget.style2-SC ul.social-counter-widget li a i.icon,#social-counter-widget.style2-SC ul.social-counter-widget li a span,#social-counter-widget.style2-SC ul.social-counter-widget li a small{float:left;line-height:35px!important;}#social-counter-widget.style2-SC ul.social-counter-widget li a i.icon{font-size:18px;color:#FFF;margin:0 0 0 0!important;display:inline-block!important;width:35px!important;height:35px!important;text-align:center;font-size:17px;line-height:35px!important;font-weight:normal!important;overflow:hidden;border-radius:100px;}#social-counter-widget.style2-SC ul.social-counter-widget li a span{color:#FFF;padding:0 15px}#social-counter-widget.style2-SC ul.social-counter-widget li a small{color:#FFF;color:rgba(255,255,255,0.7);}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-rss{background:#faa33d;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-twitter{background:#40bff5;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-facebook{background:#5d82d1;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-gplus{background:#eb5e4c;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-youtube{background:#ef4e41;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-vimo{background:#35c6ea;}#social-counter-widget.style2-SC ul.social-counter-widget li.social-counter-soundcloud{background:#ff7e30;}#social-counter-widget.style2-SC ul.social-counter-widget li:hover{background:#232323!important;}#social-counter-widget.style2-SC ul.social-counter-widget li:hover a small{color:#FFF!important;}#social-counter-widget.style3-SC{background-color:#FFF;border-radius:3px;padding:10px 0px!important;}#social-counter-widget.style3-SC ul.social-counter-widget li a span{font-size:13px!important;}#social-counter-widget.style3-SC li{display:block;width:24%;overflow:hidden;float:left;}#social-counter-widget.style3-SC li a{display:inline-block;text-align:center;padding:10px 0px;}#social-counter-widget.style3-SC li a i,#social-counter-widget.style3-SC li a span,#social-counter-widget.style3-SC li a small{clear:both;display:block;}#social-counter-widget.style3-SC ul.social-counter-widget li a i{color:#FFF!important;display:inline-block!important;width:35px!important;height:35px!important;text-align:center;font-size:17px;line-height:35px!important;overflow:hidden;border-radius:100px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style3-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style3-SC ul.social-counter-widget li a:hover i.icon{background:#232323!important;}#social-counter-widget.style4-SC{padding:0;}#social-counter-widget.style4-SC ul.social-counter-widget li{display:block;clear:both;overflow:hidden;margin:1px 1px 5px 1px!important;border-radius:2px;background-color:#FFF;box-shadow:0 0 1px rgba(0,0,0,0.25);border:0 none!important;}#social-counter-widget.style4-SC ul.social-counter-widget li:last-child{}#social-counter-widget.style4-SC li a{display:block;text-align:left;padding:5px;overflow:hidden;color:#999!important;}#social-counter-widget.style4-SC ul.social-counter-widget li a span{font-size:14px!important;font-family:sans-serif;}#social-counter-widget.style4-SC ul.social-counter-widget li a i.icon,#social-counter-widget.style4-SC ul.social-counter-widget li a span,#social-counter-widget.style4-SC ul.social-counter-widget li a small{float:left;line-height:30px!important;}#social-counter-widget.style4-SC ul.social-counter-widget li a i.icon{color:#FFF;margin:0px!important;display:inline-block!important;width:30px!important;height:30px!important;text-align:center;font-size:17px;line-height:30px!important;overflow:hidden;border-radius:2px;-webkit-transition:all ease-in-out 0.2s;-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}#social-counter-widget.style4-SC ul.social-counter-widget li a span{padding:0 4px 0 15px}.rtl #social-counter-widget.style4-SC ul.social-counter-widget li a span{padding:0 15px 0 4px}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-rss a i.icon.social_icon-rss{background:#faa33d;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-twitter a i.icon.social_icon-twitter{background:#40bff5;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-facebook a i.icon.social_icon-facebook{background:#5d82d1;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-gplus a i.icon.social_icon-google{background:#eb5e4c;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-youtube a i.icon.social_icon-youtube{background:#ef4e41;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-vimo a i.icon.social_icon-vimeo{background:#35c6ea;}#social-counter-widget.style4-SC ul.social-counter-widget li.social-counter-soundcloud a i.icon.social_icon-soundcloud{background:#ff7e30;}#social-counter-widget.style4-SC ul.social-counter-widget li a:hover i.icon{background:#999!important;}
4. Selanjutnya letakan kode dibawah ini tepat dibawah kode <div id='outer-wrapper'> atau sesuaikan menurut selera anda. kode bisa saja berbeda.
<div id='top-nav'>
<nav class='top-menu'>
<div id='beakingnews'>
<span class='tulisbreaking'>
Feed News
</span>
<div id='recentpostbreaking'>
Loading...
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://oktavialie.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>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
<ul class='social-icons'>
<a class='tooldown' href='#' target='_blank' title='Facebook'>
<i class='fa fa-facebook'/>
</a>
<a class='tooldown' href='#' target='_blank' title='Twitter'>
<i class='fa fa-twitter'/>
</a>
<a class='tooldown' href='#' target='_blank' title='Google+'>
<i class='fa fa-google'/>
</a>
<a class='tooldown' href='#' target='_blank' title='Vimeo'>
<i class='fa fa-vimeo-square'/>
</a>
<a class='tooldown' href='#' target='_blank' title='soundcloud'>
<i class='fa fa-soundcloud'/>
</a>
</ul>
<!-- social media button end -->
</nav>
</div>
<div class='clear'/>
5. Silahkan ganti URL yang saya tandai merah dengan url blog sobat dan klik save.
nah, sampai disini untuk tutorial Cara Membuat Widget Breaking News / Feed News di Blog , lebih dan kurangnya saya mohon maaf.
