How To Create A Diary Style Date With HTML And CSS
How to create a diary style date with HTML and CSS. Make your blog attractive and awesome.
 |
| How To Create A Diary Style Date With HTML And CSS |
In our last post we talked about how to add caption above the images and now we will discuss how we can show diary style date in the blog. This is pretty simple. It is magic of HTML and CSS. You can manually put it into the left corner or right corner. It will not change the default display of date in blogger. But it is designed to add it manually. If you do not show today's date in a blog, then this is the great way to show it. It looks fancy and will attract the user. You can also put links inside it to increase website conversion.
This date widget can be used in many ways. It looks awesome and for sure it will convince your readers to take a stop to look at this. So you can add a link in this widget. This way it will be helpful to get more clicks. Or you can also add social sharing buttons in this widget. So overall it is going to be beautiful now it depends on you how you want to use this diary style look widget.
We created this blogger widget with HTML and CSS. It is completely cutomizable. You can edit the color, font and everything if you know a little bit about CSS. So lets take a look on the code and learn how to use it.
How to create and add diary style date widget in blogger with HTML and CSS.
First login to your blogger account.
Now you have two options to add this widget. You can add it in the sidebar or you can add this in the post.
To add this widget in sidebar.
- Login to blogger account.
- Go to layout.
- Choose to add a gadget,
- Choose HTML/javascript.
- Copy the HTML code.
- Paste it.
- Now go to template and click on edit template.
- Hit ctrl+f.
- And search for ]]></b:skin>
- Now copy the css code and paste it above the ]]></b:skin>
- Save your template and you are done.
To add this diary style widget in the post
- Login to blogger account.
- Create a post.
- Go to HTML mode and copy-paste the HTML code.
- Now got to blogger template and hit ctrl+f and search for ]]></b:skin>
- Now copy the css code and paste it above the ]]></b:skin>
- Save template and you are done.
HTML Code
<p class="diary">
<span class="day">21</span>
<span class="month">March</span>
<span class="year">2012</span>
</p>
<span class="day">21</span>
<span class="month">March</span>
<span class="year">2012</span>
</p>
CSS Code
p.diary{
font-family: 'Prosto One', cursive; /*Prosto One is available at http://www.google.com/webfonts*/
position: relative; /*for more info on positioning see the Support section below*/
display: inline-block; /*prevent the paragraph from spanning the width of container. You could instead use a fixed width, but this way is neater*/
height: 100px;
padding:5px;
background: #dcdac6;
/*apply a small drop shadow to the date*/
-webkit-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
-moz-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
box-shadow: 3px 3px 4px rgba(99,99,99,.8);
/*give the text a drop shadow*/
text-shadow: 2px 2px 5px #919191;
}
/**NEXT STYLE THE DAY, MONTH AND YEAR**/
/*Day*/
p.diary .day{
position: absolute; /*removes the date from the normal flow, allowing the month & year to be wrapped around it*/
top: 10px;
left:30px;
font-size: 60px;
color: #aa0e3a;
}
/*Month*/
p.diary .month{
position: relative;
top: 60px; /*size of .day font and its shadow*/
left: 20px;
font-size:25px;
color: #3b788c;
}
/*Year*/
p.diary .year{
position: relative;
display: inline-block;
top: 40px;
left:0;
font-size:35px;
color: #ca4b29;
/*rotate the year by 90 degrees anticlockwise*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
font-family: 'Prosto One', cursive; /*Prosto One is available at http://www.google.com/webfonts*/
position: relative; /*for more info on positioning see the Support section below*/
display: inline-block; /*prevent the paragraph from spanning the width of container. You could instead use a fixed width, but this way is neater*/
height: 100px;
padding:5px;
background: #dcdac6;
/*apply a small drop shadow to the date*/
-webkit-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
-moz-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
box-shadow: 3px 3px 4px rgba(99,99,99,.8);
/*give the text a drop shadow*/
text-shadow: 2px 2px 5px #919191;
}
/**NEXT STYLE THE DAY, MONTH AND YEAR**/
/*Day*/
p.diary .day{
position: absolute; /*removes the date from the normal flow, allowing the month & year to be wrapped around it*/
top: 10px;
left:30px;
font-size: 60px;
color: #aa0e3a;
}
/*Month*/
p.diary .month{
position: relative;
top: 60px; /*size of .day font and its shadow*/
left: 20px;
font-size:25px;
color: #3b788c;
}
/*Year*/
p.diary .year{
position: relative;
display: inline-block;
top: 40px;
left:0;
font-size:35px;
color: #ca4b29;
/*rotate the year by 90 degrees anticlockwise*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
How to customize this diary style date widget
You can customize this widget like this. Take a look on the HTML code.- Now change the 21 with your date.
- Change march with the current month.
- Change 2012 with the current year.
That's it and you are done. So this was the way you can add a diary style date widget in your blog.
