NEW - Cara memasang 3D share sosial bookmarks button di blogspot

Berikut postingan hari ini yg saya akan posting
mengenai tata cara memasang widget 3D share sosial button pada blog anda,..
dan berikut conton gambarnya,..

Demo Lihat Disini

* buka blog anda
* pilih template >> edit HTML
* tambahkan kode css dibawah ini ke dalam ]]></b:skin>

#centrada{
  margin: 50px auto 0px auto;
  width:280px;
  font-family: 'Verdana';
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
.utopix{
  padding-bottom:50px;
}
a{
  color:#fff;
  text-decoration:none;
}
body{
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #bababa 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#bababa)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#bababa 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#bababa 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #ffffff 0%,#bababa 100%); /* W3C */
}
.cube {
  width: 100%;
  height: 50px;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.default-state,.active-state {
  height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
  -webkit-transform: translateZ(25px);
  -moz-transform: translateZ(25px);
  -o-transform: translateZ(25px);
  -ms-transform: translateZ(25px);
  transform: translateZ(25px);
}
.flip-to-top .active-state {
  -webkit-transform: rotateX(90deg) translateZ(75px);
  -moz-transform: rotateX(90deg) translateZ(75px);
  -o-transform: rotateX(90deg) translateZ(75px);
  -ms-transform: rotateX(90deg) translateZ(75px);
  transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
  -webkit-transform: rotateX(-90deg) translateZ(-50px);
  -moz-transform: rotateX(-90deg) translateZ(-50px);
  -o-transform: rotateX(-90deg) translateZ(-50px);
  -ms-transform: rotateX(-90deg) translateZ(-50px);
  transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
  -webkit-transform: rotateX(-89deg);
  -moz-transform: rotateX(-89deg);
  -o-transform: rotateX(-89deg);
  -ms-transform: rotateX(-89deg);
  transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
  -webkit-transform: rotateX(89deg);
  -moz-transform: rotateX(89deg);
  -o-transform: rotateX(89deg);
  -ms-transform: rotateX(89deg);
  transform: rotateX(89deg);
}
.cube {
  text-align: center;
  margin: 0 auto;
}
.default-state,
.active-state {
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  line-height: 50px;
  -webkit-transition: background 250ms ease;
  -moz-transition: background 250ms ease;
  -o-transition: background 250ms ease;
  transition: background 250ms ease;
}
.cube:hover .default-state {
  background: #000;
}
.facebook {
  background: #3b5998;
}
.twitter {
  background: #019AD1;
}
.google-plus {
  background: #D34836;
}
.linkedin {
  background: #069;
}

* kemudian tambahkan kode di bawah ke dalam HTML/JAVASCRIPT

<div id="centrada">
  
<div class="cube flip-to-top">
   <div class="default-state facebook">
      <span>Like</span>
   </div>
   <div class="active-state facebook">
      <span><a href="https://www.facebook.com/ivankvalentine" target="_blank">Facebook</a></span>
   </div>
</div>

<div class="cube flip-to-top google-plus">
   <div class="default-state">
      <span>+1</span>
   </div>
   <div class="active-state google-plus">
      <span><a href="https://plus.google.com/110561987544809067837" target="_blank">Google Plus</a></span>
   </div>
</div>


<div class="cube flip-to-top twitter">
   <div class="default-state">
      <span>Follow</span>
   </div>
   <div class="active-state twitter">
      <span><a href="https://twitter.com/IvankGribatako" target="_blank">Twitter</a></span>
   </div>
</div>

<div class="cube flip-to-top">
   <div class="default-state linkedin">
      <span>Connect</span>
   </div>
   <div class="active-state linkedin">
      <span><a href="https://www.linkedin.com/pub/xavi-pinyol-sans/3b/9ab/180" target="_blank">Linkedin</a></span>
   </div>
</div>
  
</div>

>>> CATATAN <<<
( ganti warna merah dengan sosmed anda )

*** SELAMAT MENCOBA SOBAT ***

QUEEN TRICK BLOG

NEW - Cara memasang 3D share sosial bookmarks button di blogspot

Entri Populer

Label