Pure CSS Fish Eye Menu

Pure CSS Fish Eye Menu
---------------------------
Apa itu Pure CSS Fish Eye Menu ?
klo belum tau bisa di lihat DISINI!!!

yuk, liat cara buatnya !

Caranya

Step I

• Login ke blogger mu
• Masuk ke " Rancangan --> Edit HTML"
• BackUp dulu klo takut gagal!  *(opsional)
• Centang Expand Template Widget
• Cari Code1 di (kotak bawah)
• Copy Code2 (CTRL+C)
• Kemudian letakkan Code2 tepat diatas Code1
• Simpan Template

Step II

• Masuk kembali ke " Rancangan --> Element laman"
• Pilih Tata letak (dibawah header klo bisa/terserah deh) --> HTML/Javascript
• Masukkan Code3 di kotak HTML/Javascript
• Simpan, Selesai

Code1

]]></b:skin>

 Cari Code diatas dengan menggunakan CTRL+F agar lebih efisien

Code2

/*----------------

Pure CSS Fish Eye Menu Expand Down

-------------------------------*/

.expand-down {

  font-family:Arial, Helvetica, sans-serif;

  line-height:normal;

  margin-top:20px;

  height:150px;

  width:500px;

  margin-bottom:30px;

}

.expand-down * {

  margin: 0;

  padding: 0;

}

.expand-down ul {

  padding-top:10px;

  margin-left:10px;

}

.expand-down ul li {

  float:left;

  list-style-type:none;

}

.expand-down ul li a {

    text-decoration:none;

}

.expand-down ul li a img {

  width:50px;

  height:50px;

  border:none;

}

.expand-down ul li a span {

  display:none;

}

.expand-down ul li:hover a span {

  display:block;

  font-size:14px;

  text-align:center;

  color:#fff;

}

.expand-down ul li:hover a img {

  width:100px;

  height:100px;

}

.expand-down ul li:hover + li a img {

  width:60px;

  height:60px;

}

.expand-down ul li:hover + li + li a img {

  width:55px;

  height:55px;

}

Letakkan Kode berikut tepat diatas kode " ]]></b:skin> "

Code3

<div class="expand-down">
<ul class="expand-down">
<li>
<a href="http://muzzved.blogspot.com/2011/04/home.html" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnD7sz-o2PUsNo9tbn_WUAOVCYNgjn8JvybdAyek8epeDynJEBMKib0Yz4IbMMPqvPNVC8FL7J5ZXUkbceDbsYwbaub6mxOuFlK0AXHgl5pYRDjtYVEf-imSyxe2dxqpqbv9yEMqRb81I/s1600/home.png" />
</a>
</li>
<li>
<a href="http://www.blogger.com/post-create.g?blogID=2703307842430174353#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yEp1-kjTLdaXXKe_fMEb8tteMkY-K239X-EvZbNtNbILdo_oP2Gj-LvQOpiijDtexKOaq2D5PJZHDsSMVF_QaH2AhqmB9PGkFwpBFFDItTKBVacEbHYzqnY-e3wymeLnMLtFCpNtGww/s1600/music.png" />
</a>
</li>
<li>
<a href="http://www.blogger.com/post-create.g?blogID=2703307842430174353#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mJc49aZYs03Y2XsTahFurE3JPXTN5IbgYdvv2kzS7WDMr4XCIHq71MZ4-QeWmDM0zu6YFoTpL3LZe69xyokf81xOgAqAoJsI_MCotCql_ixS1Rc5b5_VgYQ9Y4qhvaQUkfMNurEKvfo/s1600/video.png" />
</a>
</li>
</ul>
</div>

Letaklah kode diatas pada kotak HTML/Javascript!

"X"
|||||||||||||||||| = Link Tujuan
|||||||||||||||||| = Link Gambar <gambar bisa ditukar>