1. Home
  2. jQuery
  3. menus
  4. social media
  5. Widgets
  6. Jquery Sliding Panel Amongst Expanding/Collapsing Content For Blogger

Jquery Sliding Panel Amongst Expanding/Collapsing Content For Blogger

4:30:00 PM
Many times when nosotros mean value virtually creating a blog, nosotros tend to set many gadgets, although many are non necessary, or perchance exclusively a few of them. In social club to add together the gadgets that nosotros want, nosotros need to guide maintain plenty space. Influenza A virus subtype H5N1 solution would endure to work an expanding/collapsing bill of fare that is hidden too expands when the user clicks on it.

Originally, this plugin called Sliding Login Panel was created thence that users could register on the site, but equally nosotros know, inwards Blogger nosotros don't guide maintain the pick to add together user registration, but that doesn't hateful nosotros can't accept wages of this plugin too work it to add together other elements, such equally a menu, search box, social icons, feed subscription etc.


You tin honour a demo of this panel in this blog - simply click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

This sliding bill of fare is made amongst jQuery, thence the commencement affair is to add together the script past times pasting it simply below the <head> tag:

Step 1. From your Blogger dashboard > become to "Template" > click on the "Edit HTML" button:

In social club to add together the gadgets that nosotros desire jQuery Sliding Panel amongst Expanding/Collapsing Content for Blogger

Step 2. Click anywhere within the code surface area too search past times pressing the CTRL + F keys for the <head> tag

Step 3. Below the <head> tag, add together this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

Step 4. Now search (CTRL + F) the </head> tag too add together the CSS styles simply inwards a higher house it:
<style>
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XUl66l2CFkvrXlCb5XUcxxGf4asbcqFkEz24bPqr5KwKvqdKFUW9RC2Cn6VcouNQ1enPUfhVjFmscqfoEH3WhV1l1s36gEuRCjUZZWJrtROXjl07G-yAV0VqOUlSB33hYDUgWZjLHZDo/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaw0FGkDo7Pagq01QBTaGz5_SSZxRsmyWr5fq8v1ZGZDgSOUKQDgpxgQr5DMTJjLMNQSglq7v5NMx2yQm2y9yo_wYDvoJW_GtdM_noo7qhwFTVJ_RdRG2KCXS-CvOutzvTulL8006HQe2z/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0HfyQ4cw0qsaml_7k02cyIc6zdqEL273KPNT9XjlZJVtVmPhrIjsAH23QkbYnkkSH9pTcWMCA_fH3gwcJpmVdJBV-V9cYrdhdC2nUG3_0xnRQ1D03U_o_hKfJj_GejJ5PSJQdFKHSQGW/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwC4JZ5F_UZK8sEVQkxqVyoPyTNqlmjUqX5CxJ90W1TjC613MwZto6TcB-KAwOkeIWmCqXSzYuNEXO-Eqjg8LLvc4lfSkIt5uh8ge8G1foeIY0ygVBV7Nc35Nt4MS0PosJXQp2gWhH4rH/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7zad3ezp7u0RfJL2H1jhi1anPQ8ZL5BdKieKtEocWeFslRATYFOjltjVrHLEaoHZzwaHvghXEulcNXYGWgwkTjxbgHArkVAF-nYEAnV5uA0YhmivFAPuuswy9siOlf-dVtcWoVM3QryK_/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GLVSuALaxWhjUMx_lvVtl-d2PzAW8eltD_pmwKWu75y3DHGN-KNBKPZ2eNvJDMP3sCmJYdIzyDe7zhU1eAYiy7EzwZ46MCMP9BMLaELUFwjmiNPidQQ4PZ2-TMj16m0DOFCR62OwzfFM/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7zad3ezp7u0RfJL2H1jhi1anPQ8ZL5BdKieKtEocWeFslRATYFOjltjVrHLEaoHZzwaHvghXEulcNXYGWgwkTjxbgHArkVAF-nYEAnV5uA0YhmivFAPuuswy9siOlf-dVtcWoVM3QryK_/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GLVSuALaxWhjUMx_lvVtl-d2PzAW8eltD_pmwKWu75y3DHGN-KNBKPZ2eNvJDMP3sCmJYdIzyDe7zhU1eAYiy7EzwZ46MCMP9BMLaELUFwjmiNPidQQ4PZ2-TMj16m0DOFCR62OwzfFM/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px company #333;
}
#panel .content .right {
border-right: 1px company #333;
}
#panel .content shape {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_hbCyJl6kZ8TqS65FbA4s65k2afFBqd72e7CjnKYf5KIZ15nRTWYJDIs3XQDxgyzSZ-mUnOJEJAwBPRNjguqzOFOL4oB-zQgXvNn1gq49s8lFa_nH_WOTDVWfDqA161WE4lBjgn9yny0/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi83NC5YnU51W2Wc2qe5js1UpJ1NTFIWpZvi5un3JopUp1lIrUp4jftGP0HNbnO8lYZ99nXhL4w-uqw86lZFD_l_9EfLa5LSdAK1Kr4pz2iz8Y6avWY0WawbL_BX6lEFawpe1ofxUg72eyN/s1600/star-bullet.png) centre left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s relaxation 0s;
-moz-transition: all 0.7s relaxation 0s;
-o-transition: all 0.7s relaxation 0s;
transition: all 0.7s relaxation 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
</style>
Note:
  • in example you lot need to a greater extent than infinite for your widgets, the peak of the entire container tin endure changed past times modifying the 230px value from height: 230px;
  • To alter the background color, alter this color value: #272727
