Don't Miss

Latest Posts
Browsing Category "Widgets"

Add Flashing Christmas Lights to your Blogger Blog

- 28 Comments
Recently we shared an article How to Add a Christmas Snow Fall Effect to Blogger and today again we're going to share another Christmas surprise widget. As you know Christmas is just a few days away, everyone is busy in decorating their homes, shops etc. If you're blogger and you're looking to surprise your visitors by decorating your blog then you're at the right place. After adding the snowfall effect its time to lighten up your blog with flashing colorful lights. In this tutorial, we'll show you that How to Add Flashing Christmas Lights to your Blogger Blog. This widget is designed by synthasite.
Add Flashing Christmas Lights to your Blogger Blog

Add Flashing Christmas Lights to your Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft  + document.documentElement.clientWidth - offsetWidth);}";}
else
  {cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft  + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
  {cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:98px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');


function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">');
document.write('<><img src='+cot_tl_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none");
//]]>
</SCRIPT>

Click Save button and you're done!

We hope this article may have helped you in adding Add Flashing Christmas Lights to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Add a Christmas Snow Fall Effect to your Blogger Blog

- 10 Comments
Christmas is just a few days away, everyone is warming up and soon it will knock the doors of bloggers and the entire world. If you want to impress your visitors and you want to give them a Christmas surprise then this is the right time to show your skills. There are hundreds of Christmas surprises that you can give to your visitors. Today we're going to share one of them that is called Snow Fall Effect. This effect will display a Snow Fall on your blog and that it will definitely surprise your visitors.
Add a Christmas Snow Fall Effect to your Blogger Blog
If you're thinking to decorate your blog this Christmas and you want to give them a mind blowing surprise then you're at the right place. Its time to show your skills and amaze your visitors by adding Snow Fall effect to your blog. In this tutorial we'll show you that How to Add a Christmas Snow Fall Effect to your Blogger Blog.

Add Snow Fall Effect to your Blogger Blog

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area, use Ctrl+F and search for the </head> tag
Step 3. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it just above/before the </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://yourjavascript.com/146111102320/snowfall.js'/>

<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

Note: Remove the code in purple color if you already have jQuery in your template.
Customization:
  • Increase or Decrease the minimum size of snow by changing the value in minSize: 10,
  • Increase or Decrease the maximum size of snow by changing the value in maxSize: 50,
  • Increase or Decrease the value in the newOn: 400, option for changing the snow fall speed
  • To change the snow color replace #ffffff with your own color code

Step 4. Click Save Template button
And you're done!

From Editors Desk

We hope this article may have helped you in adding a snow fall effect to your blogger blog. Share this article with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

Elegant and Clean Email Subscription Box for Blogger

- 4 Comments
Email Subscription Boxes are one of the most essential widgets that we use in our blogs. Everyone knows the importance of Email Subscription Box and subscribers too. Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox.

People are using different techniques for increasing their email subscribers list and one of the best ways for increasing subscribers list is adding an Email Subscription Box to your blog sidebar. We've also shared some of them. Just recently we've designed another Email Subscription box and on the basis of its design we named it Clean Email Subscription box as its design is clean and stylish. We've used light colors in its design, it has two forms, one for the name and the other for email address.

Recommended For You:

Flat UI Email Subscription Box For Blogger
Simple Flat UI Email Subscription Widget for Blogger
For more, visit our Widgets Inventory.

This email subscription box has a clean and simple design and we hope that it will attract your visitors and will help you in increasing your email subscribers list. Take a look at the image below to see how it looks.
Elegant and Clean Email Subscription Box for Blogger

How to Add an Email Subscription Widget to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<style>
#bgt-subscribe-box .header{
background: none ;
color: #a3a3a3;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#e7e7e7;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#4E5563;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#718397;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
            <div class='header'>
            Subscribe Now!
            </div>   
             <div class='bgt-emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogolect&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name&quot;;}' onfocus='if (this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}' value='Enter Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address&quot;) {this.value = &quot;&quot;;}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='blogolect'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>

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

Replace both blogolect with your RSS Feed Name

Finally click Save button and you're done!

We hope this article may have helped you in adding An Email Subscription Widget to Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Add a Live Chat Support to Blogger

- 8 Comments
If you're running an Online Store, a Community or an Online Service. A quality Customer Support System really helps you in increasing your sales and interaction with your visitors. While choosing an online service, people look for its features and Live Chat Support is the most crucial.
How to Add a Live Chat Support to Blogger
Having a Live Chat Support system helps you to easily interact with your visitors, so that you can understand their needs, which will help you in improving your services and their experience too. In case of an online store, a Live Chat Support system will help you in increasing your sales. Recently, we received an email from one of our visitors that he wants to add a Live Chat Support system to his blog. In this tutorial we are going to share step by step guide on How to Add a Live Chat Support to Blogger Blog.

It hardly takes 3 minutes to add a Live Chat Support system to your Blog.

Before you add it to your blog, take a look at the image below to see how it looks. On clicking the + button a chat box will open for customer support where your visitors can ask you questions or feedback.
How to Add a Live Chat Support to Blogger

How to Add a Live Chat Support to Blogger Blog 

First and foremost, go to http://www.purechat.com and click Sign Up Free button. A popup will appear, enter your login information and click Submit button.
How to Add a Live Chat Support to Blogger Blog
You'll redirected to the next page, a popup will automatically appear with your chat widget code. If you want to add it without any customizations then Copy that code, go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box.
How to Add a Live Chat Support to Blogger Blog
Otherwise if you want to customize it close that HTML popup, click Chat Widgets button and then click Edit button.
How to Add a Live Chat Support to Blogger Blog
You'll see a plenty of different tabs for customizing each and every section of your widget like Collapsed, Start Chat, No Operators, In Chat etc. You can also customize its Mobile version by clicking the Mobile tab. Customize your chat widget according to your taste and click Save button.
How to Add a Live Chat Support to Blogger Blog
Now click HTML button under the Installation heading, a code will appear, copy that code.
How to Add a Live Chat Support to Blogger Blog
Now go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box. Finally click Save button and you're done.
How to Add a Live Chat Support to Blogger Blog
We hope this article may have helped you in adding a Live Chat Support Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Do share your thoughts in the comments section below.

Top 4 Live Chat Support Widgets for your Blogger Blog

- 10 Comments
If you want to grow a community and increase user engagement, then the Live Chat Support widget is one of the most effective solutions. In this Modern age, no one has time to wait for several hours or days for receiving your solution feedback. Everyone likes to get solutions to their answers within no time.
Top 4 Live Chat Support Widgets for your Blogger Blog
While choosing an online service, people look for its features and Live Chat Support is the most crucial. Whether you are running an online store, a community, service or a blog, live chat support is important. By adding a live chat support widget you will get real-time feedback from your visitors regarding your product or content and surely it'll also increase your sales. In this article, we are going to share Top 4 Live Chat Support Widgets for your Blog.

Zopim

Zopim allows you to directly chat with your visitors. Its available in both free and premium packages. If you're running a small business blog then the free package is enough for you. With free package you can chat to only one visitor at a time.
Live Chat Support Widgets for Blogger Blog

MyLiveChat

MyLiveChat is another great free live chat software for your blog. You can easily integrate it to your Blogger site. It allows you to easily interact with your readers. It also allows Real time traffic monitoring, visitors path, referrers, current page.

Another great feature of MyLiveChat is that you customize it the way you like. You can customize chat button, chat window, pre-chat window, offline message window. You can also change its logo for branding.
Live Chat Support Widgets for Blogger Blog

Pure Chat

PureChat is also a free live chat support software for your Blogger Blog. It has countless features. You can personalize colors, widget image, labels and forms.

You can easily manage chats, widgets, view chat history, profile and users. It also provides a statistics tab. You can also manage user roles and multiple support agents.
Live Chat Support Widgets for Blogger Blog

Olark

Olark is a free Live Chat Software. Both free and premium packages are available. Set-up is extremely easy. You can easily customize it by choosing different themes and by using custom CSS.
Its Cobrowsing feature lets you see what’s on the customer’s screen and even control their browser. With its targeted chat option you can easily chat with the right person.
Live Chat Support Widgets for Blogger Blog
We hope this article would help you in choosing the best Live Chat support Widget for your website. Do share your thoughts  in the comments section below.

Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Add Author Bio Box Widget to Blogger

- 5 Comments
Your users/visitors always like to know the actual person behind the website, that's why most of the popular blogs have their author boxes on their blogs. Brief author bio widget enables the readers to make a better connection with the author. Adding an author bio box allows users to connect with an actual person behind that website. It also helps them learn more about those authors by following them on social media. Whatever, an author bio box is much better than a tiny name of the author. In this tutorial we'll show you that How to Add Author Bio Box to Blogger.
How to Add Author Bio Box Widget to Blogger

How to Add Author Bio Box to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<style>
#bgt-profile{
border:2px solid #888;
margin:2px 5px 0px 0px;
padding:2px;
}
#bgt-profile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.bgt-opacity  {
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
opacity: 0.5;
margin-left: 50px;
}
.bgt-opacity:hover  {
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
}
</style>

<img class="bgt-opacity" id="bgt-profile" src="https://lh4.googleusercontent.com/-dnCb_BUDdMs/AAAAAAAAAAI/AAAAAAAABDw/7jji-LgPQ_s/s46-c-k-no/photo.jpg" align="left"/><a href="https://plus.google.com/u/0/106747776208858917783" target="Zohaib Liaqat"> Zohaib Liaqat </a>Write About Yourself or Your Blog here<br/>

Customization:
  • Replace https://lh4.googleusercontent.com/-dnCb_BUDdMs/AAAAAAAAAAI/AAAAAAAABDw/7jji-LgPQ_s/s46-c-k-no/photo.jpg with the URL of your Picture that you want to show in the Widget/Author Bo
  • Replace https://plus.google.com/u/0/106747776208858917783 with your Google+ or any other Profile URL
  • Replace Zohaib Liaqat with your Name and Write About Yourself or Your Blog here with your description

Note: If you want to add more links use this code and add it anywhere you want

<a href="Link Address Here">Text Here</a>

Finally click Save button and you're done!

We hope this article may have helped you in learning  How to Add Author Bio Box Widget to Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Create an Advanced Admin Control Panel in Blogger

- 2 Comments
The only downside of remiving Blogger Navbar is that the links like New Post, Template, Pages, Log Out etc. are no longer available.With the help of Navbar blog administrators can easily manage their blogs. With a visible navbar admins can easily create posts, pages but when the navbar is hidden sometimes its really frustrating to visit the dashboard again and again for performing a task.

Today, in this tutorial I'll show you that How to Create an Advanced Admin Control Panel in Blogger. Admin Control Panel is a facility for blog administrators to manage his blogs with ease and speed. This Admin Control Panel is only visible to blog administrator (Not to readers/visitors). Only blog administrator will be able to see this navbar/panel when he is logged in to his account.
 Create an Advanced Admin Control Panel in Blogger
Here's a screenshot of this Admin Control Panel. Using this Panel you can easily access to your Dashboard, create new post, access to all posts, comments, your blog stats, layout, template, your blog setting and finally Logout button.
 Create an Advanced Admin Control Panel in Blogger

Find your Blog ID

The very first thing for creating an Admin Control Panel is to find your Blog ID.
To find your Blog ID, log in to your Blogger Account >> Select the Blog to which you want to add the Admin Control Panel. Choose any option from the sidebar, like Setting, Template etc. Now take a look at the address bar of your browser. You will notice a string like this

blogID=XXXXXXXXXXXXX

The digits next to blogID= (blogID=XXXXXXXXX) is your Blog ID number.
Copy the blog ID, we'll use it later. Now its time to add the Admin Control Panel, lets do it

How to Create an Advanced Admin Control Panel in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Use Ctrl+F and search for the ]]></b:skin> tag. Now add the below CSS code just above/before it

