Jquery Sliding Panel Alongside Expanding/Collapsing Content For Blogger
Wednesday, February 12, 2020
Edit
Many times when nosotros intend close creating a blog, nosotros tend to set many gadgets, although many are non necessary, or maybe alone a few of them. In gild to add together the gadgets that nosotros want, nosotros demand to receive got plenty space. Influenza A virus subtype H5N1 solution would endure to usage an expanding/collapsing card that is hidden in addition to expands when the user clicks on it.
Originally, this plugin called Sliding Login Panel was created hence that users could register on the site, but equally nosotros know, inwards Blogger nosotros don't receive got the pick to add together user registration, but that doesn't hateful nosotros can't accept wages of this plugin in addition to usage it to add together other elements, such equally a menu, search box, social icons, feed subscription etc.
You tin uncovering a demo of this panel in this blog - merely click on the Open menu link on the top.
Step 1. From your Blogger dashboard > larn to "Template" > click on the "Edit HTML" button:
Step 2. Click anywhere within the code expanse in addition to 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 in addition to add together the CSS styles merely higher upwardly it:
Note:
Step 6. Save the template in addition to that's it! Note that this card industrial plant amongst jQuery, hence if y'all are already using Scriptaculous, Prototype or Mootools, hence it volition non work.
Hope you'll bask this elegant card amongst sliding effect, which volition await agency improve if nosotros remove the Blogger navbar.
Originally, this plugin called Sliding Login Panel was created hence that users could register on the site, but equally nosotros know, inwards Blogger nosotros don't receive got the pick to add together user registration, but that doesn't hateful nosotros can't accept wages of this plugin in addition to usage it to add together other elements, such equally a menu, search box, social icons, feed subscription etc.
You tin uncovering a demo of this panel in this blog - merely 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, hence the commencement matter is to add together the script yesteryear pasting it merely below the <head> tag:Step 1. From your Blogger dashboard > larn to "Template" > click on the "Edit HTML" button:
Step 2. Click anywhere within the code expanse in addition to 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 in addition to add together the CSS styles merely higher upwardly 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/AVvXsEgwmW3Aom97pseZeuHZy21_6Jbrk527-WzSagGLYtoqoxL1qqe3bi2906PcvpDUyaUld8VTxi6WE_mwSAONW9_Fz1cKNKCzYO2qhcL13U-n3XYeYl9hSiZOAGVRWYb3A2HI1WRBQm8i0oKN/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/AVvXsEjCRJwo5hs7pFNMwPtOifbxJt89_SfmfB9zfPvqmWQSvP33m3nrwZRQFKyQpALnSeWDszVSyQOm8mnN9jH1HcNS0Fo-4-Qzh7-TOyIowoSVYXJSxmXAOdlpYoQ1uRi41PRsGsafOkLgzApy/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/AVvXsEiTOqDyL00tVC4e3MtVmmH08l4wtJsvPCOjzZz7FcuZcICQHFbZADNOjoSkCAMgH-Y9dhdE-Rd0AdlYw1WoHQIDx6PeZNUAup9pTKgxs6llVVu7mahqL6QTpCQ1i9b4B1vIHQ91VZqEOD4i/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/AVvXsEicRdfoxchiqMelejl0iynEf-qb0yNLz_i0j1Vg7JuTuKOi9Wv8UDvuprFL-hRQiTintd3bwuuJi48xcUe3-V6ZM-wGUfoVUSg_lEvut44xHGAoMSXDMWI-uncWsi75nm_WFRjy24i0V5Oz/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/AVvXsEgluLR9381SPZc9rIw4J8gZSD6haJLo5oOW0buqtIGjjgvnv9GqXvvUW6BMcXFz4EkrNy8bvmx1sWG8d2KDcxJdrqxabFH1O47_StZ9JaWpv4_gmG9jvGlFLvR7U2eUwqfQgr-LFMM2vUz0/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_x8UtS2vBDNgnIwnOrdCWR3iq3fA3XWst_noD7-c85tdapD3fAC2dspJnJNKluc1gW74q7alM_u8j-JjHoWQF8tIkJrge8Z9TJIyttBLpNtb-TvktYsxTuJQZz13MaK8gJIsoy-ulNKo/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgluLR9381SPZc9rIw4J8gZSD6haJLo5oOW0buqtIGjjgvnv9GqXvvUW6BMcXFz4EkrNy8bvmx1sWG8d2KDcxJdrqxabFH1O47_StZ9JaWpv4_gmG9jvGlFLvR7U2eUwqfQgr-LFMM2vUz0/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_x8UtS2vBDNgnIwnOrdCWR3iq3fA3XWst_noD7-c85tdapD3fAC2dspJnJNKluc1gW74q7alM_u8j-JjHoWQF8tIkJrge8Z9TJIyttBLpNtb-TvktYsxTuJQZz13MaK8gJIsoy-ulNKo/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 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/AVvXsEjHDWLia-J7g_f6fDdc4hQUi6jIPBfRYwAfGRFsvKGiO0rkhRThpJJ0kyudatyeEP0imgs8qPZFhyzOX6vmACSCu6LzOcAT5ZhEGLKGZhEx7KX22dyUsNJLMASJHm5t9kQrqeQMHoFE_5ET/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/AVvXsEimE8witM1xqdYgDDaNr9DA5cyTBMzD22mycVfdSlbD7QgOmGdUO37J-ghze5iAnpSGSBTv1gDg8v3BlvLvtYqNMqnQcdrqePa6lSZQYJK958HJsLQSvjpNJVWR4mFagDP4pcH99zLhwWYm/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 repose 0s;
-moz-transition: all 0.7s repose 0s;
-o-transition: all 0.7s repose 0s;
transition: all 0.7s repose 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 example y'all demand to a greater extent than infinite for your widgets, the peak of the entire container tin endure changed yesteryear modifying the 230px value from height: 230px;
- To alter the background color, alter this color value: #272727
<!-- Start sliding panel -->Note: if y'all can't uncovering the <body> tag, hence produce to uncovering this one:
<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/AVvXsEhaleYUrARBsQmO1PZGepHnNMTMoxdIkASPBscf2SyftuMN2qdIV0PCo9nAd63bVOnUb2zBo8JRxMwP0kzsm3y9e6GFuuw_3t4p95bOj3RJ6yKXiP2O1CnR-z8CyAwOrD2Bu-8wM3HMD3z2/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>
<!-- instant 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 yesteryear email. Just larn inwards your e-mail below if y'all 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/AVvXsEhwksGI7Fa0OI7mt1JOMEsg3LNFwGsCBf3INutk-6VgFGB__mT84n64Ezrm-FIClS7P4zKAFOf1HNasT1RVWb-XdsJFigQFSPVgIpnXokMtLz1r3wIU5-G1Rx8TIQWTti0CjT456xt9FQKl/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/AVvXsEjZFWA_jixLtGSPCJANFW737meAAy5Jlt7ukpz_Bf5MYi726PDSn0nu7koMGg-5nb6gNg6WTOexYayprFcq9VwxJhM4u392QmkPgNbyw8277yQ52qIdWd0MGV2PYqS4N1_rNBN9sk_KvHII/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/AVvXsEjkhnTVb7nlIeP6qlTeCYPFKrJFm4Psa6S0X-cGXy01sgSJtEKynZI17_0ieh56IV5lANU3aE26Eni7q_9fQ9mCnqZdmi4v85gTPcz6VMQbWf71Iq93zlQ67OvhRCiKUmdmJoklepredu1T/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/AVvXsEjbwuD8rUB-jt5StVCL2iNylNt_Llc-Xs_QymRxtGLizxNZ12pBuc20OWGYArq8awePNvnhq7VpTSh_8BbINh_b-vDq8qj-2HwaJnoBNzgmKRbcB3q7ngmw5zU5_Eeny67N8Xn1b2g6mD3m/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 receive got added the content inwards the sliding panel which volition endure hidden in addition to volition present on mouse click. In dark-green are the names of each department hence it is easier to recognize them.
Note:
- In the commencement section, y'all tin alter the welcome message, "Meet the author" championship in addition to add together your description yesteryear replacing the text inwards bold. To add together your ain picture, supervene upon this URL:
- In the instant department y'all receive got the categories - at that spot add together the URLs of your links yesteryear replacing the addresses inwards blueish in addition to supervene upon Category 1, 2, 3... amongst the titles that y'all desire to seem for the links.
- In the 3rd department is the e-mail subscription - merely supervene upon the text inwards blueish amongst the cite of your blog's feed. Please banknote that y'all must receive got this e-mail subscription pick enabled inwards your Feedburner account.
- As for the social icons below, alter the URLs inwards blueish amongst your Facebook in addition to Twitte in addition to add together the URL of your blog's RSS feed address.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaleYUrARBsQmO1PZGepHnNMTMoxdIkASPBscf2SyftuMN2qdIV0PCo9nAd63bVOnUb2zBo8JRxMwP0kzsm3y9e6GFuuw_3t4p95bOj3RJ6yKXiP2O1CnR-z8CyAwOrD2Bu-8wM3HMD3z2/s1600/profile-pic.png
Step 6. Save the template in addition to that's it! Note that this card industrial plant amongst jQuery, hence if y'all are already using Scriptaculous, Prototype or Mootools, hence it volition non work.
Hope you'll bask this elegant card amongst sliding effect, which volition await agency improve if nosotros remove the Blogger navbar.