#slidewrap {
margin: 10px 0 25px 0px;
padding: 0px;
position: relative;
width: 98%;
height: 280px;
overflow: hidden;
float:left;
}
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 190.5px;
height: 280px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0px; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
display: block;
position: absolute;
right: 0px;
width: 300px;
height: 280px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnk7DO3dsDAqLE2NXRxvtsAExyhOe3DSabgu7W04g0iZGgzB30-VjtUzj-8wdCsgvObjSEclAw9tV3d2C1A7vYFKnUp5cL0gLARrL9h81_YH-pi4OV8YAFAmPdAummrQKSyW0SPwN8qo/s1600/overlay.png) repeat-y scroll top right;
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 0px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
.kwicks .excerpt {
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%;
}
.excerpt h2 {
margin-bottom: 10px;
padding: 10px;
background: #fff;
color: #000;
opacity: 0.77;
filter:alpha(opacity=77);
}
.excerpt h2 a, .excerpt h2 a:visited {
color: #000;
font-size:16px;
text-transform:uppercase;
}
.kwicks img {
margin: 0;
padding:0;
}
a.more4 {
background: #fff;
opacity: 0.77;
filter:alpha(opacity=77);
color: #000 !important;
padding: 3px 6px;
font-size: 11px;
}
* {
margin: 0;
padding: 0;
}
JavaScript
Taruh diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//]]>
</script>
Apa itu Circle Menu? Sudah terlihat dari namanya yang mengandung kata "Circle" yang artinya Lingkaran, Menu ini berbentuk setengah lingkaran dengan Efek Overlay ketika kita klik.
Lantas apa yang dimaksud Melayang? Yap... menu ini dapat melayang yang berarti menu ini tetap pada posisinya ketika kita scroll keatas atau kebawah ( Sticky )
Bagi anda Website designer ataupun website Developer tentunya butuh sesuatu yang Menarik untuk meraih pengunjung Yang besar.
Tapi terkadang kita terkendala karena masalah Tempat Widget, Menu pada blog atau website biasanya terletak pada bagian atas, namun jika sudah diisi oleh widget lain apa yang harus saya lakukan?
Jawabannya mudah, Gunakan menu Slider. Tapi bagaimana saya mendapatkannya ?
Sidr kini hadir membantu untuk anda yang sedang mencari Menu Slider yang Responsive dan hemat tempat untuk anda, Para website designer.
Source Code
Letakan kode CSS dibawah ini diatas ]]></b:skin atau </style>
.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;-webkit-box-shadow:inset 0 0 5px 5px #222;-moz-box-shadow:inset 0 0 5px 5px #222;box-shadow:inset 0 0 5px 5px #222}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);background-image:linear-gradient(#4d4d4d,#1a1a1a);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}
Sudah taukah kalian apa itu Sitemap? yap... kurang lebih Sitemap itu adalah Daftar Isi, disini kita memudahkan pengunjung untuk mencari artikel yang diinginkan sehingga pengunjung lebih betah di blog kita ^_^. Tapi jika design daftar isi yang kita buat kurang menarik pastinya akan mengurangi niat pengunjung anda dan meningglakan blog anda.
Disini saya akan berbagi sebuah kreatifitas yang ada di dunia IT :p
1. Buka Dashboard -> Template -> Template HTML
2. Lalu tambahkan kode dibawah diatas kode ]]></b:skin> atau </style>
Kode CSS :
3. Simpan Template
4. Untuk menampilkannya di halaman kita buat Laman baru ( Dashboard -> Laman -> Laman Baru )
5. Lalu masukkan kode JavaScript dibawah ini di Palette HTML