.bgt-cpanel ul{
border-bottom:2px solid black;
text-align:center;
position: absolute;
margin: 0px auto;
background-color: #333333;
width: 100%;
z-index: 20;
}
.bgt-cpanel ul li{
float: center;
padding: 7px 0px;
display: inline-block;
}
.bgt-cpanel ul li a {
font-family: 'Slabo 27px', serif;
color:#fff;
padding: 7px 15px;
border-right: 1px solid #E3E3E3;
font-size: 13px;
font-weight:bold;
}
.bgt-cpanel a:hover {
text-decoration:none;
color:#2aa4cf;
}
.fa {
font-size: 18px;
color: #999999;
margin-right: 5px;
}

Again search for the <body> tag and add the below HTML code just below/after it

<span class='item-control blog-admin'>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'/>
<div class='bgt-cpanel'>
<ul>
<li><a href='http://www.blogger.com/home'><i class='fa fa-building'/> Dashboard</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'><i class='fa fa-pencil'/> New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'><i class='fa fa-folder-open'/> All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'><i class='fa fa-comment'/> Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'><i class='fa fa-bar-chart'/> Stats</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'><i class='fa fa-puzzle-piece'/> Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'><i class='fa fa-edit'/> Edit HTML</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'><i class='fa fa-gears'/> Settings</a></li>
<li><a href='http://www.blogger.com/logout.g'><i class='fa fa-mail-reply'/> Logout</a></li>
</ul>
</div>
</span>

Customization:
Replace XXXXXXXXXXXXX with your Blog ID that we copied earlier.

Important: The admin panel will only be visible to blog admin or author (not to readers/visitors) only when he/she is logged in to his blogger account.

Finally click Save Template button and you're done!

If you're looking to share this admin panel on your blog/website then please don't post it without a proper credit-link to blogolect.com

From Editors Desk

We hope this article may have helped you in Creating an Advanced Admin Control Panel in Blogger. Share this article with your friends, don't forget to subscribe us for more cool tricks and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger

- 7 Comments
jQuery Sliding Menu is actually a type of navigation menu for blogger. It expands sliding from top on clicking the Open Menu button and on pressing the Hide Me button it collapses. If your blog has no space for adding subscribe buttons and email subscription form, then don't worry this menu is going to fulfill all your needs.

If you're tired of using those simple Drop Down menus then this menu will give your blog a new professional look by its simple, clean and professional design. This menu consists of four different portions, the first one is for Author Bio, the 2nd contains a simple Search Box, the next one is Categories where you can add all your Blog Categories and the 4th portion contains an Email subscription box and social media buttons. In this tutorial we'll show you that How to Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger.
jQuery Sliding Menu Expand/Collapse Function Blogger

Create a jQuery Sliding Panel Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template >> click Edit HTML and Search for the </head> tag. Now copy the below CSS code and paste it just above/before 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/AVvXsEhYGhAmhmMnUcVWzFRhRPIVHKzaUKlsev4C7uX-K7yp_l_E65N_cXkuiHDtjm_wKSU7zYzqE93ozM57vPS4f1gwdex_meUBt7XjCzL3adQMDxMceP7aGGeaudaHBhG5fd_fodQqPNl8GhU5/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/AVvXsEjgSo10ax4RSVgz6M8s272rDIO8mDFoXf7D6Y2Jh78cbKykY01tvK4lJQPbyP_bY2NwMv6NRwLeGl5CxErLW8aXqqiQ7oROkvSq_iaavUJOccqOJM0ExASBds10MVTUdOrdb0E7Ar_B6EW7/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/AVvXsEiGRxDCTRS3vf9Fxg0Wt0yVsYE03XbI1NvIz5ixXoruy_oe0zb-X9To4syDuXgJRR15MsFj7kPK80GOc6f6zqIzDOXxnM2sJu3LCbeFyp7IIStyD26YHg01WBc3Lpq9kv5TrAkGZQtNBmKF/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/AVvXsEiLz8b-Sbipge-tUJVgxpbT31GBP0wEB5GjtLz5L3X716q2NnlsLzXy_nlP07Kjb9IG1B1IxIfK6g5y_VHzDRzKqTHuufLbVZ7ohFWKOzgjz13VWhZvJMybWNDuJaqeIyOakI1hUYq7JBF7/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/AVvXsEimnkUlP5xDO9o669ixFrF-AAXDwvyTuJyxtoPVXoiYEUEpK0kg846UZXU4ckjtFOCIgaNebW2MZn2gEICFEUQPUoVyZOOvOhtRnM05anrirjuN6NazIlKxvBLcgGcGPO8EOf6FqIAIlG8A/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIM8ronLQLlS6JXl_nviTAghBeJpD3-hoA1edipw5BosB4XKddXel7k2yypqGSdYsv8Xfm97sb7nsAAxEX5oofVE3o6rpf4hz0RkcH6igL4GfuPLpxs8tvMlfCIiKtB5BTWlM5G_JOH5Vs/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimnkUlP5xDO9o669ixFrF-AAXDwvyTuJyxtoPVXoiYEUEpK0kg846UZXU4ckjtFOCIgaNebW2MZn2gEICFEUQPUoVyZOOvOhtRnM05anrirjuN6NazIlKxvBLcgGcGPO8EOf6FqIAIlG8A/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIM8ronLQLlS6JXl_nviTAghBeJpD3-hoA1edipw5BosB4XKddXel7k2yypqGSdYsv8Xfm97sb7nsAAxEX5oofVE3o6rpf4hz0RkcH6igL4GfuPLpxs8tvMlfCIiKtB5BTWlM5G_JOH5Vs/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/AVvXsEiH1Ose_LQyFgbnUrY96rtP5t1vy0DNIegx3lqDChKSwJcvctTkbVbP6X0jyoBvxgF6okALFydf5Dirj8g9aEJdZ6cpwPWp6KMtciYOrEjx4xBDUIBblj_SmoOMEzF6q9wNhP6KtBt4UqH2/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/AVvXsEgBxBtMVwGjWwcBXS7mlSv_yTBRkKO7Eg-wLXGILNc8SGiH2_SgXWsGx7tXPVnjZfsvPuuwxfllUivlEKLu4OuzUr4NF9cJDG7SWcUVxOOYg1MquhhNOsT-5tA-xAx1Hb3nnqtLAsXgPFfw/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>

