» » CARA MEMBUAT Fisheye Dock Navigation Menu DI BLOGSOT

CARA MEMBUAT Fisheye Dock Navigation Menu DI BLOGSOT

Ivankgribatako
Add Comment
MENU AND SOCIAL SHARING
Minggu, 03 Januari 2016

Add Fisheye Dock Navigation Menu For Blogger



*  buka blog mu
*  pilih template >>> edit HTTML
*  Cari kode ]]></b:skin>
*  copy kode dibawah dan letakkan diatas kode ]]></b:skin>
div.cap {
 display: block;
 height: 100px; 
 width: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9-TnVrT6BmtUyIiRPcb8LpFejiV-ZfzIlMrCow78YXzJ8U-3Ur1b9Epb6dTlXwIBhp7LTQLj8PuduHAmfkm1RXlLCmGL_v2DJjHJnoymAdVPxW2AJ8VasOvMqZ3GyPcrgP_Qui_FJ0EI/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: right bottom;
 position: absolute; 
 top: 0px;
 right: 0px; }
  
ul.mbl-dock { 
 display: inline-block; 
 height: 130px;
 padding: 0 40px 0 0; 
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9-TnVrT6BmtUyIiRPcb8LpFejiV-ZfzIlMrCow78YXzJ8U-3Ur1b9Epb6dTlXwIBhp7LTQLj8PuduHAmfkm1RXlLCmGL_v2DJjHJnoymAdVPxW2AJ8VasOvMqZ3GyPcrgP_Qui_FJ0EI/s1600/dock-background-left.png) no-repeat right bottom;
 overflow: hidden; 
 margin: 0 0 0 40px; }
  
ul.mbl-dock li { 
 display: block; 
 position: relative;
 float: left;
 width: 50px; 
 height: 50px; 
 margin: 60px 0 4px 0;
 -webkit-transition: 0.15s linear; 
 -webkit-transition-property: -webkit-transform margin;
 text-align: center; }
  
ul.mbl-dock li a {
 display: block;
 height: 50px;
 padding: 0 1px; 
 -webkit-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin; 
 margin: 0;
 -webkit-box-reflect: below 2px
 -webkit-gradient(linear, left top, left bottom, from(transparent),
 color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));}
  
ul.mbl-dock li a img { width: 48px; }
  
ul.mbl-dock li:hover { 
 margin-left: 9px; margin-right: 9px;}
  
ul.mbl-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.5);}
  
ul.mbl-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;}
  
ul.mbl-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.25);}
ul.mbl-dock li span { 
 background:#fff;
 position: absolute; 
 bottom: 80px; margin: 0 auto;
 display: none; 
 width: auto;
 font-family:arial; 
 font-size: 11px;
 font-weight: bold; 
 padding: 3px 6px;
 -webkit-border-radius: 6px; 
 color: #000; }
  
  
ul.mbl-dock li:hover span { display: block; }
  
div#mbldockwraps { 
    position: fixed; 
 bottom: 12px; 
 height: 120px;
 padding: 50px 0 0; 
 text-align: center; 
 -webkit-border-radius: 6px; 
 -moz-border-radius: 6px;
 width: 100%;
 line-height: 1; z-index: 100; }
  
div#macWrap { 
    width: auto; 
 display: inline-block;
 position: relative; 
 border-bottom: solid 2px rgba(255,255,255,.35);
 line-height: 0; }
