|
THEOWNER 
Aura Sabrina Dewanti | 12 | Lampung, Indonesia. Your IP is: So, don't open my page resource! Because I know you. Tagboard OlderPost Friends SurpriseBox |
Cara Membuat Cbox Hover
Sunday, February 02, 2014 • 1 comment(s) 
Hi guys! maap aku jrang post tuto *maapkanakuu* Tapi mulai sekarang aku akan rajin ngepost deeh xD kali ini aku mau post Cbox Hover Credit: KAK ATIN
Blogskin/classic template
 Dashboard > Template Tekan Ctrl + F serentak dan cari code </style> Copy code bawah ni
<style>
.ch-item { width: 100%; height: 85%; border-radius: 10%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #222; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-info{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 10%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #fff; } .ch-img-1 { background-image: url(http://data2.whicdn.com/images/98396939/large.jpg);background-size:400px; } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style>  Paste di atas code </style> tadi. Copy code bawah ni pulak<ul class="ch-grid">  Paste kat bahagian mana yg korang suka Preview and saveTemplate designer Dashboard > layout > add a gadget > html/javascript Copy semua code2 bawah ni
<style>
.ch-item { width: 100%; height: 85%; border-radius: 10%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #222; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-info{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 10%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #fff; } .ch-img-1 { background-image: url(http://data2.whicdn.com/images/98396939/large.jpg);background-size:400px; } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <ul class="ch-grid"> Paste dalam html/javascript tadi. Preview and save |
: aurasabrina 
: Aura Sabrina
Aura sering dibilang internet addict sama keluarga aura. Karena dari kelas 3SD sampe sekarang (1SMP) hobinya main internet. Aura juga gak tau kenapa bisa segitunya, mungkin udah kebiasaan jadi rada susah dihilangin ._. 
huhuhuuuhhuuh.... g dongg........
buatin blogku kayak gitu dongg!!!!!!! blogku jelek!! TT_TT
http://gimanagituuhh.blogspot.com/
Post a Comment
Thanks For Read My Post^^ Please Leave A Comment After You Read My Post. OK? ;)