Cara Memasang Newsticker Atau Breaking News di Blog Dengan Tampilan Keren

adscblog

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

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&amp;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

Note : Silahkan anda Ganti kan Yang berwarna Merah Dengan nama Blog SObat

•  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(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </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.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 28 April and have 0 komentar