Add Cloud LIke Vertical Navigation Widget For Blogger

Add a cloud like navigation widget for blogger. This is quite different navigation widget for blogger. Previously I have made an article on cloud like label widget for blogger. This is similar to it, but that’s label and this is for navigation. You can manually add this beautiful vertical navigation widget for blogger. So I have given a link to live demo also do check it.

ALSO READ :   7 BEAUTIFUL NAVIGATION WIDGETS FOR BLOGGER

 

  1. Login into Blogger
  2. Select your blog if you have many
  3. Goto TEMPLATE –> EDIT HTML
  4. Copy the below and paste above </head>
  5. And click on save template

 

<style media=’screen’ type=’text/css’>
#link{
margin:0 auto;
height:200px;
width:200px;
overflow:hidden;
position:relative;
background:transparent;}
#link ul,
#link li{
link-style:none;
margin:0;
padding:0;}
#link a{
position:absolute;
text-decoration: none;
color:#666;
font-size:20px;}
#link a:hover{
color:#ccc;}
</style>
<script charset=’utf-8′ src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
var element = $(‘#link a’);
var offset = 0;
var stepping = 0.02;
var link = $(‘#link’);
var $link = $(link)
$link.mousemove(function(e){
var topOflink = $link.eq(0).offset().top
var linkHeight = $link.height()
stepping = (e.clientY – topOflink) / linkHeight * 0.2 – 0.1;
});
for (var i = element.length – 1; i >= 0; i–)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 20);
function render(){
for (var i = element.length – 1; i >= 0; i–){
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 – Math.sin(angle) * 40);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($link.width()/2) * x / 100 – elementCenter) + “px”
$(element[i]).css(“opacity”,size/100);
$(element[i]).css(“zIndex” ,size);
$(element[i]).css(“left” ,leftValue);
$(element[i]).css(“top”, y + “%”);
}
offset += stepping;
}
});
</script>

How to add html or javascript code in blogger

 

  1. Then migrate to LAYOUT –> Click on “Add A Gadget
  2. You get a windows open then find for HTML / JAVASCRIPT and click “+” button
  3. Then copy the below code and paste it there and make your editing.
  4. Then click on save.
  5. You may now visit your blog and have fun.

 

<div id=”link”>
<ul>
<li><a href=”#“>Css</a></li>
<li><a href=”#“>Design</a></li>
<li><a href=”#“>Firefox</a></li>
<li><a href=”#“>Html</a></li>
<li><a href=”#“>Chrome</a></li>
<li><a href=”#“>jquery</a></li>
<li><a href=”#“>PHP</a></li>
<li><a href=”#“>SEO</a></li>
<li><a href=”#“>Page</a></li>
<li><a href=”#“>Web</a></li>
<li><a href=”http://bloggerbulk.com/”>Add This</a></li>
</ul>
</div>
<br />
<br />

 

Customization :

Replace all # in the above code with your links. If want to add a new link use this <li><a href=”#”>New Link</a></li>

ALSO READ :  ALL OUR BLOGGER WIDGETS DON’T MISS THEM

HAPPY BLOGGING

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Leave a Reply