Jquery Sliding Panel Alongside Expanding/Collapsing Content For Blogger
Many times when nosotros intend virtually creating a blog, nosotros tend to lay many gadgets, although many are non necessary, or perchance entirely a few of them. In club to add together the gadgets that nosotros want, nosotros ask to cause got plenty space. H5N1 solution would last to utilization an expanding/collapsing card that is hidden together with 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 cause got the selection to add together user registration, but that doesn't hateful nosotros can't accept wages of this plugin together with utilization it to add together other elements, such equally a menu, search box, social icons, feed subscription etc.
You tin strength out detect a demo of this panel in this blog - but click on the Open menu link on the top.
Step 1. From your Blogger dashboard > teach to "Template" > click on the "Edit HTML" button:
Step 2. Click anywhere within the code expanse together with search yesteryear pressing the CTRL + F keys for the <head> tag
Step 3. Below the <head> tag, add together this script:
Step 4. Now search (CTRL + F) the </head> tag together with add together the CSS styles but higher upward it:
Note:
Step 6. Save the template together with that's it! Note that this card industrial plant amongst jQuery, thence if you lot are already using Scriptaculous, Prototype or Mootools, together with then it volition non work.
Hope you'll taste this elegant card amongst sliding effect, which volition hold back agency amend if nosotros remove the Blogger navbar.
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 cause got the selection to add together user registration, but that doesn't hateful nosotros can't accept wages of this plugin together with utilization it to add together other elements, such equally a menu, search box, social icons, feed subscription etc.
You tin strength out detect a demo of this panel in this blog - but click on the Open menu link on the top.
Adding the jQuery Expand/Collapse Slider Panel to Blogger
This sliding card is made amongst jQuery, thence the starting fourth dimension affair is to add together the script yesteryear pasting it but below the <head> tag:Step 1. From your Blogger dashboard > teach to "Template" > click on the "Edit HTML" button:
Step 2. Click anywhere within the code expanse together with search yesteryear 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() {
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>
Step 4. Now search (CTRL + F) the </head> tag together with add together the CSS styles but higher upward it:
<style>Note:
.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/AVvXsEgZIy3FJfNI_79eryouOX2bWd729ASPrtyBp4z4HFB9HKBIORJ2Pd6Vy8NB9jryGxQasEk2tabskARqlGeqQzDC0GJOojFnqVBOXXI6gfgadUArGKybBBNr1_IfP0ni2AaOYY93d3l29DiG/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/AVvXsEhjCRqPdljs70V22qi9R7EGskxeGLCdKPWAEYHQGloFcfqtnwXVnc2QyIFFjVxjoM6eE91T8eVSRNv33hZgosrfTsYmZ6ORNyXRbK31W_OlvEwq2N0ZdzrwtxiAUGyt2Hi0OffKyrvq1dnU/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/AVvXsEh6ysusMV-biS_M7WyIhenaZG1QK4QeIh9CJAjdyrFlRxg9RjbyKVxEUrQMerTBx3fzuSUD8zeKCBsMoa7isOn3TcelxBSIvViejAdCKxXSjoYVu0YLlzMFuJeHR1_rfuvJlq_9asZROlxt/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/AVvXsEgqQdKOth-rLjUaMiMaH_4Z0uXv0IxarA12JVpCNGhZGE7MhHOL2LqY9gGZ0rHmHnDQDBm9EZ49gaYrRDbNSrqHudwhkYbdERVZbPvxI5_ZY8uenmzGEsq3OiCutCasDOODO-oZxlcm0O9M/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/AVvXsEiVuAS5lG7hD54TyrqvCZTyMC4AhAgN1GatgmyhmxlLc-e3F2PagY955S7P83PySmxGFUPuG-RsSODoT67g_SQOC9PbT0dJwlJpEu7ajGnCkgYmEULFumUpEaGMtjEor6JqxGk0MkcDgWyA/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxcKB6qxIwioxShyphenhyphenCScgSV4TH8-BYzGWhGOpw7s5ouk0y37XcRDTRyq8yMQ8G4r6GpyzVfmlxR4sVo4st0JHUixYpeBqjv0q3GjtRorEygBkuShDEQQS7JQAKgOJj5i1Pl50bAbFaCvp3/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuAS5lG7hD54TyrqvCZTyMC4AhAgN1GatgmyhmxlLc-e3F2PagY955S7P83PySmxGFUPuG-RsSODoT67g_SQOC9PbT0dJwlJpEu7ajGnCkgYmEULFumUpEaGMtjEor6JqxGk0MkcDgWyA/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxcKB6qxIwioxShyphenhyphenCScgSV4TH8-BYzGWhGOpw7s5ouk0y37XcRDTRyq8yMQ8G4r6GpyzVfmlxR4sVo4st0JHUixYpeBqjv0q3GjtRorEygBkuShDEQQS7JQAKgOJj5i1Pl50bAbFaCvp3/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 enterprise #333;
}
#panel .content .right {
border-right: 1px enterprise #333;
}
#panel .content cast {
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/AVvXsEg7Du3HpNWPZP0zEWahFt8JZosaDatKc-NB2v5e3BHSILSrypznbP5bNJbvW3MC_IgCIJawsFza_IQyCEphMacs8c46Dxk_nOQ0CyavG3vkvTiq3ZtJeQ1PGycqiPNv-_PomenzK5aYBJjJ/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/AVvXsEh4f-ROhsgBaPYxn_aXvC56q6_Bk4EEJcOn8DIY5B1J1Z4doqagyWas5L3_W8_2CeCmuLcUcvusxk3o7oZ6z9LIbym7f62iKJU9YvfNbiDgXiMgB9dcWaIIBpOgzY6rh_SarD9eq3mzBa_D/s1600/star-bullet.png) middle 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>
- in representative you lot ask to a greater extent than infinite for your widgets, the summit of the entire container tin strength out last changed yesteryear modifying the 230px value from height: 230px;
- To modify the background color, modify this color value: #272727
<!-- Start sliding panel -->Note: if you lot can't detect the <body> tag, together with then essay to detect this one:
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
<!-- starting fourth dimension 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/AVvXsEiaStsP4ZAzg3YQxqtIYeUeTwNDtK-cLWYn_6QIWStEpDONGEndULFwp0gsVKU2JjtzRZCZD3y-X3uraWloYH45BKRzx0iyFyrRQ89JIAVOAEAerkywu4jCjHeuKYsQjddJok_8XuUPSc38/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>
<!-- tertiary department -->
<div class='left right' align="center">
<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts yesteryear email. Just come inwards 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/AVvXsEiksLoKV5n7BuILBJWEbOiSdrWCYHetZLoJfcR9JTB1XFJQ463_L-29VRmRO_alrQr2WhPb20Tfuygr8u_1PyyjohTIyXYlJ85LdZjg0ACZuHychozS_9yj5Vs3McOHIXBrk9ZvHogldjwp/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/AVvXsEhTkz6nrWvZEedT-42LUiODgdDYkxjgJnCuk7xkdDmUEWYpIlKSE1YEBmPUOk975ftUN6btNI-DO9U-VkCNhVa5fopYEp-dMK8lqRJctDInUCFE1JsD8yjzdo69CIhEK3B93c3Nf0qIhvuf/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/AVvXsEg0MkXigAcq0ff8nY8fX2g_4EU8UH-4got0gVEYztujDfIiAWlS6LjczrMCS5K7Qxv4npAQo-1k8lIer5cTs-WNFDjUrjJHCUEBfTgYMxo7-oM_vi_20Da1z14qofPr9pRe4Kd77fmcvEG7/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/AVvXsEhE7XHWi0j7mlXfBwzQC-yygwHpBFjBUtNYfBQWU6LgJimY0n_Inl7kyop4DcLdCddRS_YUSMZrPMzzbn34WJLLkIhWO9rylgqo53LYlk7ulNENM4c5OUGUl9YrTg0-rn8QZP5x3GNSbmsG/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>
<body expr:class='"loading" + data:blog.mobileClass'>Here nosotros cause got added the content inwards the sliding panel which volition last hidden together with volition present on mouse click. In light-green are the names of each department thence it is easier to recognize them.
Note:
- In the starting fourth dimension section, you lot tin strength out modify the welcome message, "Meet the author" championship together with add together your description yesteryear replacing the text inwards bold. To add together your ain picture, supersede this URL:
- In the minute department you lot cause got the categories - at that spot add together the URLs of your links yesteryear replacing the addresses inwards bluish together with supersede Category 1, 2, 3... amongst the titles that you lot desire to look for the links.
- In the tertiary department is the electronic mail subscription - but supersede the text inwards bluish amongst the get upward of your blog's feed. Please banking concern complaint that you lot must cause got this electronic mail subscription selection enabled inwards your Feedburner account.
- As for the social icons below, modify the URLs inwards bluish amongst your Facebook together with Twitte together with add together the URL of your blog's RSS feed address.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaStsP4ZAzg3YQxqtIYeUeTwNDtK-cLWYn_6QIWStEpDONGEndULFwp0gsVKU2JjtzRZCZD3y-X3uraWloYH45BKRzx0iyFyrRQ89JIAVOAEAerkywu4jCjHeuKYsQjddJok_8XuUPSc38/s1600/profile-pic.png
Step 6. Save the template together with that's it! Note that this card industrial plant amongst jQuery, thence if you lot are already using Scriptaculous, Prototype or Mootools, together with then it volition non work.
Hope you'll taste this elegant card amongst sliding effect, which volition hold back agency amend if nosotros remove the Blogger navbar.
