Copy dan letakkan css berikut dibawah </b:skin>
Tab ini nantinya hanya akan terlihat pada halaman depan dan halaman index saja, ubah dan sesuaikan dengan selera kita
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
/* Antiscroll */
.antiscroll-wrap{display:block;position:relative;overflow:hidden}
.antiscroll-scrollbar{background:gray;background:rgba(0,0,0,0.5);-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;-webkit-box-shadow:0 0 1px #fff;-moz-box-shadow:0 0 1px #fff;box-shadow:0 0 1px #fff;position:absolute;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:linear 300ms opacity,linear 300ms width;-moz-transition:linear 300ms opacity,linear 300ms width;-o-transition:linear 300ms opacity,linear 300ms width;transition:linear 300ms opacity,linear 300ms width}
.antiscroll-scrollbar-shown{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
.antiscroll-scrollbar-horizontal{height:7px;margin-left:2px;bottom:2px;left:0}
.antiscroll-scrollbar-vertical{width:7px;margin-top:2px;right:2px;top:0}
.antiscroll-scrollbar-vertical:hover{width:9px}
.antiscroll-inner{overflow:scroll}
.antiscroll-inner::-webkit-scrollbar{width:0;height:0}
.antiscroll-inner::scrollbar{width:0;height:0}
/* Label */
.menu-xitem{height:30px;margin:0 0 5px;padding:3px;background:#e6e6e6;border:1px solid #cecece;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}
.menu-xitem a{text-decoration:none;color:#000}
.xitem1{float:left;padding:0 5px;position:relative}
.xitem1 .liat{font:normal normal 16px'Open Sans',serif,sans-serif;font-weight:bold}
.xitem1 .liat:after{font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:14px;content:"\f0dc";margin-left:5px}
#labelxnya{position:absolute;z-index:99;top:100%;left:-2px;display:none}
#labelxnya .box,#labelxnya .box .antiscroll-inner{height:100px;width:160px}
ul.subnya-xitem,ul.subnya-xitem li{padding:0;list-style:none;margin:0;overflow:hidden;width:160px}
#labelxnya .bknslabel{min-width:160px;padding:8px 5px;background-color:#fff;border:1px solid #e2e2e2;border-radius:3px;overflow:hidden;position:relative;top:-12px;-moz-box-shadow:0 0 10px #cfcece;-webkit-box-shadow:0 0 10px #cfcece;box-shadow:0 0 10px #cfcece}
ul.subnya-xitem li{margin:1px 0;white-space:nowrap}
ul.subnya-xitem a{line-height:25px;display:block;padding:0 10px}
ul.subnya-xitem a:hover{background-color:#f5f5f5}
#labelxnya span{position:relative;display:inline-block;text-indent:-9999px;left:50px;top:-7px;width:0;height:0;border-width:10px 10px;border-style:solid;border-color:transparent transparent #868585 transparent}
</style
</b:if>
</b:if>
Copy dan tempelkan code berikut sebelum </head>
Code Pertama
(abaikan/lewati code ini jika code ini sudah ada di template kita)<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Code Kedua
<script type='text/javascript'>
//<![CDATA[
//Ajax JSON Label by MKR
window.labelnyacx=(function(){var b=function(h){var g=h||{},i=g.url_blog||window.location.host,f=g.id_labelcontent||"#labelxnya";var a;$.get("https://"+i+"/feeds/posts/summary?max-results=0&alt=json-in-script",function(d){var k=d.feed.category,c="";if(k!==undefined){c='<span>+</span><div class="bknslabel"><div class="box-wrap antiscroll-wrap"><div class="box"><div class="antiscroll-inner"><div class="box-inner"><ul class="subnya-xitem">';for(var e=0;e<k.length;e++){c+='<li><a href="/search/label/'+encodeURIComponent(k[e].term)+'">'+k[e].term+"</a></li>"}c+="</ul></div></div></div></div></div>";$(f).html(c);a=$("#labelxnya .box-wrap").antiscroll().data("antiscroll");a.refresh()}else{$(f).html("<span>No Label!</span>")}},"jsonp");$(".xitem1 .liat").click(function(){$("#labelxnya").slideToggle("fast");$(this).toggleClass("active");a.refresh();return false})};return function(a){b(a)}})();
//Antiscroll by Guillermo Rauch guillermo@learnboost.com
(function(d){d.fn.antiscroll=function(g){return this.each(function(){if(d(this).data("antiscroll")){d(this).data("antiscroll").destroy()}d(this).data("antiscroll",new d.Antiscroll(this,g))})};d.Antiscroll=a;function a(g,h){this.el=d(g);this.options=h||{};this.x=(false!==this.options.x)||this.options.forceHorizontal;this.y=(false!==this.options.y)||this.options.forceVertical;this.autoHide=false!==this.options.autoHide;this.padding=undefined==this.options.padding?2:this.options.padding;this.inner=this.el.find(".antiscroll-inner");this.inner.css({width:"+="+(this.y?c():0),height:"+="+(this.x?c():0)});this.refresh()}a.prototype.refresh=function(){var h=this.inner.get(0).scrollWidth>this.el.width()+(this.y?c():0),g=this.inner.get(0).scrollHeight>this.el.height()+(this.x?c():0);if(this.x){if(!this.horizontal&&h){this.horizontal=new f.Horizontal(this)}else{if(this.horizontal&&!h){this.horizontal.destroy();this.horizontal=null}else{if(this.horizontal){this.horizontal.update()}}}}if(this.y){if(!this.vertical&&g){this.vertical=new f.Vertical(this)}else{if(this.vertical&&!g){this.vertical.destroy();this.vertical=null}else{if(this.vertical){this.vertical.update()}}}}};a.prototype.destroy=function(){if(this.horizontal){this.horizontal.destroy();this.horizontal=null}if(this.vertical){this.vertical.destroy();this.vertical=null}return this};a.prototype.rebuild=function(){this.destroy();this.inner.attr("style","");a.call(this,this.el,this.options);return this};function f(h){this.pane=h;this.pane.el.append(this.el);this.innerEl=this.pane.inner.get(0);this.dragging=false;this.enter=false;this.shown=false;this.pane.el.mouseenter(d.proxy(this,"mouseenter"));this.pane.el.mouseleave(d.proxy(this,"mouseleave"));this.el.mousedown(d.proxy(this,"mousedown"));this.innerPaneScrollListener=d.proxy(this,"scroll");this.pane.inner.scroll(this.innerPaneScrollListener);this.innerPaneMouseWheelListener=d.proxy(this,"mousewheel");this.pane.inner.bind("mousewheel",this.innerPaneMouseWheelListener);var g=this.pane.options.initialDisplay;if(g!==false){this.show();if(this.pane.autoHide){this.hiding=setTimeout(d.proxy(this,"hide"),parseInt(g,10)||3000)}}}f.prototype.destroy=function(){this.el.remove();this.pane.inner.unbind("scroll",this.innerPaneScrollListener);this.pane.inner.unbind("mousewheel",this.innerPaneMouseWheelListener);return this};f.prototype.mouseenter=function(){this.enter=true;this.show()};f.prototype.mouseleave=function(){this.enter=false;if(!this.dragging){if(this.pane.autoHide){this.hide()}}};f.prototype.scroll=function(){if(!this.shown){this.show();if(!this.enter&&!this.dragging){if(this.pane.autoHide){this.hiding=setTimeout(d.proxy(this,"hide"),1500)}}}this.update()};f.prototype.mousedown=function(i){i.preventDefault();this.dragging=true;this.startPageY=i.pageY-parseInt(this.el.css("top"),10);this.startPageX=i.pageX-parseInt(this.el.css("left"),10);this.el[0].ownerDocument.onselectstart=function(){return false};var j=this.pane,g=d.proxy(this,"mousemove"),h=this;d(this.el[0].ownerDocument).mousemove(g).mouseup(function(){h.dragging=false;this.onselectstart=null;d(this).unbind("mousemove",g);if(!h.enter){h.hide()}})};f.prototype.show=function(g){if(!this.shown&&this.update()){this.el.addClass("antiscroll-scrollbar-shown");if(this.hiding){clearTimeout(this.hiding);this.hiding=null}this.shown=true}};f.prototype.hide=function(){if(this.pane.autoHide!==false&&this.shown){this.el.removeClass("antiscroll-scrollbar-shown");this.shown=false}};f.Horizontal=function(g){this.el=d('<div class="antiscroll-scrollbar antiscroll-scrollbar-horizontal">',g.el);f.call(this,g)};e(f.Horizontal,f);f.Horizontal.prototype.update=function(){var g=this.pane.el.width(),h=g-this.pane.padding*2,i=this.pane.inner.get(0);this.el.css("width",h*g/i.scrollWidth).css("left",h*i.scrollLeft/i.scrollWidth);return g<i.scrollWidth};f.Horizontal.prototype.mousemove=function(i){var g=this.pane.el.width()-this.pane.padding*2,l=i.pageX-this.startPageX,h=this.el.width(),j=this.pane.inner.get(0);var k=Math.min(Math.max(l,0),g-h);j.scrollLeft=(j.scrollWidth-this.pane.el.width())*k/(g-h)};f.Horizontal.prototype.mousewheel=function(h,j,g,i){if((g<0&&0==this.pane.inner.get(0).scrollLeft)||(g>0&&(this.innerEl.scrollLeft+Math.ceil(this.pane.el.width())==this.innerEl.scrollWidth))){h.preventDefault();return false}};f.Vertical=function(g){this.el=d('<div class="antiscroll-scrollbar antiscroll-scrollbar-vertical">',g.el);f.call(this,g)};e(f.Vertical,f);f.Vertical.prototype.update=function(){var h=this.pane.el.height(),i=h-this.pane.padding*2,k=this.innerEl;var l=i*h/k.scrollHeight;l=l<20?20:l;var g=i*k.scrollTop/k.scrollHeight;if((g+l)>i){var j=(g+l)-i;g=g-j-3}this.el.css("height",l).css("top",g);return h<k.scrollHeight};f.Vertical.prototype.mousemove=function(i){var g=this.pane.el.height(),h=g-this.pane.padding*2,m=i.pageY-this.startPageY,k=this.el.height(),j=this.innerEl;var l=Math.min(Math.max(m,0),h-k);j.scrollTop=(j.scrollHeight-g)*l/(h-k)};f.Vertical.prototype.mousewheel=function(h,j,g,i){if((i>0&&0==this.innerEl.scrollTop)||(i<0&&(this.innerEl.scrollTop+Math.ceil(this.pane.el.height())==this.innerEl.scrollHeight))){h.preventDefault();return false}};function e(i,h){function g(){}g.prototype=h.prototype;i.prototype=new g}var b;function c(){if(b===undefined){var i=d('<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"></div>');d("body").append(i);var h=d(i).innerWidth();var g=d("div",i).innerWidth();d(i).remove();b=h-g}return b}})(jQuery);
//]]>
</script>
Kemudian yang terakhir, copy dan letakkan code berikut dibawah <div id='main-wrapper'> atau letakkan diarea yang kita kehendaki
<div class='menu-xitem'>
<div class='xitem1'>
<a class='liat' href='#'>Categories</a>
<div class='hidden' id='labelxnya'/>
</div>
</div>
<script class='jshilang' type='text/javascript'>
labelnyacx();
</script>
Semoga berhasil.
Sumber tidak disertakan karena code diatas disadur dari beberapa sumber.
0 comments:
Posting Komentar