Sosial Icon Super Pret - Hallo Sob Jody Blog, artikel kali ini berjudul Sosial Icon Super Pret, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Sosial Icon Super Pret
link : Sosial Icon Super Pret

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)

Demikianlah Artikel Sosial Icon Super Pret

Sekian Sosial Icon Super Pret, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Sosial Icon Super Pret dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/01/sosial-icon-super-pret.html Semoga artikel ini bisa bermanfaat.

Tweet