We use blockquote to quote important words so readers can see the words more clearly. 

Please follow these simple steps to create a custom blockquote like in above image in your blog:

1. Log in to your blogger account and go to dashboard.
2. Click TEMPLATE > EDIT HTML > PROCEED
3. Use the “Ctrl+F” search function, Find this code : 

]]

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbtcws59g28RquPD0Vk_-eAiGRTAkfbD2eDbROD0VAszspAX6ZAZUe7fANZwWLvtstsbwJv6iBPiyUIfbejkZ476o65UmBCmMuecZ7MmpDvuNpoQkFh_msho-C0bKwCOZHMuf4piQbehK/s320/rb style 08.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Popular post is one of many important features you need for your blog. The most read posts are displayed to let visitors know about other interesting posts or topics they might like. This will let visitors stay on your blog longer.

This widget will create a nice rolling effect everytime you hover your mouse on the post preview.

Please follow the below steps carefully to create this rolling widget : 

Adding A Popular Post widget

• Log in to your blogger account and go to LAYOUT.
• Click "Add Widget" (A pop up window will open)
• Choose "Popular Post" from the list.

• Save your Popular Post widget before taking the next steps (Put the widget anywhere you want in the header, right sidebar or in the footer section). 

Customise the widget's appearance and effect from HTML template editor

1. Now go to TEMPLATE > EDIT HTML > PROCEED
2. Check the "Expand Widget Templates".
3. Use the “Ctrl+F” search function, Find this code :  

 ]]>

1. Copy and paste the below codes BEFORE it :

    /*Popular Post*/
    .popular-posts{margin-left:15px;}
    .popular-posts .item-thumbnail{float:left;}
    .popular-posts ul{padding-left:0px;margin-left:4px;margin-top:6px;}
    .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
    .popular-posts ul li img {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
    .popular-posts ul li img:hover {-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);}

• Use the “Ctrl+F” search function again to find this code : 

.......................
.......................
.......................
.......................
.......................

• Replace the above codes from  to 

•  Save your template for changes to take effect.

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.