This is the simple shuffle effect of the JQuery, you can see the live demo just in the buttom of this page.
You must be thinking to put the same effect in your blog also right ? Now i am going to tech you that how to put this effect in the blog.
1. First of all login to your blogger account and then click on Layout then Edit HTML.
2. Now search for ]]></b:skin> and paste this code :
body {
font: 12px Verdana,Arial, Helvetica, sans-serif;
margin: 10px auto;
width:350px;
}
.container {
width:312px;
margin-top:20px;
}
.msg_body {
border:1px solid #CCCCCC;
padding: 5px;
width: 300px;
background-color:#F4F4F8;
text-align:justify;
position:absolute;
}
.linkclass
{
font-weight:bold;
color:#006699;
}
font: 12px Verdana,Arial, Helvetica, sans-serif;
margin: 10px auto;
width:350px;
}
.container {
width:312px;
margin-top:20px;
}
.msg_body {
border:1px solid #CCCCCC;
padding: 5px;
width: 300px;
background-color:#F4F4F8;
text-align:justify;
position:absolute;
}
.linkclass
{
font-weight:bold;
color:#006699;
}
Now, its time to paste the javascript code.
Paste the following code just after the ]]></b:skin>
<script src='http://roshanbh.com.np/examples/block-shuffle/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked
$("a.linkclass").click(function()
{
//check weather the visible block and clicked link's block is same or different
if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
{
//reduces the z-index and margin of left side increased and decreased by 400px and hide
$(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
//increase the z-index of the new visible block
$($(this).attr("href")).css("z-index","10").fadeIn(400);
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function()
{
//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked
$("a.linkclass").click(function()
{
//check weather the visible block and clicked link's block is same or different
if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
{
//reduces the z-index and margin of left side increased and decreased by 400px and hide
$(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
//increase the z-index of the new visible block
$($(this).attr("href")).css("z-index","10").fadeIn(400);
}
});
});
</script>
Now Save Template.
Goto Page Elements sub-tab
Click Add a gadget Then select HTML/JAVASCRIPT then Paste the below code
<a href="#xp" class="linkclass">Xp </a>
<a href="#vista" class="linkclass">Vista</a>
<a href="#messenger" class="linkclass">Messenger</a>
<a href="#software" class="linkclass">Softwares</a>
<div class="container">
<div id="xp" class="msg_body"> <b>XP</b><br/><br/>
<b>System Shutdown</b><br/>
The error message came "System Shutdown" Worried about this ? you can stop this unwanted message. you can Go to Start → Run → type Shutdown -a there. This stops the message which comes there and it will stop the shutdown. If this message comes many times in your computer and if u feel lazy going to the run and typing then you can right-click on the desktop then select new → Shortcut → type Shutdown -a there and click on next lastly...<a href="http://comsguru.blogspot.com/2009/12/system-shutdown.html"><div class="more">
MORE</div></a>
</div>
<div id="vista" class="msg_body"> <b>Vista</b><br/><br/>
<b>Can I dual-boot Windowx XP and Vista ?</b><br/>
Few Months ago the windows vista's public release hence compatibility issue with system drivers and software are to be expected, i.e. your favorite games or image editor may not work on vista yet. Fortunately, you can have both Windows XP and windows vista on the same computer, by setting up your PC to dual-boot. Assuming that Windows XP is installed first, creat new partation on hard drive Right-Click on My Computer and choose Manage...<a href="http://comsguru.blogspot.com/2009/10/can-i-dual-boot-windowx-xp-and-vista.html"><div class="more">
MORE</div></a>
</div>
<div id="messenger" class="msg_body"> <b>Messenger</b><br/><br/>
<b>Find who is invisible in Gtalk :</b><br/>
Many people now a dayz become invisible in the messenger but they are online. Today in the morning also i was online on the Gtalk but i found my friend was offline. Actually he was online but he was invisible. I came to know that thing after the friend told me later. One of my friend told that there is way to find who is online in Gtalk :1. If you get hte message that " The user is offline and can’t receive messages right now " then your...<a href="http://comsguru.blogspot.com/2009/10/find-who-is-invisible-in-gtalk.html"><div class="more">
MORE</div></a>
</div>
<div id="software" class="msg_body"> <b>Softwares</b><br/> <br/>
<b>Realtek AC'97 Driver A4.06</b><br/>
Realtek Drivers and codecs for Realteks series of audio chipsets for motherboards. The package includes: Driver/Application Setup Program RtlRack for Win98/Me/2000/XP and AvRack for Win95/NT4 Realtek Sound Effect Manager (DirectX 8 is required to enable advanced features.) Download...<a href="http://comsguru.blogspot.com/2009/11/realtek-drivers-and-codecs-for-realteks.html"><div class="more">
MORE</div></a>
</div>
</div>
You can modify the content as your wish ;)<a href="#vista" class="linkclass">Vista</a>
<a href="#messenger" class="linkclass">Messenger</a>
<a href="#software" class="linkclass">Softwares</a>
<div class="container">
<div id="xp" class="msg_body"> <b>XP</b><br/><br/>
<b>System Shutdown</b><br/>
The error message came "System Shutdown" Worried about this ? you can stop this unwanted message. you can Go to Start → Run → type Shutdown -a there. This stops the message which comes there and it will stop the shutdown. If this message comes many times in your computer and if u feel lazy going to the run and typing then you can right-click on the desktop then select new → Shortcut → type Shutdown -a there and click on next lastly...<a href="http://comsguru.blogspot.com/2009/12/system-shutdown.html"><div class="more">
MORE</div></a>
</div>
<div id="vista" class="msg_body"> <b>Vista</b><br/><br/>
<b>Can I dual-boot Windowx XP and Vista ?</b><br/>
Few Months ago the windows vista's public release hence compatibility issue with system drivers and software are to be expected, i.e. your favorite games or image editor may not work on vista yet. Fortunately, you can have both Windows XP and windows vista on the same computer, by setting up your PC to dual-boot. Assuming that Windows XP is installed first, creat new partation on hard drive Right-Click on My Computer and choose Manage...<a href="http://comsguru.blogspot.com/2009/10/can-i-dual-boot-windowx-xp-and-vista.html"><div class="more">
MORE</div></a>
</div>
<div id="messenger" class="msg_body"> <b>Messenger</b><br/><br/>
<b>Find who is invisible in Gtalk :</b><br/>
Many people now a dayz become invisible in the messenger but they are online. Today in the morning also i was online on the Gtalk but i found my friend was offline. Actually he was online but he was invisible. I came to know that thing after the friend told me later. One of my friend told that there is way to find who is online in Gtalk :1. If you get hte message that " The user is offline and can’t receive messages right now " then your...<a href="http://comsguru.blogspot.com/2009/10/find-who-is-invisible-in-gtalk.html"><div class="more">
MORE</div></a>
</div>
<div id="software" class="msg_body"> <b>Softwares</b><br/> <br/>
<b>Realtek AC'97 Driver A4.06</b><br/>
Realtek Drivers and codecs for Realteks series of audio chipsets for motherboards. The package includes: Driver/Application Setup Program RtlRack for Win98/Me/2000/XP and AvRack for Win95/NT4 Realtek Sound Effect Manager (DirectX 8 is required to enable advanced features.) Download...<a href="http://comsguru.blogspot.com/2009/11/realtek-drivers-and-codecs-for-realteks.html"><div class="more">
MORE</div></a>
</div>
</div>
Thankx [Roshan Bhattarai]
Drop the comment of you have any problem.
:))
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
:)]
~x(
:-t
b-(
:-L
x(
=))
Hey, thankx man
Posted on January 3, 2010 at 6:35 PMThis is cool trick.