Chatbox #Like Me

Emm... Ini tutorial cuma coba-coba yaa 
Requested by Rifa

Classic Template

1. Dashboard >> Template >> Edit HTML
2. Hapus semua mengenai header kamu, maksud saya hapus URL header yaa!
3. Copy kode ini,
/*------ IMAGE ANIMATION------*/
img{
opacity:0.7;
border:none;
padding:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:10px;}

img:hover{
border-radius:30px;
opacity: 1; }

.header{position:absolute; top:16px; right:60px; padding:50px; text-align: center; font-family: lemons can fly; font-size: 70px; color:#fff;}
@font-face{font-family:lemoncanfly;src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')}
.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;
}

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
  
 -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;
}

.ch-img{ 
background-image: url(URL IMG);
background-position:50% 50%;
background-size:500px;
}

.ch-info {
 position: absolute;
background: url(URL IMG) D9E8FC;background-position:50% 50%;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 
 -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: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 
 -webkit-backface-visibility: hidden;

}


.ch-item:hover {
 box-shadow: 
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

.ch-item:hover .ch-info p {
 opacity: 1;
}
</style>
<body><br>
</div></div>

<ul class="ch-grid">
<li> <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcXFmhuu-QMz4bXY0OFy4IVqJdZR6syJd8hMEGAvsc_v63pRpGi6MhfwJxWvpqTC4hs_Gtki1x9XYsc2EVjvVyB-wFVrcfI1kOtQkzDIdgILsCstyzpxtO8y6Tjpr-aCTK3wlUECuwYk6/s1600/bodybg.gif); border-radius:10px;">
<br/>
cbox code here.
</div>
</center>
</div>
</div>
</li>
</ul>

4. Paste kode tadi di bawah .blogger-labels , atau .header:hover {, atau sejenisnya. Pokoknya diawali tanda titik "."

5. Preview, klo kacau jangan disave. Kalau berhasil ya save :D

0 comment

Older Post | Newer Post
✿ ✿ ✿ ✿ ✿ ✿