Recent post

baner

Archive for Agustus 2014

Banner Slider dengan ukuran 468px x 60px.contoh'a bisa kalian lihat sendiri pada blog sini : yui-indo atau gambar dibawah ini.


screenshot


Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.


CSS : diatas code ]]></b:skin>

HTML :letakan diantara kode html/didalam <body> dan </body>
(tergantung kamu mau diletakan dimana.)


HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>




a href='#' (ganti tanda pagar ddengan URL link yang dituju)

title='#' (ganti dengan nama link yang dituju)

'urlgambar' (ganti dengan Url site yang dituju)


CSS


#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}








Oia,untuk slidernya sendiri sudah saya atur agar kecepatan slide'a lebih lambat dari aslinya,yang diatur dengan css keyframe slide-animation.

dan juga menurut saya pemasangan banner ini terbatas,hanya4 buah.kenapa tidak bisa lebih?
sebenarnya bisa,pertama,kamu perhatikan CSS dibawah ini.





@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagai mana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.




Note:-diatas hanya contoh,karena slider'a ini crossbrowser antara mozzilla dan chrome,maka perhatikan awalan depan css moz dan webkit,nilai'a harus sama.




Untuk pengaturan posisi slidernya,menggunakan margin.

margin:0px 0px 0px 0px;

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}



Setting diatas masih default,kamu tinggal mengatur nilai margin left,top,right dan bottomnya.




yahh,sebenarnya trik ini awal"a cuma iseng" untuk blog saya sendiri,tapi karena saya rasa banyak dibutuhkan juga dan bermanfaat untuk mengurangi pemakaian tempat banner,jadi saya share deh :)

oia saya ingatkan sebelumnya,sebelum menggunakan trik banner ini,ada baiknya membackup template agar tidak terjadi sesuatu yang tidak diinginkan,dan selalu ingat tidak menggunakan CSS secara berlebihan agar tidak memberatkan blog kamu.

semoga bermanfaat,arigatou gozaimasu minna~

Banner Slider dengan CSS3

Selasa, 26 Agustus 2014
Author : bangkit542 Comments : 1
Tag :


Apa kabar sobat?masih bingung bagaimana bisa template hatsune miku magazine style bisa seperti itu?sebenar'a cara'a sudah cukup umum menurut saya.taukah kamu tentang trik Jquery Accordion?yapp,sebenar'a sama saja,trik'a,kalau biasanya diterapkan untuk list menu atau sidebar,maka trik ini saya terapkan ke element" seperti content,posting,sidebar atau sekaligus semuanya.


Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v.
#atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~:

-contoh-




Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.


Copy paste semua CSS ini dibawah code ]]></b:skin>

<style type='text/css'>
#panel{
overflow:auto;
display:block;
}
.slide{
margin:0;
padding:0;
}
.btn-slide:hover {background:#CA2968;}
.btn-slide {
cursor: pointer;
text-align: center;
padding: 10px;
display: block;
color: #B3B3A9; /*Warna text*/
background-color: #1F1538; /*warna background tombol menu*/
position: absolute;
z-index: 9;
margin-left: 0px; /*atur posisi dengan margin*/
margin-right: 0px; /*atur posisi dengan margin*/
margin-top: 0px; /*atur posisi dengan margin*/
margin-bottom: 0px; /*atur posisi dengan margin*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 50px; /*Lebar*/
height: 50px; /*tinggi*/
line-height: 50px;
border: 5px solid white; /*border atau garis pinggir*/
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
} /* trik dari djogzs.blogspot.com*/
</style>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

#panel{
overflow:auto;
display:none; /*panel yang disembunyikan dalam keaddan normal*/
}
</style>
</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
</style>
</b:if>

Lalu copy paste juga Jquery dibawah ini diatas code </body>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;.btn-slide&#39;).click(function(){

$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);

});

});

</script>


Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste

//Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//
<div class='slide'><span class='btn-slide'>-OPEN-</span></div>


#untuk mengatur posisi,lebar,tinggi warna dan sebagai'a,kamu tinggal atur css .btn-slide {

kemudian,tentukan content yang akan kamu sembunyikan.


<div id='panel'>

isi content

</div>




#Contoh pada template hatsune miku magazine style

<div id='panel'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='sidebar-right'> /*Sidebar*/
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
</b:section>
</div>
<div id='content-wrapper'> /*wrapper*/
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'> /*posting*/
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>


</div>


Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
accordion/ buka tutup.



Setelah itu,simpan dan lihat hasilnya.

#trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.

mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)

Content Accordion dengan jquery

Author : bangkit542 Comments : 0
Tag :
Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD


Contoh


Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.

Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD


Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS
#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Setelah itu letakan Jquery diatas ini tepat diatas kode </body>

Jquery
<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.

Lightbox Blogger dengan Jquery

Author : bangkit542 Comments : 0
Tag :
ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat
,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n
 ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation.




Kode HTML

masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini

<div class="ganti dengan nama css/kotak"></div>


Contoh:
<div class="kotak2"></div>
<div class="lingkaran"></div>

CSS3 Border radius

kotak1
.kotak1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Kotak2
.kotak2 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Segitiga atas

segitiga bawah

segitigakanan

segitigakiri