*  kemudian cari kode </head>
*  copy kode lagi dan letakkan diatas kode </head>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script>
 <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.tipsy.js"></script>
 <script type="text/javascript">
  // Place all Javascript code here
  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"});
    $("ul.mbl-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });

 </script>
*  cari lagi kode </body>
*  copy kode lagi dan letakkan diatas kode </body>
 <div id="mbldockwraps">
<div id="macWrap">  
<div class="cap left"></div>
<ul class="mbl-dock">
<li class="active">
<span>Home</span>
  <a href="http://www.mybloggerlab.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNDPfmzZQ7v7OhPTtUjdlZ-SJjlvoAhVFyltLoolLPmdNGc04DKWHeencdXTb01RhDvK4Z-3BkyKVKYXbWYxE4IyAyL2lbw81LEzJw7CzZk_B8xOuiiU4Ef_9C93IP7JX77L8ztBpsBWY/s1600/MBL_home.png" /></a>
   </li>
   <li>
   
<span>Contact</span>
   <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgajZGxAaJbsav2NOIJJZPoKaMjwDuRuKwG2sNkotk0WUqexMWkh3wOQNSQuAeiiGt9pm9Zagjd1A_R8SowPADaqf7uYIXOKxc_7MvSOniaeo7dbAqy3O1tcL8f2YIPGMLHg9HCc6LKdmM/s1600/MBL_contact.png" /></a>
 </li>
 <li>
<span>About</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr98sYpHBt-7yHIy4rts0PPL-sIgsUmSSfedw0QuEOqbxfXN4xezOADTu-N2Kt6oX_M_d0Ihf9HPL3y4bgV56DY3MRoqEX0-mDH0URUagtN-MCByDjAshTU3tTNlqT0PejD1sY8mWrvQw/s1600/MBL_about.png" /></a>
 </li>
 <li>
     
<span>Search</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bi5gJhhDi4rS4RsfrkSB6OvbyX7opl4TbTjEPPITrP-y_IEJeDeIPLq2oP33gFvsL4oBjn6051fDtlpSOcVeLCet2oGF-5aZFXVnUiAZNIsKoLf1M-FM8YZiOrb7LBVN6Ctp6I3G6NU/s1600/MBL_search.png" /></a>
 </li>
 <li>
     
<span>Feeds</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG63cPry8_Wa-XUVsI3GQtkE_9VzCljx69MZhCVaVmhctZ7_yzXJyhjCWd4XsEmms9gkLHoskVK19sg17Zho2GPDlTLvPBk_hsSnykSYvq7oOerdVNKpsHL5YXy23V9bSlFsiyAKd6O6Q/s1600/MBL_rss.png" /></a>
 </li>
 <li>
<span>Blogger</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfRmjl4pOt7obnmaQIfon0ox5jdWNgZPZNAoM7ZOD_ZDeCps6PGuTh4-_QUrYbYoaxYeOX4A-_LNL9FsYCJ6pb93Y7U1n9joi5iFzteOhQz7wr09DvcF3kT4gMrJqVyaMoBRE02wimH4/s1600/MBL_blogger.png" /></a>
 </li>
 <li>
<span>PAGE</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVlWISrVwcK1jOz43MPdGUgi4rJcVd88580ewftQooL3XPxVVgxBvy69dpMfT4ZX1qSwjZYKxQOvzY_gj4655P0kjT3dLBppGAr5zmZ9bfum7nwnbOeob-SXUb5fmmiQSne-uVJUgqZE/s1600/MBL_FB.png" /></a>
 </li>
 <li>
<span>Twitter</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmAnsQeghJVvWcyiPW7m7i-UrDqy5XJblV_fEt7USjhwzHEJPQRtOqoFFQZrrSH03abZtVsKpVekHOjznC32m-nkLeSE-b0CIsX5_T5pPj2c4r2zJ-I6ni2IvEoAK-sLHtoaxG0FOEYA/s1600/MBL_Twitter.png" /></a>
 </li>
 <li>
 <span>Pin IT</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfU24PMZAXqXVUdDmeN1qwKKQGHEdiDPFOHOHTH0b_2Kl6PVgV_I2O-Zlt11J0eTWhaCfRH7GrzJJFGe3AV_G3LCZAexfU6MItsZb1Kd9dhO3ve7GBgzisO-2SH9hYc5gd4U8o-EeCMbM/s1600/MBL_pin.png" /></a>
 </li>
 <li>
 <span>Google</span>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGna5BekzGhSHfvc6PML8iNHxHzaL6mBba_mYY4CxJjnK4M3TWZWhO0bU6fP3GHLAxRmshG-32xGkyAzoKU3HQg19jb1S9j7DEl4HWEKyrq8ELSiUFWD2wgrMUxe1dfTxE-4X4zY-zQQ4/s1600/MBL_googleplus.png" /></a>
 </li>
 </ul>
 </div>
 </div>
>>> CATATAN <<<
        { Ganti warna merah dengan url social share mu }
{ terakhir silahkan di save template }

 ###  GOOD  LUCK  GUYS  ###

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)