Showing posts with label news. Show all posts
Showing posts with label news. Show all posts

Tuesday, January 10, 2017

Cara Memasang Widget Headline Breaking News Di Blog

Cara Memasang Widget Headline Breaking News Di Blog


Cara Memasang Widget Headline Breaking News Di Blog


Cara Memasang Widget Headline Breaking News Di Blog

Zerone Blog - Pada kesempatan kali ini Zerone Blog akan memberikan sebuah tutorial yang dapat mempercantik dan juga bermanfaat untuk blog sobat yaitu Cara Memasang Widget Headline Breaking News Di Blog, Widget yang satu ini memungkinkan pengunjung blog sobat untuk dapat lebih mengetahui beberapa artikel dari Blog sobat, Widget ini juga cukup ringan untuk di pasang di Blog sobat. Ok langsung saja sobat simak langkah-langkahnya di bawah ini.

Cara Memasang Widget Headline Breaking News Responsive Di Blog


1. Silahkan sobat masuk ke dashboard blog sobat lalu > Klik Template > Edit HTML > kemudian tambahkan kode di bawah ini sebelum kode ]]></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}

Kemudian sobat bisa edit kembali font, warna, dan lainya sesuai dengan blog sobat

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

<script type=text/javascript>
//<![CDATA[
// Breaking News ticker by http://zeroneblogg.blogspot.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>

3. Lalu tambahkan markup di bawah ini bebas di antara tag <body> dan tag penutup </body>

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

Kemudian ganti kode yang sedah di tandai dengan alamat Blog sobat.

Demikian Cara Memasang Widget Headline Breaking News Di Blog yang bisa Zerone Blog berikan semoga bermanfaat untuk sobat, Terimakasih.


Available link for download

Read more »

Saturday, November 5, 2016

Cara Lengkap Membuat Headline News Di Blog

Cara Lengkap Membuat Headline News Di Blog


Memberikan keindahan terus di ulik demi menciptakan tampilan blog yang sempurna,namun terkadang kita tidak mengetahuinya apa saja yang bisa kita pasang di blog kita,Cara Lengkap Membuat Headline News Di Blog itu yang akan kita kupas sebagai salah satu tampilan demi menciptakan daya tarik kepada para pengunjung blog,

Mungkin kalian sering melihat pada media media salah satu contohnya televisi,ketika berita atau yang lainnya sedang berlangsung maka sering kita jumpai tulisan berjalan di bawah sebagai ulasan dari wacana yang ada di dalamnya,sama halnya pada headline news yang akan kita bahasa sekarang,nah buat kalian yang ingin mencobanya seperti apa sih tampilannya bisa kalian lihat tutorialnya di bawah ini.


1. Login terlebih dahulu.
2. Pilih menu Tata Letak > Add Gadget > HTML/Javascript.
3. Copy kode di bawah dan pastekan di kolom konten.

<script type="text/javascript">var hn_url_blog = "http://hansmjlkcommunity.blogspot.com/";var hn_jumlah_post = 10;var hn_warna_latar = "#FAF8F8";var hn_warna_garis = "#FD0606";var hn_posisi = "top";var hn_tampilkan_judul = true;var hn_backlink = true;</script> <script src="https://hanmjlkcommunity.googlecode.com/files/headline-news.js"> </script>


4. Kemudian save dan lihat hasilnya.

Keterangan

  • Tulisan berwarna merah adalah link blog silahkan ganti dengan link blog kalian.
  • Tulisan berwarna hijau adalah jumlah postingan yang tampil silahkan ubah sesuai keinginan.
  • Tulisan berwarna kuning adalah background headline silahkan ganti sesuai selera.
  • Tulisan berwarna biru garis tepi headline silahkan ganti sesuai selera.

Itulah tutorial kali ini yang bisa saya sampaikan semoga dapat bermanpaat buat semuanya dan saya ucapkan terima kasih atas partisiasinya.


Available link for download

Read more »

Thursday, November 3, 2016

Cara Memasang Breaking News Berjalan Di Blog

Cara Memasang Breaking News Berjalan Di Blog


Hai,bagaimana kabarnya semua
Mudah-mudahan sehat semua Amin
Kali ini saya ingin ngeshare Cara Memasang Breaking News Di Blog




Contohnya :



Sekarang saya akan memberi caranya sebagai berikut :

1.Masuk Ke Blogger
2.Masuk Ke Template > Edit HTML
3.Cari kode ]]></b:skin> dan letakkan script di bawah tepat di atas kode tersebut

Kode :
.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_fV5WN1fhY7qixcS-Eaj2fyq1je1sJbtL2VYQjRUtIumPT06awmM8lpBBrWx1xp9m-Frp5dLLyW23CiT_zQMVgQIRP7GsBEiw3SGjemI13PIWJS-7dBF5-EvXOHZrT69igq87rOrjuo/s1600/BRK+NW.png) no-repeat top left;width:980px;margin:0 auto;padding:0 auto; height:25px;color:#fff;}
.news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}


NB : Ganti tulisan warna merah dengan ukuran blog anda

4. Selanjutnya letak kan kode berikut pas di atas kode </head>


<script src=http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA></script>
<script type=text/javascript>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write(<div id="+c+" class="+a+"></div>);this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML=<img src="+gfeedfetcher_loading_image+" /> Loading news...;var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class=datefield>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul> ":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d=<a href="+a[c].link+" target="+this.linktarget+" class="titlefield">+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?<span class="labelfield">[+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+" "+f+this.itemcontainer.replace("<","</")+" "}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul> ":"";for(var e=0;e<d.length;e++){var h=<a href="+d[e].link+" target="+g+" class="titlefield">+d[e].title+"</a>";var j=/label/i.test(b)?<span class="labelfield">[+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+" "+a+f.replace("<","</")+" "}c+=(f=="<li>")?"</ul> ":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type=text/css>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>


5. Terus cari kode <div id=header-wrapper> dan letakkan kode berikut tepat di bawahnya

<div class=newspic>
<div style=float:left;width:979px;padding:1px 0 6px 130px; position:relative; overflow:hidden;>
<script type=text/javascript>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://99-manggala.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style=clear:both;/>
</div>


NB : Ganti Tulisan Hijau dengan URL blog anda

6. Terakhir Save.


Available link for download

Read more »