Hallo Sobat Blogger Sidobey Kali ini saya akan berbagi trik Cara Memasang atau membuat Widget NewSticker,Mungkin anda ada yang masih penasaran apa Pungsi dari Newsticker Tersebut?
Fungsi dari Newsticker adalah menampilkan beberapa Postingan Blog secara slideng atau bergantian seperti hal nya Headline News
Newsticker ini hampir sama dengan Widget Recent Post hanya saja Newsticker Menampilkan Judul Nya saja secara bergantian di bagian widget yang telah di tentukan Posisi nya,Biasa nya Kebanyakan Blogger menyimpan Newsticker ini berada di bagian atas Postingan Blog,sehingga tampilan nya terlihat Jelas Oleh para pengujung dan Mudah Untuk di klik nya
Selain itu Juga Newsticker ini tampil secara bergantian sesuai dengan Label yang telah di tentukan ataupun sesuai dengan Postingan yang terbaru yang anda buat di blog anda tersebut,maka dengan ada nya widget Newsticker tersebut maka blog sobat akan terlihat Profesional di mata Pengunjung
Pemasangan Newsticker di blog juga tidak mengakibatkan Loading Blog anda terpengaruhi walaupun kode yang di tanam sedikit banyak,maka Jika anda tertarik dengan Newsticker ini apa salah nya jika sobat blogger mencoba nya memasang di blog sobat
Newsticker ini hampir sama dengan Widget Recent Post hanya saja Newsticker Menampilkan Judul Nya saja secara bergantian di bagian widget yang telah di tentukan Posisi nya,Biasa nya Kebanyakan Blogger menyimpan Newsticker ini berada di bagian atas Postingan Blog,sehingga tampilan nya terlihat Jelas Oleh para pengujung dan Mudah Untuk di klik nya
Selain itu Juga Newsticker ini tampil secara bergantian sesuai dengan Label yang telah di tentukan ataupun sesuai dengan Postingan yang terbaru yang anda buat di blog anda tersebut,maka dengan ada nya widget Newsticker tersebut maka blog sobat akan terlihat Profesional di mata Pengunjung
Pemasangan Newsticker di blog juga tidak mengakibatkan Loading Blog anda terpengaruhi walaupun kode yang di tanam sedikit banyak,maka Jika anda tertarik dengan Newsticker ini apa salah nya jika sobat blogger mencoba nya memasang di blog sobat
Cara Memasang NewSticker di WIdget Blog
Dan Untuk Pemasangan Newsticker tersebut bisa anda ikuti langkah-langkah nya di bawah ini- Masuk ke akun Blogger anda
- Kemudian Pilih Thema atau template
- Kemudian klik Edit Html
- Setelah berada di bagian Edit HTML silahkan letakan kode berikut sebelum kode </head>
<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>
- Langkah selanjut nya silahkan letakan kode berikut sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.gblog.id/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
- Kemudian Save Template dan lihat hasil nya
- Langkah Selanjut nya letakan kode berikut dimana saja anda suka selama berada di bagian antara <body> dan </body>
<div id='breakingwrapper'>
<div id='breakingnews'>
<span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
<div id='recentbreaking'>Loading...</div>
<div class='blog-date'>
<script language='Javascript'>
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
</script>
</div>
</div>
</div>
<div class='clear'/>
Nah itulah cara membuat Newsticker atau Breaking News di Blog,semoga artikel ini bisa membantu sobat blogger semua,slamat mencoba aja.
ads1
Previous
Posting Lebih BaruNext
Posting Lama
Posted by 28 April and have
0
komentar
, Published at
* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi