toggle show hide jquery for blogger

Now Friends you can use toggle show hide jquery in blogger footer.you can add this toggle show hide jquery your blog easily. it's really cool.Now I will tell you how to install

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

and

<!--toggle show hide jquery Scripts bdlab.blogspot.com -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.btn-slide&quot;).click(function(){
$(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;); return false;
});
});
</script>
<!-- end toggle Scripts bdlab.blogspot.com -->

Step#2 Now find this line of code

]]></b:skin>

And immediately before it, paste this code:

/* middle */

#panel {
display: none; /* u can erase this if u need show toggle */
}

#middle {
width: 930px;
margin:0 auto;
padding: 0px 40px;
background-color:#E5EECC;
border-bottom: 1px solid #000; }

#middle a { color: #2E3C07; }

#middle a:hover { color: #cccccc; }

.middle1 {
padding:0 8px 8px 0px;
float:left;
width: 280px; }

.middle1 li { padding:5px; }

.middle2 {
padding:0 8px 8px 0px;
float:left;
width: 280px; }

.middle2 li { padding:5px; }

.middle3 {
padding:0 8px 8px 0px;
float:right;
width: 280px;
}

.middle3 li { padding:5px; }








/* toggle */
.slide {
margin : 0 0 5px;
text-align : center;
color: #fff; }

.btn-slide {
margin : 0 auto;
background: #617F10;
-moz-border-radius-bottomleft:0.5em;
-moz-border-radius-bottomright:0.5em;
width : 140px;
height : 20px;
padding : 2px 10px;
display : block; }

Step#3 Now find the bellow code

<div id='footer'>

If you cant find it then try finding this one

<!-- end outer-wrapper -->

If you cant find it then try finding this one

outer-wrapper

If you cant find it then try finding this one

</body>

just before it, paste this code:

<div id='middle'>
<p class='slide'><a class='btn-slide' href='' style='color:#fff'>toggle show hide jquery</a></p>
<div id='panel'>
<div class='middle1'>
<b:section class='middle1' id='middle1' preferred='yes'>
<b:widget id='HTML16' locked='false' title='Recent Posts' type='HTML'/>
</b:section>
</div>
<div class='middle2'>
<b:section class='middle2' id='middle2' preferred='yes'>
<b:widget id='HTML58' locked='false' title='About Me' type='HTML'/>
</b:section>
</div>
<div class='middle3'>
<b:section class='middle3' id='middle3' preferred='yes'>
<b:widget id='HTML60' locked='false' title='Recent Comments' type='HTML'/>
</b:section>
</div><div class='clear'/>
</div>
</div>

Now Click Save Template

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your  toggle show hide jquery widget. For changing colours use our Hex Color Code Chart & Generator   or  Html Color Codes Generator

background:#E5EECC;   Changing the six digit colour code will change the background colour of this widget.

width: 930px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.

width: 280px; is the width of the three columns where the widgets are added. 

background: #617F10;This is the Colour of toggle show hide jquery Title Headings 

#middle a { color: #2E3C07; }Editing this will change the style and colour of the text




..................................................................................................................................
......................................................................................................................................................
..................................................................................................................................


This is an optional step: you can also style this hover effectlink. For this, in your template, search for </head> and paste this code right above it:

<!-- Effectlink Code Start bdlab.blogspot.com -->

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.sidebar a, .menu li, .post-body a, .post h3 a, #middle a, #footer a&#39;).hover(function() { //mouse in
$(this).animate({ opacity: &#39;0.4px&#39; }, 1000);
}, function() { //mouse out
$(this).animate({ opacity: 1 }, 1000);
});
});
</script>

<!-- end effectlink Scripts bdlab.blogspot.com -->

Now Click Save Template