Showing posts with label headline. Show all posts
Showing posts with label headline. 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

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
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
Subscribe to:
Posts (Atom)