Membuat Breakingnews Tricker Responsive Pada Blogger

Pernah berkunjung ke situs situs dengan niche berita harian, pasti pernah lihat kan breakingnews anmiasi bergerak bergantian memperlihatkan judul artikel terbaru pada seitus tersebut, nah itu yang dinamakan dengan Breaking News Tricker. Bila anda sedang mencoba membuat niche serupa, seputar berita-berita harian yang katanya bakal ramai pengunjung jika terus diupdate, tidak ada salahnya apabila memasang breakingnews tricker agar situs tampak profesional dan menarik

HeadlineBreakingNewsTricker Membuat Breakingnews Tricker Responsive Pada Blogger

Pada dasarnya, headline breakingnews digunakan sebagai media alternatif untuk mewakili widget posting terbaru. Widget ini juga dapat menarik perhatian pengunjung untuk membaca artikel terbaru pada blog. Nah pada kesempatan kali ini saya akan membagikan cara membuat brekingnews tricker ala Minima Colored Premium karya Arlina Fitriyani. Mau lihat templatenya langsung? Silahkan dilihat, jika minat kontak saja Mbak Arlina untuk membelinya.

Membuat Breakingnews Tricker Responsive Pada Blogger

1. Login Blogger, Dashbor > Template > Edit HTML

2. Letakan kode dibawah ini tepat diatas </head> , namun jika sudah ada pada template silahkan dilewati.

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>

3. Setelah itu letakan kode dibawah ini diatas ]]></b:skin>

/* CSS Breaking News */#breakingnews {margin:15px 0 0 0;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:’Roboto Condensed’;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}#adbreakingnews li a {font-family:’Open Sans’;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}#adbreakingnews li a:hover {color:#359bed;}#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}/* CSS Homepage Responsive [email protected] only screen and (max-width:768px){.img-thumbnail {margin:0 10px 0 0;[email protected] only screen and (max-width:640px){#content-wrapper {padding:0;}h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;margin:20px 0;clear:both;padding:20px 0 0 0;}.post {padding:15px;}.post-body {margin-bottom:10px;}.post-vinfo {margin-left:0;}.img-thumbnail {width:100%;height:auto;margin:0;}.img-thumbnail img {width:100%;height:auto;}#breakingnews {margin:20px 0 0 0;margin-right:0;}#breakingnews .breakhead {padding:6.5px 14px;}#adbreakingnews {margin-left:50px;}.post .label-info {left:15px;top:15px;[email protected] only screen and (max-width:480px){h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:16px;}.post-body, .comment-info {display:none!important;visibility:hidden;width:0;height:0;}#breakingnews {display:none;}}

4. Cari kode </body> , letakan kode dibawah ini tepat diatasnya.

<script type=’text/javascript’>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e=”URL BLOG ANDA”,t=20;$.ajax({url:””+e+”/feeds/posts/default?alt=json-in-script&max-results=”+t,type:”get”,dataType:”jsonp”,success:function(e){function t(){$(“#adbreakingnews li:first”).slideUp(function(){$(this).appendTo($(“#adbreakingnews 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>”,$(“#adbreakingnews”).html(s),setInterval(function(){t()},5e3)}else $(“#adbreakingnews”).html(“<span>No result!</span>”)},error:function(){$(“#adbreakingnews”).html(“<strong>Error Loading Feed!</strong>”)}})});
//]]>
</script>

5. Nah langkah terakhir adalah meletakan Breakingnews itu sendiri, mau dimana? Diatas header, diatas postingan, diatas footer, dibawah footer, dibawah menu navigasi, atau lainnya. Nah, sekarang saya akan memberi contoh meletakannya diatas header.

6. Cari kode yang mirip seperti dibawah ini, gunakan Ctrl+F > Ketik Header untuk mencarinya.

meletakanbreakingnewsdiatasheader Membuat Breakingnews Tricker Responsive Pada Blogger

*Setelah anda temukan, letakan kode dibawah ini tepat diatasnya.

<div id=’breakingnews’><span class=’breakhead’><i class=’fa fa-rss’></i></span>
<div id=’adbreakingnews’>Loading…</div></div>

Demikian cara membuat breakingnews ala minimacolored Premium milik Mbak Arlina Fitriyani, dengan menggunakan feature ini saya harap Pageview blog anda semakin bertamah. Semoga bermanfaat

author
Author: 
    Cara Mudah Dan Cepat Mengganti Warna Template Blogger
    Cara Mudah Dan Cepat Mengganti Warna Template Blogger
    Mengganti warna template blog adalah satu hal
    Penjelasan Prinsip Dan Tujuan Desain Poster
    Penjelasan Prinsip Dan Tujuan Desain Poster
    Pada dasarnya poster adalah sarana untuk mengiklankan
    8 Jenis Desain Dan Cara Mudah Menguasainya
    8 Jenis Desain Dan Cara Mudah Menguasainya
    Desain grafis erat kaitannya dengan menggambar atau
    Feature Blog Yang Harus Dibuat Untuk Kepentingan Blog Anda
    Feature Blog Yang Harus Dibuat Untuk Kepentingan Blog Anda
    Pada dasarnya membuat sebuah blog memanglah mudah,

    Leave a reply "Membuat Breakingnews Tricker Responsive Pada Blogger"

    Must read×

    Top