Dewa Blogger: Hasil penelusuran untuk cara-menambahkan-breaking-news-feed-di-blog

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-menambahkan-breaking-news-feed-di-blog
Cara Menambahkan Breaking News Feed di Blog Cara Menambahkan Breaking News Feed di Blog

Cara Menambahkan Breaking News Feed di Blog - Post kali ini merupakan tanggapan dari pertanyaan teman blogger di blog .

Berikut cara penerapannya :

Catatan : Sebelumnya teman sudah menautkan fontawesome pada template

Pertama buka Blogger > Template > Klik Edit HTML

Tambahkan isyarat di bawah ini sempurna sebelum  ]]></b:skin> atau </style>

/* CSS Breaking News */ #breakingnews {margin:15px 0 0 0;margin-right:15px;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:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;} #adbreakingnews li a {font-family:inherit;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}  @media only screen and (max-width:640px){ #breakingnews {margin:20px 0 0 0;margin-right:0;} #breakingnews .breakhead {padding:6.5px 14px;} #adbreakingnews {margin-left:50px;}}

Kemudian tambahkan isyarat di bawah ini sebelum tag epilog </body>

<script type='text/javascript'> //<![CDATA[ // Breaking News $(document).ready(function(){var e="http://lunafy.blogspot.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(){$("#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>

Ganti http://lunafy.blogspot.com dengan alamat blog sobat

Selanjutnya simpan isyarat di bawah ini di mana saja bebas, terapkan di dalam tag body (Diantara tag pembuka <body> dan tag epilog </body>) 

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

Jika ingin menampilkan breaking news ini hanya pada halaman utama saja, silakan bungkus markup di atas dengan tag kondisional khusus halaman utama

<b:if cond='data:blog.pageType == &quot;index&quot;'> <div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span> <div id='adbreakingnews'>Loading...</div></div> </b:if>

Terakhir simpan template.

Cara Menambahkan Breaking News Feed Di Blog

Pada kesempatan kali ini blog akan membuatkan tutorial terbaru perihal Cara Modifikasi Breaking News Widget .

Pada kesempatan kali ini blog akan membuatkan tutorial terbaru perihal Modifikasi Breaking News Widget

Lalu apa sih kegunaan widget Breaking News itu?


Breaking News yang anda pasang di blog akan berfungsi untuk menampilkan beberapa konten terbaru anda di blog. Widget Breaking News yang akan aku bagikan sangatlah ringan. Jadi, anda tidak perlu khawatir blog anda akan berat. Jika anda tertarik untuk Memasang Widget Headline Breaking News di Blog, silakan ikuti tutorial.

Bagaimana bentuk dari widget Breaking News itu?


Widget ini salah artikel di artikelnya Cara Menambahkan Breaking News Feed di Blog, bila anda menyukai Breaking News yang mudah dan ringan, tidak ada salahnya bila anda menambahkan widget Breaking News berikut ini.

Cara Modifikasi Breaking News Widget


1. Seperti biasa login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini sempurna diatas instruksi ]]></b:skin> atau </style>

/* CSS Breaking News */ #breakingnews{position:relative;font-family:'Roboto Condensed',sans-serif;margin:20px 20px 0 20px;height:50px;line-height:26px;overflow:hidden;padding:4px 0;border-top:2px solid #ecf0f1;border-bottom:2px solid #ecf0f1} #breakingnews:after{content:'\f0c9';font-family:fontawesome;color:#bdc3c7;position:absolute;right:18px;font-size:1.2rem;font-weight:normal;top:12px;text-align:center} #breakingnews .breakhead{background:#e74c3c;color:#fff;display:inline-block;float:left;font-size:17px;font-weight:700;padding:6px 12px} #adbreakingnews{float:left;margin-left:12px;margin-top:6px;line-height:28px} #adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0} #adbreakingnews li a {font-weight:400;color:#000;margin-top:10px;} #adbreakingnews li a:hover {color:#e74c3c;} #adbreakingnews li a:before{content:'\f079';font-family:fontawesome;display:inline-block;float:left;margin:0 8px 0 0;line-height:29px;}

2. Setelah itu salin dan tambahkan instruksi di bawah ini sempurna di atas </body>

<script type='text/javascript'> //<![CDATA[ // Breaking News $(document).ready(function(){var e="http://www.arlinadzgn.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(){$("#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>

Jangan lupa untuk mengganti url blog ini dengan blog anda

3. Kemudian salin instruksi di bawah ini dan tambahkan bebas dimanapun diantara area <body> dan </body> dalam template. Seperti referensi di blog ini aku tambahkan di dalam konten dengan id content-wrapper

<div id='breakingnews'><span class='breakhead'>Breaking News</span> <div id='adbreakingnews'>Loading...</div></div>

4. Simpan template.

Nah itulah tutorial Cara Modifikasi Breaking News Widget yang dapat berikan kali ini, terima kasih sudah berkunjung dan salam blogger Indonesia.

Modifikasi Breaking News Widget

Cara Memasang Widget Breaking News di Blog - Setelah beberapa waktu tidak update, pada kesempatan kali ini akan membuatkan sebuah tutorial yang mungkin sanggup bermanfaat bagi teman Blogger. Yaitu Cara Memasang Widget Breaking News dengan Thumbnail di Blog.

Cara Memasang Widget Breaking News di Blog Cara Memasang Widget Breaking News di Blog

Widget ini dibentuk dengan tampilan yang sangat sederhana dan teman tidak perlu khawatir dengan kecepatan blog alasannya yaitu widget ini cukup ringan untuk dipasang di blog.

Baca juga : Cara Menambahkan Breaking News Feed di Blog

Adapun fungsi dari widget ini yaitu untuk menampilkan link dari artikel terbaru dengan thumbnail serta efek slide yang halus. Oke eksklusif saja kita mulai dengan tutorial Cara Memasang Widget Breaking News di Blog

1. Seperti biasa terlebih dahulu login ke Blogger, pilih blog > Klik Template, Edit HTML > Tambahkan instruksi di bawah ini sempurna sebelum  ]]></b:skin> atau </style>

/* CSS News Ticker */ .ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091} .ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif} .ticker-wrap>span>a{color:#222;text-decoration:none} #ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left} #ticker ul{padding:0;margin:0;list-style:none} #ticker ul li{height:45px;white-space:nowrap} #ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px} #ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif} #ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important} #ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Edit kembali font, warna, dan lainnya sesuai blog sobat

2. Kemudian tambahkan instruksi di bawah ini sebelum tag epilog </body>

<script type='text/javascript'> //<![CDATA[ // Breaking News ticker by https://www.arlinadzgn.com function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)}); //]]> </script>

3. Selanjutnya tambahkan markup di bawah ini bebas diantara tag pembuka <body> dan tag epilog </body>

<div class='ticker-wrap' data-domain='gvusiondua.blogspot.com'> <div id='ticker'> </div> </div>

Ganti instruksi yang ditandai dengan alamat blog sobat.


Demikian tutorial Cara Memasang Widget Breaking News di Blog, supaya bermanfaat bagi teman semua.

Cara Memasang Widget Breaking News Di Blog

Langganan: Postingan (Atom)