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
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 Add Caption Above The Image With HTML And CSS

How to add captions above the images not below. It is possible to do it with HTML and CSS.

How To Add Caption Above The Image With HTML And CSS
How To Add Caption Above The Image With HTML And CSS
It is by default in blogger that when we add caption on images it comes below the image. So today we are going to make some changes. You will be able to add captions above the image, then the below. It will not change the default code of blogger for a caption, but you can do it for any image that you use in your post.


For example, when we add caption on images to blogger post, then it looks like this.

caption below image
Caption below image

As you can see captions are below the image, So the main goal of this post is to move the caption above the image. It has been possible through CSS using before and after elements. So you have to manually add this code.

How to add captions above the image.

Below is the html code. Copy the html code and paste it in the blogger post (html mode). And now change the IMAGEURL with the ORL of your image. Now copy the CSS code and go to blogger template. Then click on edit template and hit ctrl+f. Now search for ]]></b:skin> and paste the CSS code above it and you are done.

How To Create Polaroid Effect On Images With Ribbon Frame

How to create a Polaroid effect on images with ribbon frame. Give your image gallery a stunning look using HTML and CSS.

How To Create Polaroid Effect On Images With Ribbon Frame
How To Create Polaroid Effect On Images With Ribbon Frame

We have seen a CSS image gallery but this time we are coming with more advanced features. We will give Polaroid effect to your images and create a stunning image gallery. This is built in html and css. We have done that every thing which makes your gallery look awesome. This Polaroid effect can be given to any set of images.

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS