Simple Slide Effect On Blogger Using Jquery

I've got another interesting tutorial using jQuery - four in a row. However, it's very important to note that all these effects are possible with the inclusion of one single jQuery file on your template which means no additional time to load your site. In this article, I'll teach you another simple slide effect or in other words, an up/down slide panel effect using jQuery. Take a look at the demo below...

SLIDE PANEL EFFECT ON BLOGGER USING JQUERY - LIVE DEMO

Interesting? Well, I have implemented the hack within the article on the demo blog whereas you can implement the same anywhere on your blogger template. Few examples include adding it to the sidebar with facebook like box, adding the hack to wrap the featured section, add the effect below your articles to show the share icons/author info widget, etc... So, let's get started.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://lh3.googleusercontent.com/-D9jcONOXd-Y/Ti-2VLRfmII/AAAAAAAABYU/NaQTyuOAnpo/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://lh5.googleusercontent.com/-t8bcqIqAylk/Ti-2VtdLOAI/AAAAAAAABYg/VvElRnH_e4Y/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

Note: You may replace the color code highlighted in blue to change the background of the panel. Similarly, the text color by varying the code highlighted in green. To change the height of the panel, vary the code highlighted in orange. You can also change the color of the slide button by varying the URL highlighted in pink. We have provided six different buttons below. Pick one from the slot that interests you!

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor (or) on your template. Replace YOUR CONTENT HERE with any content you want - it can be a script or an image or a link, anything under the earth... lol....

<div id="panel">
YOUR CONTENT HERE
</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post with codes mentioned in step 5 and you're done!

The above slide panel effect was tested to work on all major browsers - IE, Firefox, Chrome, Opera. We are happy to inform our readers that some of my design articles have started to appear on the famous design site - Design News. I hope we'll be able to provide such quality articles in the future as well! Share your opinions via comments!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Born to Trade said on July 28, 2011 at 7:16 PM :

Dear,
On Demo page,there's impressive hover image effect, Please share tip on how to apply it
Thanks a lot.

Mukund said on July 29, 2011 at 12:17 AM :

@Born to Trade: Well, I guess you are asking about the pop out details effect on image hover. Right? I'll soon publish an article about the same on my blog! So, stay tuned:)

Born to Trade said on July 29, 2011 at 12:50 PM :

Thanks, have you posted about lightbox or prettyphoto image slide effect ?

Mukund said on July 29, 2011 at 6:43 PM :

@Born to Trade: Well, I have few articles coming up about light-box effects on my blog! You need to wait a little bit! Anyway, thanks for the comment buddy!

Jaypei said on August 2, 2011 at 7:12 AM :

can this be applied to wordpress blog?And all your tutorials are they for wordpress blogs or bloggers blog or both..very nice tutorial

Mukund said on August 2, 2011 at 11:41 AM :

@Jaypei: Well, I post article specifically for blogs on blogspot/blogger. However, the same can be applied to WordPress blogs provided you know a little bit of php to modify the same code and get it work on WP. Thanks for the comment buddy!

Aditya Samitinjay said on August 5, 2011 at 12:23 AM :

Hey Mukund,

Thanks for this! Implemented it on my blog, but I have a problem, You may want to check it out at http://likelitelife.blogspot.com/p/about-us.html. I cannot tell you what the problem is, so it's better if you take a look!

Aditya Samitinjay

Mukund said on August 5, 2011 at 12:41 AM :

@Aditya Samitinjay: Well, the problem is pretty simple! Login to your dashboard and edit the post where the slider is installed. Now, look for the href tag for the slide icon. You'll notice some stuff like "blogger.com?post...."! Just remove that stuff and add a '#' tag as the value to the attribute href! That's it! Your problem solved!

SakeT KumaR said on August 27, 2011 at 5:41 PM :

i modified the image to have round corners with transparent effect and replaced the original image....its extension wz changed frm .gif to .png.......but when i am clicking on the sidebar button which is visible before clicking; after clicking it it doesn't show...please help!!!!

Mukund said on August 27, 2011 at 10:57 PM :

@SakeT KumaR: Sure! Just ping me on gtalk or email me stating what your problem is - probably with a screen shot and I'll help you out:)

Lee Peace said on September 5, 2011 at 8:19 PM :

This is an impressive tip! Thanks for your share.

Mukund said on September 5, 2011 at 11:36 PM :

@Lee Peace: Yup! Thanks for the comment! I hope you enjoy the other tutorials on my blog as well!

Lee Peace said on October 11, 2011 at 8:58 PM :

@Mukund Can I set height for each post? For example, in post 1, I want to set height: 450px, in post 2, I want to set height: 550px?

Mukund said on October 11, 2011 at 11:25 PM :

@Lee Peace: Yes! You can do that! You need to repeat the CSS with different id so that each has a different height. A little modification in the coding will do good:)

Lee Peace said on October 12, 2011 at 5:12 PM :

@Mukund Thanks for your reply! I love your tips so much.

Lee Peace said on October 12, 2011 at 5:27 PM :

@Mukund Can you give me an example? Although I use different ID, it doesn't work.

Mukund said on October 17, 2011 at 1:59 AM :

@Lee Peace: I guess I can explain stuffs better via email or chat! I would be happy if you can contact me via email stating your problem! I ll try to provide a solution after testing it on my demo blog:)

manu said on October 24, 2011 at 11:00 PM :

how can I put the button on top of the page?

Mukund said on October 24, 2011 at 11:58 PM :

@manu: Place the codes just at the opening of body tag so that it appears on top! Need further help? Then, hit me via gmail!

Венцислав Сотиров said on January 13, 2012 at 9:41 PM :

This lesson does not work in my template?

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT