A Calendar image in blog post is commonly found in wordpress blogs. But this time i'm going to show you the similar widget for blogger post.

To have the calendar shown in your post, First you need to set the time format in your blogger dashboard. 

 

*Preview of the calendar

Please follow the below steps :  

• Log in to Blogger.
• Click Settings > Language And Formatting (New blogger interface)
• Set the time orderly to have the date mentioned before the year like in below image :

• Now click Template > Edit HTML > Proceed
• Tick  Expand Widget Templates.
• Use the Ctrl+F function to find this line of codes :

• You probably will find the above line of codes twice, If you do, REPLACE both with these codes :

• Now find this code : 

 

• Replace the image url with your own url. 
• In case the calendar is incorrectly displayed, Change -108px to 0.
• The below color codes are adjustable to your own desired colors :

color:#ffffff; /* Month's color */
color:#282828; /* Day's color */ 
color:#282828; /* Year's color */

• Save your template.

Membership in a website offers many advantages for the website owner. You can provide an exclusive member features that work only if anyone has already become a member. This is to increase their recurring visits on your website. 

If you sell online, The recurring visits of the members will create more chance for them to buy your stuffs. They will probably click the buy button on your site at their 2nd or 3rd visit.

To make this membership works on your site, You need a user login panel and also a hosting service that will host your site and back up all your data (eq Web hosting and PHP, MySql system).

Now i'm going to show you a login panel demo from Web-Kreation that will create a nice sliding down effect and will be placed above your header:

 Here's how to create it :

• Log in to your Blogger account.
• In your Blogger Dashboard, Click TEMPLATE.
• Click edit HTML > Proceed
• Find this code using a Ctrl+F function : 

• Copy-Paste The below codes BEFORE it :

]]>

• Copy-paste the below codes BEFORE it :

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.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(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.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(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.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(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#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: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

• Copy-paste the below codes BEFORE it : 

Welcome To Digita7seven

Sliding User Login Panel Demo

This is only a demo panel

Blogger Tutorials

To create this demo panel, go to : Click Here




Member Login
Username:

Password:

 Remember me


Lost your password?







Not a member yet? Sign Up!
Username:

Email:

A password will be e-mailed to you.










This Is Only A Demo Panel
|

Log in | Register
Close Panel

• You can replace the words marked with RED with your own value.

• Save your template. 

The menu tabs / drop down menus are mostly clicked when visitors arrived in our blog for the first time. This is because the menu tabs can explain visitors more of the site contents.

For me i like the simple menu tabs that can show visitors the point of my contents. 

  
To create this drop down menu tabs, You need to add a HTML widget and insert some HTML codes through the template's HTML editor :

Add HTML widget

• Log in to Blogger.
• Go to Dashboard > Layout.
• Click on "Add a Gadget".
• Select HTML/Java Script widget.
• Paste the following codes into the widget box :  

Home

• Replace the RED TEXT with main links and names of your pages (i.e for Home, About, Contact, etc). 

• To add a Main Menu, Please add this code after the GREEN TEXT : 
• Name of MAIN MENU
 and before LINK OF SITEMAP PAGE.

• To add a Sub-Menu, Please add this code after the 
   
  in PINK TEXT : 
• Name of SUB-MENU
 and before the first 

• Save your widget above or below the header in layout.

     /*----- infozguide Drop Down Menu ----*/
    #infozguidenavbar {     background: #060505;     width: 960px;     color: #FFF;         margin: 0px;         padding: 0;         position: relative;         border-top:0px solid #960100;         height:35px;}
    #infozguidenav {     margin: 0;     padding: 0; } #infozguidenav ul {     float: left;     list-style: none;     margin: 0;     padding: 0; } #infozguidenav li {     list-style: none;     margin: 0;     padding: 0;         border-left:1px solid #333;         border-right:1px solid #333;         height:35px; } #infozguidenav li a, #infozguidenav li a:link, #infozguidenav li a:visited {     color: #FFF;     display: block;    font:normal 12px Helvetica, sans-serif;    margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none;         } #infozguidenav li a:hover, #infozguidenav li a:active {     background: #BF0100;     color: #FFF;     display: block;     text-decoration: none;         margin: 0;     padding: 9px 12px 10px 12px;                     }#infozguidenav li {     float: left;     padding: 0; } #infozguidenav li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0;     padding: 0; } #infozguidenav li ul a {     width: 140px; } #infozguidenav li ul ul {     margin: -25px 0 0 161px; } #infozguidenav li:hover ul ul, #infozguidenav li:hover ul ul ul, #infozguidenav li.sfhover ul ul, #infozguidenav li.sfhover ul ul ul {     left: -999em; } #infozguidenav li:hover ul, #infozguidenav li li:hover ul, #infozguidenav li li li:hover ul, #infozguidenav li.sfhover ul, #infozguidenav li li.sfhover ul, #infozguidenav li li li.sfhover ul {     left: auto; } #infozguidenav li:hover, #infozguidenav li.sfhover {     position: static; }#infozguidenav li li a, #infozguidenav li li a:link, #infozguidenav li li a:visited {     background: #BF0100;     width: 120px;     color: #FFF;     display: block;     font:normal 12px Helvetica, sans-serif;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border-bottom:1px dotted #333;    } #infozguidenav li li a:hover, #infozguidenavli li a:active {     background: #060505;     color: #FFF;     display: block;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; }