Step 5. And finally, nosotros volition house the HTML construction of it. Right afterwards the <body> tag, add together this code:
<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- commencement department -->
<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTZ-xVAC-18cZxyo8jKDtH1krduKoEvDB8VcGjlXNYsrEhUuGdMph68TkKfZDEKOPde3vAIzXHH-KASWU2LSjJhMQMSFQiifPtIU6b_LN9BaqgyXeCImqIO8SL4SMAH0_A710W99hyphenhyphenhVV/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>

<!-- minute department -->
<div class='left' style='width:320px !important'>
<h4>Categories</h4>

<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>

<!-- 3rd department -->
<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts past times email. Just larn into your electronic mail below if you lot desire to subscribe!</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>

<div align='center' style="clear: both;">
<a href='http://www.facebook.com/username'><img title="jQuery Sliding Panel amongst Expanding/Collapsing Content for Blogger" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ngC3e_RuoQSLFlfFJYwQwF1JWUYo-GX-A8CgQLmA_xEs92myLXFx99jmUeo6tM1pCY4XLjSbPhyphenhyphenpCJbPVkvvu3ZyNE_9HrHpTaNNrkJsEIFHLw44J2NsOuvEq8xw2s_w1N_3Tt_dyHIM/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="jQuery Sliding Panel amongst Expanding/Collapsing Content for Blogger" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzcqVBM8dk98ma7l9lihl3IBfRG8tfMJJLLoCOrc2WTb03MFGqRMgDCFg_wk_2ZtJsCGI3rCCb_nkYJ6oAxPmaQClX6s9dCjr3PxrChYIGb4g_8IZ8dCU-bK8bPs1MYV_cEGjlD27KsQ2/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="jQuery Sliding Panel amongst Expanding/Collapsing Content for Blogger" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGi6gIwV5rbhkMhTzBdanwYBlxtISsLWwAz0TbarsZY3SJz3M62_l5FIiC6ucar9-_dfE8wWiJrgk-NmtiXj6Kg0RnpDcrMQLJAuR3E5qSrxSP_BiaG2MVdqA7xCe7URew4MW5TXp2IAE/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="jQuery Sliding Panel amongst Expanding/Collapsing Content for Blogger" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8087ySdFITtRM42DAUlO7K6hZ9_6eRHIrMvP2a8N86G2y9YEqFIUFp3rX4ZpCeKMZQn5GP8TbWrtOnEyM0xH8XjqmqNAGA4XFmiAjEbX2cl4MzxUgngiOd_bb9mwRmpkS-qeRYdMaiVEk/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
Note: if you lot can't honour the <body> tag, too then endeavour to honour this one:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Here nosotros guide maintain added the content inwards the sliding panel which volition endure hidden too volition demo on mouse click. In greenish are the names of each department thence it is easier to recognize them.

Note:
  • In the commencement section, you lot tin alter the welcome message, "Meet the author" championship too add together your description past times replacing the text inwards bold. To add together your ain picture, supersede this URL:
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTZ-xVAC-18cZxyo8jKDtH1krduKoEvDB8VcGjlXNYsrEhUuGdMph68TkKfZDEKOPde3vAIzXHH-KASWU2LSjJhMQMSFQiifPtIU6b_LN9BaqgyXeCImqIO8SL4SMAH0_A710W99hyphenhyphenhVV/s1600/profile-pic.png
  • In the minute department you lot guide maintain the categories - in that location add together the URLs of your links past times replacing the addresses inwards blueish too supersede Category 1, 2, 3... amongst the titles that you lot desire to seem for the links.
  • In the 3rd department is the electronic mail subscription - simply supersede the text inwards blueish amongst the cite of your blog's feed. Please authorities annotation that you lot must guide maintain this electronic mail subscription pick enabled inwards your Feedburner account.
  • As for the social icons below, alter the URLs inwards blueish amongst your Facebook too Twitte too add together the URL of your blog's RSS feed address.
Basically, these are the master copy sections that tin endure customized, but nosotros tin take away some of them too glue something else instead.

Step 6. Save the template too that's it! Note that this bill of fare plant amongst jQuery, thence if you lot are already using Scriptaculous, Prototype or Mootools, too then it volition non work.

Hope you'll relish this elegant bill of fare amongst sliding effect, which volition hold off means ameliorate if nosotros remove the Blogger navbar.

Comments

Subscribe to: Post Comments ( Atom )