Aura Sabrina
Aura Sabrina D.
THEOWNER


Aura Sabrina Dewanti | 12 | Lampung, Indonesia. Your IP is: So, don't open my page resource! Because I know you.


Home About Tuto Bies Others
Affies Skins Rules

Tagboard


OlderPost


Friends


SurpriseBox

1 2 3 4
I wanna show you something, So click the number above ^_^

Credits

© 2014 - Full Template by Aura. Basecode by Aura. And helped by ABC.

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">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
PUT YOUR CONTENT HERE !
</div>
</div>
</div>
</div>
</li>
</ul>
 Paste kat bahagian mana yg korang suka
 Preview and save




Template 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">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
PUT YOUR CONTENT HERE !
</div>
</div>
</div>
</div>
</li>
</ul>
 Paste dalam html/javascript tadi.
 Preview and save


Blogger Dizzy said...

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? ;)


+ +