Floating Vertical Animated Dock Pop Up on Click For Blogger Blogspot

Add Beautiful animated dock to your blogger blog.It is a floating type (ie.it scrolls with the page) vertical dock.Just have look in Demo link below.It can be used as a navigation menu Or you can also add social bookmark icons in it.

Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.

Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!
  

Installation:



Step 1: Login to Blogger
In subcategory Click Layout Then Click EDIT HTML

Step 2: Now check Check Mark Expand Widgets.Now Press Press Ctrl+F To find ]]></b:skin>

Step 3: Copy then Paste below code Before or Above ]]></b:skin>

.stack { position: fixed; bottom: -5px; right: 40px; }.stack > img { position: relative; cursor: pointer; padding-top: 28px; z-index: 2; }.stack ul { list-style: none; position:absolute; top: 5px; cursor: pointer; z-index: 1; }.stack ul li { position: absolute; }.stack ul li img { border: 0; }.stack ul li span { display: none; }.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;display:block;height: 0px;position:absolute;top: 17px;right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;border-radius: 10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;color: #4F3939;text-align: center;text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

You can Change above RED figure to change position on screen

Step 4: Now click Layout Then on Page Element Click Add a gadget

Step 5: Select HTML/JAVE Paste below code then Save it

<div class="stack">    <img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png"/>    <ul id="stack">        <li><a href=""><span>Aperture</span><img alt="Aperature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-8n6XIp8Xp95r8AoNth8VYTcxHu412bDfYmglt33lcXESAZ0flRRYRZ1ZajvBM4Wv86NvjJA-MxjhoJoTSqvblMs705EraavOnk87Giaw3WA2HO_F5cZKWH_Igk8Y00deVVX1U34FXo/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-8n6XIp8Xp95r8AoNth8VYTcxHu412bDfYmglt33lcXESAZ0flRRYRZ1ZajvBM4Wv86NvjJA-MxjhoJoTSqvblMs705EraavOnk87Giaw3WA2HO_F5cZKWH_Igk8Y00deVVX1U34FXo/s320/facebook.png"/></a></li>        <li><a href="#"><span>qqq</span><img alt="Photoshop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGomIxU-Gti_KioyKVXnguvRKtL0nCdUiTj6XcHv28ugzIHNfewyhwwpDC_WujmiF2x_-uIzN9nhZOn_Dg94VTvdBoO3M8t87V5ZzXHzK2EJu-idkjZdU6cqn3UhEPtvFv9ORphe8MWA/s320/stumbleupon.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGomIxU-Gti_KioyKVXnguvRKtL0nCdUiTj6XcHv28ugzIHNfewyhwwpDC_WujmiF2x_-uIzN9nhZOn_Dg94VTvdBoO3M8t87V5ZzXHzK2EJu-idkjZdU6cqn3UhEPtvFv9ORphe8MWA/s320/stumbleupon.png"/></a></li>        <li><a href="example3.html"><span>www</span><img alt="Safari" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZ9G4r1QlgPepuqhCeXLaeRv91WMq-7yMzw9Pyt6TSN_HoNgB7RRjFBBA1ox_fo4A_KrOphf2MK9EdJOFO81OGAVxlX0Gqq8A8Uuzmhp4IztaZI8trVkPy9kAzAcZkLzgh6l0Y-xXVLc/s320/digg.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZ9G4r1QlgPepuqhCeXLaeRv91WMq-7yMzw9Pyt6TSN_HoNgB7RRjFBBA1ox_fo4A_KrOphf2MK9EdJOFO81OGAVxlX0Gqq8A8Uuzmhp4IztaZI8trVkPy9kAzAcZkLzgh6l0Y-xXVLc/s320/digg.png"/></a></li>        <li><a href="example2.html"><span>eee</span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_mz91ZUjeJqoeo5LsBfafNyYc1oB5kqyLRbUJ2r3IP25WMeLfqtkRwoGtLNBG2A-ZVgkag0dl-oTz4foOP3hiZJ15rmpA-v9-a-WZy2HgKzMBAI-arf-QPTCcxFVVQ3Ylk8XDh_Har8/s320/technorati.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_mz91ZUjeJqoeo5LsBfafNyYc1oB5kqyLRbUJ2r3IP25WMeLfqtkRwoGtLNBG2A-ZVgkag0dl-oTz4foOP3hiZJ15rmpA-v9-a-WZy2HgKzMBAI-arf-QPTCcxFVVQ3Ylk8XDh_Har8/s320/technorati.png"/></a></li>        <li><a href="index.html"><span>ttt</span><img alt="delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcFEo8SSLgfp6Poc3hBbRT5UcGKzWj7wZA7L7hlSgq2iA6XOtghb_G9X4dtQ-F0KDwWE7RRGs6JMEcA2GEQijG8yqWY2byssRwRbEgOTt3dE8BUan_tklE5R-qGq9COYLbwSZ91elFZk/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcFEo8SSLgfp6Poc3hBbRT5UcGKzWj7wZA7L7hlSgq2iA6XOtghb_G9X4dtQ-F0KDwWE7RRGs6JMEcA2GEQijG8yqWY2byssRwRbEgOTt3dE8BUan_tklE5R-qGq9COYLbwSZ91elFZk/s320/delicious.png"/></a></li><li><a href="example2.html"><span>eee</span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLr8_TiX0oG0tXJVm2eoij0zPdbMoOGCfH9f7FFayGTxCF4qk8TTVrtnelCJLL77O9_0-N78JqhK4dIWzOzLQ4oKAI_Tvv3f7zADKA-UrnlWUDjv7wRDdbOP2wD5uwitwON5drkKCVmgg/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLr8_TiX0oG0tXJVm2eoij0zPdbMoOGCfH9f7FFayGTxCF4qk8TTVrtnelCJLL77O9_0-N78JqhK4dIWzOzLQ4oKAI_Tvv3f7zADKA-UrnlWUDjv7wRDdbOP2wD5uwitwON5drkKCVmgg/s320/twitter.png"/></a></li>             </ul></div><!-- end div .stack --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://files-teckzest.bravehost.com/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Don't change RED Image above its the Bucket you will lost its Design It you change it : )

Now Save and enjoy Docking.

Credits : Author: Jarel Remick Distributed for Blogger Blogger Plug n Play