Halaman

    Social Items

Cara Memasang Widget Breaking News Keren Pada Blog

Cara Memasang Widget Breaking News Keren Pada Blog - ini sangat mudah, dan memiliki banyak manfaat. Salah satu manfaat memasang widget ini adalah dapat menarik perhatian pengunjung.

Pengunjung lebih mudah melirik ke arah breaking news ini, karena bisa menjadi pusat perhatian juga. Nah sebelumnya saya juga sudah memberikan tutorial breaking news pada blog.
baca juga : Tutorial membuat widget breaking news

Cara yang sebelumnya saya dapatkan dari Arlina Design, tapi kalau yang ini saya dapatkan dari bloggersstand yang tampilan CSS nya sudah saya modif.


Cara Memasang Widget Breaking News Keren Pada Blog


1. Login Blogger - TEMA - Edit HTML - Cari kode ]]></b:skin> atau kode </style> - salin kode di bawah ini dan letakan di atas salah satu kode tersebut.

/* Breaking News Widget By www.onbloging.com */
#bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #630D5F;text-align:left;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #630D5F;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

2. Selanjutnya cari kode </body> - salin kode di bawah ini tepat di atas kode tersebut.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://onbloging.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Ganti text yang sudah saya beri tanda dengan url blog kamu.

3. Simpan

Cara Penerapannya


Silahkan add widget - pilih HTML/Javascript - Salin kode di bawah ini - klik simpan

<div id="wrapper">   
    <div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'></i></span>
<div id='breaking-bsd-news'>Loading...</div></div></div>


Demikian tutorial Cara Memasang Widget Breaking News Keren Pada Blog dari onbloging, semoga bermanfaat yah

Cara Memasang Widget Breaking News Keren Pada Blog

Cara Memasang Widget Breaking News Keren Pada Blog

Cara Memasang Widget Breaking News Keren Pada Blog - ini sangat mudah, dan memiliki banyak manfaat. Salah satu manfaat memasang widget ini adalah dapat menarik perhatian pengunjung.

Pengunjung lebih mudah melirik ke arah breaking news ini, karena bisa menjadi pusat perhatian juga. Nah sebelumnya saya juga sudah memberikan tutorial breaking news pada blog.
baca juga : Tutorial membuat widget breaking news

Cara yang sebelumnya saya dapatkan dari Arlina Design, tapi kalau yang ini saya dapatkan dari bloggersstand yang tampilan CSS nya sudah saya modif.


Cara Memasang Widget Breaking News Keren Pada Blog


1. Login Blogger - TEMA - Edit HTML - Cari kode ]]></b:skin> atau kode </style> - salin kode di bawah ini dan letakan di atas salah satu kode tersebut.

/* Breaking News Widget By www.onbloging.com */
#bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #630D5F;text-align:left;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #630D5F;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

2. Selanjutnya cari kode </body> - salin kode di bawah ini tepat di atas kode tersebut.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://onbloging.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Ganti text yang sudah saya beri tanda dengan url blog kamu.

3. Simpan

Cara Penerapannya


Silahkan add widget - pilih HTML/Javascript - Salin kode di bawah ini - klik simpan

<div id="wrapper">   
    <div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'></i></span>
<div id='breaking-bsd-news'>Loading...</div></div></div>


Demikian tutorial Cara Memasang Widget Breaking News Keren Pada Blog dari onbloging, semoga bermanfaat yah

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel