Widgets inventories and its coolness are increasing rapidly and now you would realize that many webmasters are making the templates fro...
You would be see a sliding menu which is present in left side with the plus or inline buttons just like this widget is look and work, but in this widget some changes occurred in which you will enjoy more if you want to know the hide features of this amazing widget, so see the below Listicles.
Features of Sliding Login Panel Widget
- It has author box with transforming search box.
- It has categories box in which you can add your all label links in one place.
- The best thing about this box that it has a subscription box with social sharing buttons which is present in the third box.
How to Implement jQuery Sliding Panel in Blogger
Login in to your blogger account.
Move on template>> Edit HTML and press CTRL+F>> And search </head>.
Paste the below script just after </head> tag.
Then, paste the below CSS styles just above </head> tag.<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>
Guideline: If you want to increase the height of this widget, change height: 230px from your dominate number.<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/AVvXsEivDux0CthAS6ahR3ZXkWQckZJZN8l7cz2uEmXDEoTekLsuCYQYzmYY09i1W5v_7FPP9iRnHqgYOoUEDcGpyY8Kt6S81NZJPBAT1qkvdtXfh1-MbnXsLxJ_ntFreSrarN9AFvbaUeyTePU2/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/AVvXsEjNQ7bVWsU7dQbTrD5ly0_KAUcYlZgLq0q-ZsIrvNl_UK3Wo_MZiyRGaf5gETIpWVdeYqmambn313I5zfnbjyBUBEXI5YGgzkEQmzcuC9nbZ6NKb8BolrJxvLztBZQHTWBWEeIaJU-dlinx/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/AVvXsEhL3x9G3C3HkrZKuxUoaoYO7qu0sHtzz-SNEUHOgun04NpVxduzuVXuyE6TczU1xw6NHXg-3FSWxUFEa19R1HIkRnOyIZA4AN-M67fi_2thmQ9jBjlbPKL03_d2wVBPUCe6prAeP2p2059F/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/AVvXsEh-0baRwcnd2Y2oR9mPjP6Z5OK3RomFM9X9eb9ZIjAuvme9ognWaK1pI3OF32i5h7fzXGIRvuQjI7Wy6jeSVdoJ1tQlrnUSkRQ0-VEZ6YFe-CWvKBvoZw8Q17eXeyauNkOaJFCSYl4dzJm9/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/AVvXsEj9QpWcUFi60hVWgICArJxK63NGbEy9X2dzeqhXUEYyNyM6KQpSggUHMTGHkWUgaq0gFWb4N7W4U70eekNQFb01HckZIbu5DGhwj3AVWmFdwnjjZrMx6krjejkCp-Wb7s4_yqZtLIhj7rXZ/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLABRphNh7XC-TMVsPZQl3rv2o4eVGTNLw-awZ-uV2f3DVjcnST3IItc3-XPZIQ2VBNB2t_QbQXY-PYsR4yyDQv0bxRBkOaRG4zAu5AiQ1JIburysNA9kE3kAB6i147ew8oYiI5sgkAlPc/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9QpWcUFi60hVWgICArJxK63NGbEy9X2dzeqhXUEYyNyM6KQpSggUHMTGHkWUgaq0gFWb4N7W4U70eekNQFb01HckZIbu5DGhwj3AVWmFdwnjjZrMx6krjejkCp-Wb7s4_yqZtLIhj7rXZ/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLABRphNh7XC-TMVsPZQl3rv2o4eVGTNLw-awZ-uV2f3DVjcnST3IItc3-XPZIQ2VBNB2t_QbQXY-PYsR4yyDQv0bxRBkOaRG4zAu5AiQ1JIburysNA9kE3kAB6i147ew8oYiI5sgkAlPc/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 solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
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/AVvXsEgduED-XPPtwmisdo8qsJxx1kIXbvqMSwFhjWmB2MI3-9Be3gfnj2jcMxUyqR-m2_kr0kcLGR1OOFRkA-o_CGVMyMJxOJhE_rImCoeAg55dNGyV2zrxc0YK76luWHf8xNHvoupanLX4JhK6/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/AVvXsEiJRHeDAOTI5h-p3hmVhlCUC3xN1WeD0C8jJFD1XrP3AwZyaOK13B1A325qq-vSpavjEq8r1bZOFwJyZi2jEwhxZSajSE8J_vtf-INYKxsz5zSw8z2Tv_9GaubXLpdVSZVu8CzWOOaUVTLq/s1600/star-bullet.png) center 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 ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 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>
And if you want to change the background color of this sliding login panel, replace #272727 with your desired color.
Customization Script: Afterwards, paste the below HTML structure just after <body> tag.
Guideline: Search the below code instead of <body> tag, if you can’t find the <body> tag in your HTML template and if you have found the <body> tag so leave this guideline and jump to the next step.<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
<!-- first section -->
<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/AVvXsEgGdjkShcxMUkY2pQdrVeQT0TAVWqRqQQghcS7xPaMgUxWUm_Wr3VOHpVEoBGQFEluiY5QMUPqQljeHBXcgt5rLcg22b4QeRedHrqvxI9wkQfMGrQXHJXAkaYfNbEAnyglYqaic3D6yZXJd/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>
<!-- second section -->
<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>
<!-- third section -->
<div class='left right' align="center">
<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want 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="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPtqW_obbHwnOTHwi_utdmDpDBw9X9MXk4cDR1mDVuVFicGojrvioZLmIaGLNw0OZ1D3ahgueB3nIoixhabCCSKDBomXe971_tS3JB4kO4NnYYpIrj9bWh4KnZsbn6KHSvtSoguxnckHu/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofVTzqNjPp9fDomx6KsJb-PbBJPomi237ToR38e9UDkxyVt6sSTYoAsceyZH6cHT3DePsDXr9iNlcqu5-ROO0RBHwnMd7IBsRLKTUoQ-PJa10rQ840vHpsCFZzPa6WAq7SDFdppStOxZP/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6ZIEBYBbVbZ7kHFTDLtBLDsLT1B-Nq6V92oUG32ECfN8WNvMNEQGkDYxE9L7J8P6KbHlX70EIcp3smzC4sQskTSFGKhMgZHnmTEuhUp-XD1oLlQXf1BLcqKM7Zmy0b29i-yeM0RIKpo0/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmVBOpXgGwef_ImRzCWkCWuG9txxSGfuVk9fs78atmUhhGoe1yUwphQFr08zRefboPEMhYzpCJLTpFch_kynA7Rv6yL5x5_9FYJJEEwt3iaCtiuDzyzCvqOROSiKgfjWfBXue1e45eRcg/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>
Now lets learn some coding knowledge of this widget.
In demo page you can see different text in the author box, for change the given text and author image replace the bold text and below URL address from your author image and text which is present in Customization Script.
Also change Category, subscription and Social network links from your label, Feedburner and social page links.
Ultimately, click on Save template and enjoy new the delicious sliding login panel with new and useful features on your blog.
Connected Article: Stop Country Specific URL Redirection in Blogger.
Final Words
This widget is quite heavy, so if you have many widgets which is not necessary for your blog, so kindly remove that widgets otherwise your blog will be loaded lately which is not good for SEO. If you are a web developer or passionate blogger so don’t forget to subscribe with us for getting new exciting blogger widgets and tricks like this directly in your inbox. Enjoy and Cheers Blogging!.
COMMENTS