Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Membuat Headline News dengan Efek Slide Up di Blog

Sebagian pengunjung terkadang mengunjungi blog hanya untuk membuka satu artikel saja, dan untuk membuka artikel lain tergantung apakah pengunjung itu melihat ada artikel menarik lain yang ia butuhkan. Maka kita perlu membuat sebuah widget yang berfungsi untuk menampilkan artikel lainnya. Dan artikel yang mungkin akan dianggap menarik adalah artikel-artikel terbaru yang masih segar.

Walaupun sebelumnya telah ada situs lain yang membahas sebuah topik tertentu, namun jika topik tersebut merupakan artikel baru pada blog kamu, maka akan terkesan seperti sebuah informasi baru. Maka akan sangat baik jika kamu memasang sebuah widget yang menampilkan artikel terbaru. Dan salah satu widget yang memiliki fungsi tersebut adalah Headline News.

Headline News dengan Efek Slide Up

Sebenarnya banyak widget yang memiliki fungsi ini seperti widget recent posts. Arsip Blog juga dapat difungsikan untuk menampilkan artikel-artikel terbaru. Namun kali ini saya akan membahas widget dengan tampilan yang lebih menarik yaitu headline news.

Mungkin kamu sering menyaksikan acara-acara berita di televisi. Seringkali terdapat berita-berita singkat berupa teks berjalan yang terdapat di bagian atas atau bawah layar televisi. Itu merupakan sebuah headline news atau sering juga disebut breaking news. Kita juga bisa membuat itu pada sebuah halaman web.

Saya mengambil widget ini dari www.arlinadzgn.com, kemudian saya beri sedikit pengeditan agar memiliki tampilan yang responsive dan dapat menyesuaikan dengan template-template masa kini. Sayangnya jika halaman blog dibuka dari gadget dengan lebar layar 500px ke bawah, headline news ini tidak ditampilkan.

Headline news yang satu ini memiliki tampilan yang sederhana. Selain menampilkan judul artikel dan tanggal pembuatan artikel, juga menampilkan thumbnail kecil dari artikel terkait. Kemudian menggunakan efek slide up saat berganti konten yang ditampilkan. Untuk lebih jelasnya, silakan buka live demo pada link berikut.

Membuat Headline News dengan Efek Slide Up di Blog

Headline news ini akan kita letakkan di bagian atas blog. Untuk kamu yang ingin meletakkannya di posisi lain, silakan personalisasi sendiri.

Memasang CSS

Pada dashboard Blogger silakan masuk ke menu Template dan klik Edit HTML. Dengan menggunakan tombol ctrl + f silakan cari kode ]]></b:skin> kemudian letakkan script berikut di atas kode ]]></b:skin>.
/* CSS News Ticker */
.ticker-wrap{width:1000px; margin:5px; display:block;text-align:center;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #FF5302}
.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}

@media screen and (max-width : 800px) {
.ticker-wrap{width:650px;}
}
@media screen and (max-width : 700px) {
.ticker-wrap{width:550px;}
}
@media screen and (max-width : 600px) {
.ticker-wrap{width:450px;}
}
@media screen and (max-width : 500px) {
.ticker-wrap{display:none!important} 
}
/* CSS News Ticker */

Silakan ubah kode berlatar biru sesuai dengan lebar blog, dan kode berlatar merah ubah sesuai dengan warna khas blog kamu. Jika kamu mengubah lebar widget, maka mungkin kamu perlu menyesuaikan lebar pada kode @media screen and. Untuk selebihnya, kamu bisa menuangkan kreatifitas lain pada script di atas.

Memasang Javascript

Untuk selanjutnya silakan cari kode </body> kemudian letakkan script berikut di atas kode </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>

Memasang HTML

Langkah terakhir adalah memasang kode html di bagian headline news ingin diletakkan. Karena headline news akan kita letakkan di bagian atas blog, maka kamu perlu memahami setiap elemen yang terdapat di bagian atas blog kamu (sekitar header). Namun jika saat ini kamu belum bisa memahaminya, maka silakan coba cara sementara berikut ini.

Pada dashboard Blogger silakan masuk ke menu Tata Letak kemudian sentuhkan kursor pada link edit widget Header. Akan muncul widget id header di bagian bawah, misalnya "header1" (Lihat Gambar). Kemudian kembali ke menu Template > Edit HTML, silakan cari widget id yang telah diketahui sebelumnya. Di sana kamu akan menemukan script elemen header. Maka silakan letakkan script berikut di bawah elemen header.
<div class='ticker-wrap' data-domain='b-tutorial.com'>
<div id='ticker'>
</div>
</div>

Silakan ubah url berlatar biru dengan url blog kamu, kemudian klik Simpan Template.

Artikel terkait : Membuat Headline News dengan Efek Slide Up di Blog

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved