If you have placed a simple default theme on your blogger hosted blog and looking to have a cool and elegant menu style for your simple blog. It can be used for a huge blog having about hundreds of posts and good numbers of pages and links. But a new blog can also use this widget with outbound links to other blogs or website in the menu. The thing i love in this widget is four column elegant look which have author container, follow by email widgets and two column sitemap area.
To use this widget on your blog follow theses steps.
To use this widget on your blog follow theses steps.
- Go to Blogger Dashboard
- Click Edit HTML in Templates Menu
- Paste the code below above </head> or after <head>
- Now for styling purpose, you have to put a CSS code above </head>
<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/AVvXsEjXnFh-58jCFGpywlKuqiBDPwj_CNqdE0D8pJ0iAKhKPBn9OXARIANnMWfVKCFiRsLsRdWs2B7oMjTKTfm7j-QD0Cwh7z1BmapJ09dK8k2-8due27J7rfTrq9JxbApNX8zMbB3c-_4ZF0wy/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/AVvXsEg7pYNNWLIHiczzSwJfiBWDkY5doeljkD6HJIumG_7r7LbPCqn2dyGsOQPddJAsD-EycgkwVofpqMmqNzaJ2IrrGSVC0WfBzarD8uJnjKfb1IVtbe51D5lueENx0CYFNEYHKc33iRhGgB_S/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/AVvXsEjdTsaxZ3EBcJ_LMFY_gyxDufI-QXkC5tJRmjf3kexEIbpQtx3Gd6ktDnoOa1d6oxhiboMU6HpYLAYGWkzfDyzXtEnzzkYF2NB0lvHjTywpzChBseRUccXbHcoUsE8F00aCxqBMbGvJc5KC/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/AVvXsEi-rAUCdPuNFj_9onEApVm3Ecl5DyXfbM-xku4eGeJVsbzVJkH4oXV53qvbFRjbEphMBIuTcenSVU_V8vQQRy-sVu9TsDr3ZoJbEYC6iEsc5ZioKV8WHlSyVPIyxtx-i2AVv2w0HNvFFfGW/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/AVvXsEiS6B6Zkt1ktVJClzU4WkeRLNAQHDhWOfZ7zj-upMxuw1A6jJEKBlTB-JwSZWS0V6uoErIpE6PVnhBOmAWx06J9v6EsblZfqJ4K6qQnspOZtCTUi1Hj9V7nD_2tjz5KfzD_CvRwrpzZHXfU/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPoGbw9vXovPntd8GtGV7b764pYqRMo2Tu_EhmZhIPTF0zdu9IlAlq7WrQbMYAgAdM-5Wsa8ToVH6GdN3hNT5VjcO1YShI2xAxi5phLRwdLUjJM_8va5ZnkAo1hCQR4KbY7mJkeE-sZEcP/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6B6Zkt1ktVJClzU4WkeRLNAQHDhWOfZ7zj-upMxuw1A6jJEKBlTB-JwSZWS0V6uoErIpE6PVnhBOmAWx06J9v6EsblZfqJ4K6qQnspOZtCTUi1Hj9V7nD_2tjz5KfzD_CvRwrpzZHXfU/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPoGbw9vXovPntd8GtGV7b764pYqRMo2Tu_EhmZhIPTF0zdu9IlAlq7WrQbMYAgAdM-5Wsa8ToVH6GdN3hNT5VjcO1YShI2xAxi5phLRwdLUjJM_8va5ZnkAo1hCQR4KbY7mJkeE-sZEcP/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/AVvXsEhP6-tCbqQjCj3CWuQG8FomefRi3qcjVwL8oJKmlngOf1NnqLIHg_pywlNLINf4wdQgiWQgJ7cLcyxnB9lUns-Cg-6ZKMGufZd1jS6PzjO46kCe2cCxswLWb-y_lWl_DsndHsRe0Zlrlx6C/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/AVvXsEjJ53SIlI1LXK-UQzBX4KcpyL1v0wkb10U4FXLqCWemDsF0jTKmIipSqMlE5yRTcdwxnC7rKnc0giD0E23R0XSAlm3G1w37xiFRcY6WUdEi_unCUcbCGHx2BRerX2dXZXEhPciiCvq_if_d/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> - Now The Main content of the panel menu is here. Paste it just after the start of <body>
<!-- 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='Your picture URL'/>
<h3 class='boxtitle'>Name</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/AVvXsEjbkICjZ0S4YcSbkaFNv-sRX9c0TPOjrIChbg1MwGKrNlktsCatlh5hVNhmkdd32u-dMoxaAMmjel-JpZWtKSOV0x_imZ4uBZ65JR5lNqWpU47Tr9oUAPpxz4GidthKn4YuzgRtli4T0ofc/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/AVvXsEhDTAXxhEeEDAXtXwxoM9RQdfqO940Q2hcdw6wzAM-zoRMR5pqLmU31dFeKQM2QT2jnfSz6APM3tZGLLiWj33dciTeueLFPdsa4EISSzFO457ZEGUq6CREDrPJ7WDLzh4jzNcdjrdrOEDRt/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/AVvXsEgA1RXwaqCfEYV3c3EEsWZO22luAPtHXuixf9U1BN7rAoKuGjOizda7JuSf4wXX2gRg9Fm1jU8Gas-6IOOcbwf26pbdXraWEIu8VwGASmUhqYl25ci0uiogKbSHsCiQ2msmB-YzYUJDZ2lP/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/AVvXsEjdyh0c8ARu8z94H_9zG_Pggw760Pkry57MLgGjVnCji2iwC0-agAl63Anci7n-mXm1EaxnjpQZShzWslQTgnG6cfmw36dKkTKUIZtU-dAoOtQSBHisbLIuufB2E1xKjcCKoNg0KpfqEjAY/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> - Replace highlighted text in red with your content and links.
- You are done now and you can change appearance with a little help of Inspect element menu from your web browser. In case of any problem with the widget, comment your bug below or contact me here.
<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>
I hope this widget with help you to some extent in improving the appearance of your blog and redesign it.
EmoticonEmoticon