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)

Judul Artikel :Sosial Icon Super Pret

Terima Kasih Sobat sudah membaca Artikel saya Tentang Sosial Icon Super Pret Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih