Sosial Icon Super Pret

B

agaimana tidak senang..." blog yang saya anggap sangat simple dan sederhana ini  bisa tampil dan di pajang di Creating Website dan  tampil di urutan 14 dari banyak nya peserta yang ikut ,sebagai ungkapan kegembiraan Kang Mahfid  spesial untuk pengunjung blog ini saya bagikan bagai mana cara membuat Sosial Icon Super Pret,untuk demonya silahkan sobat lihat pada menu sosial icon super pret di bawah ini,arahkan cursor ke gambar :

Jika sobat ingin membuat sosial icon seperti di atas silahkan sobat ikuti aturan nya secara lengkap di bawah ini .

1. Dengan bantuan Ctrl+f cacri kode ]]></b:skin> lalu sobat taruh kode berikut tepat di atas kode ]]></b:skin> berikut kodenya :

   
   #menu-super-pret {
   position:relative;
   width:150px;
   height:150px;
   margin:0 auto 10px;
   border:0px #aaa solid;
   padding:10px;
   }
   #menu-super-pret div {
   width:50px;
   height:50px;
   position:absolute;
   top:60px;
   left:56px;
   -webkit-border-radius:50px;
   -moz-border-radius:50px;
   border-radius:50px;
   text-align:center;
   }
   
   #menu1 {
   z-index:1;
   background-color:none;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;}
   #menu2 {
   z-index:9;
   background-color:none;
   -webkit-transition-property: top, left,;
   -moz-transition-property: top, left;
   -o-transition-property: top, left;
   -ms-transition-property: top, left;
   transition-property: top, left; -webkit-transition-duration: 1s, 1s;
   -moz-transition-duration: 1s, 1s;
   -o-transition-duration: 1s, 1s;
   -ms-transition-duration: 1s, 1s;
   transition-duration: 1s, 1s; -webkit-transition-delay: 0s, 1s;
   -moz-transition-delay: 0s, 1s;
   -o-transition-delay: 0s, 1s;
   -ms-transition-delay: 0s, 1s;
   transition-delay: 0s, 1s;}
   #menu3 {
   z-index:8;
   background-color:none;
   -webkit-transition-property: top, left, border-radius, background-color;
   -moz-transition-property: top, left, border-radius, background-color;
   -o-transition-property: top, left, border-radius, background-color;
   -ms-transition-property: top, left, border-radius, background-color;
   transition-property: top, left, border-radius, background-color; -webkit-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -moz-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -o-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -ms-transition-duration: 2s, 1s, 0.5s, 0.5s;
   transition-duration: 2s, 1s, 0.5s, 0.5s; -webkit-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -moz-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -o-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -ms-transition-delay: 0s, 0.5s, 1s, 1.5s;
   transition-delay: 0s, 0.5s, 1s, 1.5s;}
   #menu4 {
   z-index:9;
   background-color:none;
   -webkit-transition-property: top, left, border-radius, background-color;
   -moz-transition-property: top, left, border-radius, background-color;
   -o-transition-property: top, left, border-radius, background-color;
   -ms-transition-property: top, left, border-radius, background-color;
   transition-property: top, left, border-radius, background-color; -webkit-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -moz-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -o-transition-duration: 2s, 1s, 0.5s, 0.5s;
   -ms-transition-duration: 2s, 1s, 0.5s, 0.5s;
   transition-duration: 2s, 1s, 0.5s, 0.5s; -webkit-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -moz-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -o-transition-delay: 0s, 0.5s, 1s, 1.5s;
   -ms-transition-delay: 0s, 0.5s, 1s, 1.5s;
   transition-delay: 0s, 0.5s, 1s, 1.5s;}
   #menu-super-pret .center {
   width:50px;
   position:absolute;
   bottom:20px;
   }
   #menu-super-pret:hover #menu1, #menu-super-pret.hover_effect #menu1 {
   top:0px;
   left:0px;
   }
   #menu-super-pret:hover #menu2, #menu-super-pret.hover_effect #menu2 {
   top:120px;
   left:120px;
   }
   #menu-super-pret:hover #menu3, #menu-super-pret.hover_effect #menu3 {
   top:0px;
   left:120px;
   background-color:none;
   }
   #menu-super-pret:hover #menu4, #menu-super-pret.hover_effect #menu4 {
   top:120px;
   left:0px;
   background-color:none;
   }

2. Lalu Save Template
3. Untuk menaruh menu Sosial Icon super pret nya silahkan tempatkan kode berikut ini

   <div id="menu-super-pret" class="shadow hover">
       <div id="menu1"><a href="alamat link yang di tuju"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzj6ksexbvL_kVB0PFwOjiyDn8Xl-GzQYMNk9XtAQeVeK8MXjX"></a>
   </div>
   <div id="menu2">
       <a href="alamat link yang di tuju"><img src="http://www.blueechosolutions.com/images/feed-icon.png"></a>
   </div>
   <div id="menu3">
       <a href="alamat link yang di tuju"><img src="http://www.mypurplemartini.com/images/tweeter_icon.jpg"></a>
   </div>
       <div id="menu4">
           <a href="alamat link yang di tuju"><img src="http://andryferry.herobo.com/facebook-circle-icon-jpg.jpg "></a>
   </div>
   </div>

NB:silahkan ganti text yang warna merah dengan link tujuan sobat(Wassalam)