Skip to content Skip to sidebar Skip to footer
Home / blogger / Widgets

Cara Memasang Widget Headline Breaking News di Blog (Terbaru)

Post a Comment
Cara Memasang Widget Headline Breaking News di Blog-Pada kesempatan kali ini, Algofixs akan berbagi tutorial terbaru tentang memasang widget headline breaking news.

Cara Mudah Memasang Widget Headline Breaking News di Blog (Terbaru)
 
Baca juga :
Cara Mudah Membuat Widget Subscribe di Blog
Cara Mudah Memasang Tombol Followers Pada Blog 

Lalu apasih kegunaan widget headline breaking news itu ?

Headline News yang anda pasang di blog akan berfungsi untuk menampilkan beberapa konten terbaru anda di blog. Jadi, template yang kita gunakan seakan-akan mempromosikan konten-konten terbaru dengan konsep add navigasi url random. wah menarik juga bukan?

Widget headline News yang akan saya bagikan sangatlah ringan. Jadi, anda tidak perlu khawatir blog anda akan berat. Jika anda tertarik  untuk Memasang Widget Headline Breaking News di Blog, silakan pilih salah satu design dan konsep widget headline news berikut :

Cara Memasang Widget Headline Breaking News Dengan Thumbnail di Blog

Widget ini salah satu kebanggaan dari mbak Arlina, jika anda menyukai Headline yang simpel dan ringan, tidak ada salahnya jika sobat menambahkan Headline breaking news ini.

Cara Memasang Widget Headline Breaking News Dengan Thumbnail di Blog
  • Pertama masuk ke akun Blogger anda
  • Pada menu Dashboard pilih Template
  • Klik Edit HTML
  • Cari kode </Style>
  • Masukkan kode script di bawah ini DI ATAS  </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

}

  • Setelah itu place script di bawah ini tepat DI ATAS </Body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by http://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="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>
 <div class='ticker-wrap' data-domain='gvusiondua.blogspot.com'>
<div id='ticker'>
</div>
</div>

Cara Memasang Widget Headline Breaking News 2

Masih kenal dengan blog Mas Andes? Beliau adalah orang yang pertama kali menggunakan konsep Headline ini. Jika anda ingin mencoba, Sumonggo...
Cara Memasang Widget Headline Breaking News di Blog (Terbaru)
  • Pada menu Dashboard pilih Tata Letak
  • Klik Add a Gadget
  • Copy script di bawah ini dan replace
  • Jangan lupa Save
<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAIx_rSr2bidxT73PC0U394CHjdXNIft612RZZwFlLQFiP2QumP2Zr5-jnU5XhMxNc95nBXKBVVF36_DPIxksIvippyhKhLzyOltRbx7d5W2YFc1ky97VEWIduK7fAidVxsyQrJBnXGMD/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/ID FACEBOOK ANDA' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/ID GOOGLE + ANDA' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/ID TEWITTER ANDA' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/ID FEEDBURNER ANDA' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'URL SITUS ANDA', // Replace With your Blog Url
numpostx     = 20; // Maximum Post
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }             
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>
Perhatian
  • Ganti tulisan warna biru dengan URL situs anda
  • Ganti warna merah dengan ID Akun anda masing-masing.

 Cara Memasang Widget Headline Breaking News 3

Untuk Headline yang satu ini, saya dapatkan di SEOcip, bentuknya simpel, ditambah lagi tombol button media sosial  membuat kesan menarik.
Mau coba?
Cara Memasang Widget Headline Breaking News di Blog (Terbaru)
  • Pada menu dashboard pilih Template
  • Klik Edit HTML
  • Masukkan kode di bawah ini tepat sebelum ]]></b:skin>

#headlinenews { position:relative;background:#343434; display: block;border-top:3px solid #FF6600; height: 33px; line-height: 33px; overflow: hidden;margin:0 auto;padding: 0px;width: 100%;}
#news { float: left; margin-left: 120px; }
#news a { background: none !important; color:#fff !important; font: bold 11px/33px Arial; text-decoration: none; }
.titlenews { background:#FF6600; color: #fff; display: block; float: left; font: bold 12px/33px Arial; padding: 9px; margin-top: -10px; position: absolute; }
#socialicon { float:right; width:230px; padding:5px 0; }
#socialicon ul,#socialicon li { padding:0; margin:0; list-style:none; }
#socialicon li { float:left; margin:0 2px; }
#socialicon a { display:block; text-indent:-9999px; width:24px; height:24px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdF0Z2JZCJS_RRSCxrwSueWtCyJKCX2igdEjtAb9sCkZilY36may6cJhpd-WDq_f-5zQDXcGF7XlunB_hvd6bNAnUKc26VNU49uDVuFRDbHy0VDsSg5VUea3bOg7xAJmGkBKlD0N85C4/s1600/soicon.png); background-position:-1px 0; background-repeat:no-repeat; position:relative; }
#socialicon a:active { top:1px; }
#socialicon .fbx { background-position:-1px 0; }
#socialicon .twix { background-position:-27px 0; }
#socialicon .goex { background-position:-53px 0; }
#socialicon .linx { background-position:-131px; }
#socialicon .pinx { background-position:-79px 0; }
#socialicon .drix { background-position:-157px; }
#socialicon .vmex { background-position:-183px 0; }
#socialicon .rssx { background-position:-105px; }
  •  Lalu masukkan kode di bawah ini tepat di atas </head>
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline1.js'/>
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline2.js'/>
 Selanjutnya letakkan kode di bawah ini tepat DI ATAS <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>
<div id='headlinenews'>
    <span class='titlenews'>Latest Post</span>
  <div id='news'>
 <script type='text/javascript'>
 var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
 cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://www.url anda/feeds/posts/default&quot;)
 cssfeed.displayoptions(&quot;date&quot;)
 cssfeed.setentrycontainer(&quot;span&quot;)
 cssfeed.filterfeed(10, &quot;date&quot;)
 cssfeed.entries_per_page(1)
 cssfeed.init()
 </script>
   </div>
<div id='socialicon'>
        <ul>
          <li><a class='fbx' href=http://www.facebook.com/seocips' title='Facebook'>facebook</a></li>
          <li><a class='twix' href='http://www.seocips.com' title='Twitter'>twitter</a></li>
          <li><a class='goex' href='http://www.seocips.com' title='Google+'>Google+</a></li>
          <li><a class='linx' href='http://www.seocips.com' title='Linkedin'>Linkedin</a></li>
          <li><a class='pinx' href='http://www.seocips.com' title='Pinterest'>Pinterest</a></li>
          <li><a class='drix' href='http://www.seocips.com' title='Dribble'>Dribble</a></li>
          <li><a class='vmex' href='http://www.seocips.com/2014/07/cara-membuat-headline-breaking-news.html' title='Vimeo'>Vimeo</a></li>
          <li><a class='rssx' href='http://feeds.feedburner.com/Seocips' title='RSS'>RSS</a></li>
        </ul>
      </div>
   </div>
          <div class='clear'/>
Perhatian
Ganti yang saya beri tanda merah dengan URL situs anda

Sekian dulu tutorial tentang Cara Memasang Widget Headline Breaking News di Blog, jika masih ada pertanyaan silakan tinggalkan di kolom komentar. Semoga bermanfaat.

Post a Comment for "Cara Memasang Widget Headline Breaking News di Blog (Terbaru)"