DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Shoutbox Pusing

 1-Korang Pergi Dashboard pastu Layout kemudian add a gadget
2- Copy coding di bawah paste kat bawah header atau kat mana2 korang nak...Pastu save
 
<div style='; position:absolute; top: 0px; right:445px;'>

<ul class="ch-grid">
<li><div class="ch-item">
<div class="ch-info">
<p>
<center>
<div style="margin-top:50px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnhyphenhyphenjdCZT3XMFFPAwR7lk80Dmtl5rn9g7HChD9XWnaEHv-hefFVQ4Vs0SOxGWwCGxo1lOezYChhKFdwE15EWe2dybgleyht-1i7X50cp1-_j8DpVaowCFWDKOhUTQGOkbNyVR7zB7T6tcC/s1600/bodybg.gif); border-radius:10px;">
<br/>
<iframe frameborder="0" width="240" height="120" src="http://www5.cbox.ws/box/?boxid=748261&amp;boxtag=hbd997&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-748261" style="border: 4px solid #fa32a9;" id="cboxmain5-748261"></iframe></div>
<div><iframe frameborder="0" width="240" height="60" src="http://www5.cbox.ws/box/?boxid=748261&amp;boxtag=hbd997&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-748261" style="border: 4px solid #fa32a9;border-top:0px" id="cboxform5-748261"></iframe>
</div>
</center>
</p>
</div>
<div class="ch-thumb ch-img">
</div>
</div>
</li>
</ul>
</div>

3-Dah settle....korang copy pulak koding di bawah

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: absolute;
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);

 -webkit-transform-origin: 95% 40%;
 -moz-transform-origin: 95% 40%;
 -o-transform-origin: 95% 40%;
 -ms-transform-origin: 95% 40%;
 transform-origin: 95% 40%;

 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.ch-thumb:after {
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 border-radius: 50%;
 top: 40%;
 left: 95%;
 margin: -4px 0 0 -4px;
 background: rgb(14,14,14);
 background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
 box-shadow: 0 0 1px rgba(255,255,255,0.9);
}


.ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 background: #c9512e url(http://pastelpatterns.com/small/smallpattern-11.png);
 box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 18px;
 margin: 0 60px;
 padding: 22px 0 0 0;
 height: 85px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow:
  0 0 1px #fff,
  0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
 display: block;
 color: #333;
 width: 80px;
 height: 80px;
 background: rgba(255,255,255,0.3);
 border-radius: 50%;
 color: #fff;
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 24px;
 margin: 7px auto 0;
 font-family: 'Open Sans', Arial, sans-serif;
 opacity: 0;

 -webkit-transition:
  -webkit-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -moz-transition:
  -moz-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -o-transition:
  -o-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 -ms-transition:
  -ms-transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 transition:
  transform 0.3s ease-in-out 0.2s,
  opacity 0.3s ease-in-out 0.2s,
  background 0.2s linear 0s;
 
 -webkit-transform: translateX(60px) rotate(90deg);
 -moz-transform: translateX(60px) rotate(90deg);
 -o-transform: translateX(60px) rotate(90deg);
 -ms-transform: translateX(60px) rotate(90deg);
 transform: translateX(60px) rotate(90deg);
 
 -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
 background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
 box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-110deg);
 -moz-transform: rotate(-110deg);
 -o-transform: rotate(-110deg);
 -ms-transform: rotate(-110deg);
 transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
 opacity: 1;
 -webkit-transform: translateX(0px) rotate(0deg);
 -moz-transform: translateX(0px) rotate(0deg);
 -o-transform: translateX(0px) rotate(0deg);
 -ms-transform: translateX(0px) rotate(0deg);
 transform: translateX(0px) rotate(0deg);
}.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfv_l7u6z6QoBz3Sn9HGWMSTffywaZu0yUKJIfObtbCIbMbLLGqykKhggkVZs672iIBQlW6EzspKtmZ0YdtX0SwOTsCQYVZ0E1U5KK3qdK1qrhgZzKX3FinMHNi4xbq0N7ykVNg_kqU6M/s1600/fgr.png);
background-position:20% 70%;
background-size:380px;
}

.ch-info {
 position: absolute;
 background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQAiwDb6g8SL7wfypJ9XhivuYv4uMor4juf2kxDzDZbU0ACfxuZjA);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-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 400px;
 height: 400px;
 display: inline-block;
 margin: 20px;
}

4-letak sebelum coding ]]></b:skin>  nie.....preview..pastu save...


Selamat Mencuba...
TERIMA KASIH SUDI BACA DAN KOMEN
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)