How to Show Random or Auto Rotate Display Links/Text Using jQuery CSS in Blogger

In this post we are going to create a small place/space on our website which will display links or text one by one in a cute manner using jQuery and CSS.It can be used to display hot content of your site,links to popular posts or recent posts or blog rolls etc.We can add Simple text,Links,Images to it.Before Installation have a look its Demo.

View Demo

The text used in demo is bigger than tutorial(Its adjustable:)

Installation :



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!

Step 1:(HTML)

This HTML part will be used where you want to show Thumbnails / Images .Just use Below Format of code where you want to shoe Image on link hover

<ul id="tips">
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/zoom-image-to-original-full-size-on.html">Zoom or Magnify Image to Original Full Size On Click Using jQuery In Blogger</a></li>
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/crt-disturbance-on-image-burn-that.html">CRT Disturbance on Image ? Burn That Entena - Image Effect</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3BTsCLdQ8gp16zkH71gP6hGeJE1w2X4ZRS4Xafl6Sk0EafA1cwemB6FocRkM4g_ShUSB_VzhCros-d8nFPUa5HHYMV3plB9atUP-x0HqGDWp4Sp-BS0CLCLkzFiWfnfvQmW_0WjkHomM/s400/BLOGGER+PLUG+N+PLAY.png"/></li>
<li><a href="http://bloggerplugnplay.blogspot.com/2009/10/show-imagethumbnail-tooltip-popup-on.html">Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.</a></li>
<li>Signature Image Below Every Post of Blogger based Blog
</li>
</ul>

Step 2:(Javascript)


Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>

Paste the below code Below ]]></b:skin> code

<script src='http://teckzest.bravehost.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>

this.randomtip = function(){
var length = $(&quot;#tips li&quot;).length;
var ran = Math.floor(Math.random()*length) + 1;
$(&quot;#tips li:nth-child(&quot; + ran + &quot;)&quot;).show();
};

$(document).ready(function(){
randomtip();
});

</script>
<script type='text/javascript'>

this.randomtip = function(){

var pause = 3000; // define the pause for each tip (in milliseconds)
var length = $(&quot;#tips li&quot;).length;
var temp = -1;

this.getRan = function(){
// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
// to avoid repeating
while (ran == temp){
    ran = getRan();
};
temp = ran;
$(&quot;#tips li&quot;).hide();
$(&quot;#tips li:nth-child(&quot; + ran + &quot;)&quot;).fadeIn(&quot;fast&quot;);
};

show(); setInterval(show,pause);

};

$(document).ready(function(){
randomtip();
});

</script>

Step 3:(CSS)


Now comes the CSS part


Find ]]></b:skin>


Paste below code ABOVE ]]></b:skin>

#tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:250px;
font-size:16px;
line-height:120%;
}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* hide the items at first only */
}

Now Save your template.


Its Done !

Please comment to say hi =)

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play