.segitigabawah {
border-color:#333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigaatas {
border-color:transparent transparent #333333;
border-style:solid;
border-width:0 20px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakanan {
border-color: transparent transparent transparent #333333;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakiri {
border-color:transparent #333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}

Lingkaran
.lingkaran {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:#00C4FD;
width: 80px;
height: 80px;
line-height: 70px;
text-align: center;
}

Kotak3
.kotak3 {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}

Kotak4
.kotak4 {
background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#00C4FD), to(#FFFF55));
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}

CSS3 Gradient

Kotak5
.kotak5 {
background: -webkit-gradient(
radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
500px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak6
.kotak6 {
background: -webkit-gradient(
radial, 480 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
480px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak7
.kotak7 {
background: -webkit-gradient(
radial, 450 25%, 40, 500 25%, 20, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
450px 25%, 40px, 500px 25%, 20px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak8
.kotak8 {
background: -webkit-gradient(
radial, 500 50%, 10, 500 50%, 80, from(orange), color-stop(0.6, #fff), to(lightblue)
);
background: -moz-radial-gradient(
500px 50%, 10px, 500px 50%, 80px, from(orange), color-stop(0.6, #fff), to(lightblue)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak9
.kotak9 {
background: -webkit-gradient(
radial, 500 50%, 20, 500 50%, 100, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
);
background: -moz-radial-gradient(
500px 50%, 20px, 500px 50%, 100px, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak10
.kotak10 {
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak10
.kotak11 {
background: -moz-linear-gradient(top, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

CSS3 Animation

horizontal
.kotak1animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak1animasi:hover {-moz-transform:translate(4em, 0pt);
-webkit-transform:translate(4em, 0pt);}

berputar
.kotak2animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak2animasi:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}

horizontal+vertikal
.kotak3animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak3animasi:hover {
-moz-transform:translate(-3em, 1em);
-webkit-transform:translate(-3em, 1em);}

Ukuran
.kotak4animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak4animasi:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);}

border
.kotak5animasi {
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak5animasi:hover {
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;}

Lingkaran
.kotak6animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak6animasi:hover {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

ukuran box
.kotak7animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak7animasi:hover {
width: 300px;}

Warna
.kotak8animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak8animasi:hover {
background:#D2506C;}

shadow+background trasparant
.kotak9animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak9animasi:hover {
-moz-box-shadow:0 0 20px #D2506C;
-webkit-box-shadow:0 0 20px #D2506C;
background-color:rgba(255, 255, 255, 0.8);}

Shadow 2 warna
.kotak10animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak10animasi:hover {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
}

multi animasi
.kotak11animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak11animasi:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { width:100px; }
5% { width:150px; left:-25px; }
10% { width:100px; left:0px; }
15% { width:150px; left:-35px; }
20% { width:100px; left:0px; }
40% { width:100px; background-color:#38374A; }
45% { width:150px; left:-25px; background-color:#FFFF55; }
50% { width:100px; left:0px; background-color:#FFFF55; }
55% { width:150px; left:-25px; background-color:#FFFF55; }
60% { width:100px; left:0px; background-color:#3FFFF55; }
80% { width:100px; background-color:#45002D; }
100% { width:100px; background-color:#00C4FD; }
}

Bounce effect
.kotak12animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak12animasi:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 250px;
}
}

Fade effect
.kotak13animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak13animasi:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}

infinity Bounce effect
.kotak14animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak14animasi:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}

rotate
.kotak15animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak15animasi:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

Hello
apa kabar n_n
.kotak16animasi {
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.kotak16animasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.kotak16animasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.kotak16animasi > div:first-child {
position: relative;
z-index: 2;
}
.kotak16animasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.kotak16animasi:hover > div:first-child {
opacity: 0;
}
.kotak16animasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Khusus untuk trik ini,kode html'a seperti dibawah ini
<div class="kotak16animasi">
<div>
Hello</div>
<div>
apa kabar n_n </div>
</div>
moving
.kotak17animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak17animasi:hover {
-webkit-transform: translate(540px,-200px);
}

30 Trik menarik CSS3

Author : bangkit542 Comments : 0
Tag :
Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan
effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...


Pertama,buka blogger sobat, Rancangan => Edit HTML
lalu masukan css dibawah ini ke template sobat
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:80px;}
#floatMenu ul {list-style-type: none;}
#floatMenu ul li a {
display:block;
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
border:1px solid #999;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
width:80px;
-webkit-transition: all 0.6s ease-out;
box-shadow: #333 0px 0px 10px;
-moz-box-shadow: #333 0px 0px 10px;
-webkit-box-shadow: #333 0px 0px 10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
border-right:6px solid #999;
width:150px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
}
#floatMenu ul.menu1 li a:hover {border-color:#09f;}

Note:
-bila sobat ingin mengganti warna background menu'a,sobat tinggal ganti kode warna'a.
-sobat juga bisa ganti warna hover menu'a dengan mengganti kode warna'a.

Selanjut'a.sobat masukan script di bawah ini di bawah kode ]]></b:skin>

<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>


terakhir..sobat masukan kode html di bawah inidi elemen halaman sobat,atau bisa di template sobat di atas kode </body>

<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
<li><a href="#" onclick="return false;"> About </a></li>
<li><a href="#" onclick="return false;"> Contact </a></li>
<li><a href="#" onclick="return false;"> Blog </a></li>
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Note:
-Ganti tanda # dengan Url sobat.
-Ganti juga Nama link sobat.

selesai deh..
selamat mencoba sob,dan jangan lupa tinggalkan komentarnya n_n

Cara Memasang Menu Melayang

Author : bangkit542 Comments : 1
Tag :
Navigation

Visitor

Diberdayakan oleh Blogger.

XT Blogroll

Back to top

Get this widget!

Translate

My Profile

Daftar Isi
ACCELERATOR

Baner terselundup

Visit NowVisit NowVisit NowVisit NowVisit NowVisit NowVisit NowVisit Now

- Copyright © 2013 AvengedSevenFold - Exclusive blue v.2 - Powered by Blogger - Designed by Bangkit - Ori by BP -