Important: The height of the panel can be modified by changing the value in height: 230px;
Now search for the <head> tag, copy the below code and paste it just below/after it

<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>

Finally, search for the <body> tag and add the below code just below/after it

 <!-- 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 Your Blog Name</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='URL-OF-YOUR-PROFILE-PICTURE'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Write author bio here.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Search Here</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='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
<li><a href='#'>Category 4</a></li>
<li><a href='#'>Category 5</a></li>
<li><a href='#'>Category 6</a></li>
<li><a href='#'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Category 2</a></li>
<li><a href='#'>Category 3</a></li>
<li><a href='#'>Category 4</a></li>
<li><a href='#'>Category 5</a></li>
<li><a href='#'>Category 6</a></li>
<li><a href='#'>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;">Want To Get Hot Updates Directly to your Inbox? Enter your Email below!</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-NAME' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='YOUR-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/AVvXsEjrhYbVmoQK_N8Fkw0bZgdzII9e6IQYa5z7OTSu58E6OWG2QOeH6dGCx1aUJ16lpqgNsraPHN-ko7sWuriIWa95DfX_CWUd4pm6Q6SBljJg1OoFMVwnUYFfLsl7EtordDO68T-dQptpmh9N/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://your-blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lW8n7u3Eqkm4yKRHQAaOwXzsD239GL-3C4__MsO14813dWrC5sYHjm_1epJxcAEKYRZh2pmoBEVZFbUAuV8l7ORcM4vdW1V5p9-pFNPk-YtZyDsvK3IZm8kzEeqo7MRgYXZvKTHdENmY/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/AVvXsEhlTduqtIU5oPV5Qce5RhkOp10_lNbMvsonGr8dKLAXay5GTQyo8-nK4C6WDeRGDTeaztY2ldU0DUZKOvRfUe3F1FpRmbUR-9y0ZWK3jxtuUwTdr3Uq7vcS13AmH5LBSqaXbKPbYs9AjFxq/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/AVvXsEiKv2yEd2iN9ZGdayQ5Ob-9ifHjDOtnj7M1V-U9DXXyShEqBIfq6a-zyt9bXIR_4cVpNIyIMNDwBECHDLlDZRtslGmd12eFli5l0p-K816gbCBfFBZvD6ZuN2z1pISVfPHvdQV7dstEAxx0/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
</div>

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

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello!</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;'>Hide Me</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Replace the highlighted text with your own text and replace all categories with your categories name and # sign with their links. Replace Feed-name with your RSS Feed name and all username with your usernames. After making all the necessary customizations, click Save Template button and you're done!

We hope this article may have helped you in Creating a jQuery Sliding Panel Menu in Blogger. Share this article with your friends and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum