Show Each Blogger Post In Stylish Hover Effect Separate Box

Display Each Blogger Post In Stylish Hover Effect Separate Box

Hi bloggiyan! One of the major parts of web designing is make a design as clear as possible in terms of usability. For example, the reader should be able to easily identify that this is a sidebar and this is main column where all your posts are displayed. Normally all the Blogger posts are in a single big box with just a border at the bottom of each post on homepage. That border is used to make the reader aware that the next post is a separate post. That is actually a very normal and basic way to separate the posts. Today we are going to make the posts more clear for the reader by displaying each of them in a stylish separate box or you can say section or a block. We are just gonna take a basic style and you can obviously make your own style out of it. The main thing is you will learn how to do it so that you can customize it more. We know that most of you may know how to do this but there are even several newbies waiting to learn some basic tricks and we can't leave them alone.Have a look below image .

 In Demo We just add shocking color on hover to view proper effect

Demo Here

Styling the Blogger Post Block As this tutorial is basically for newbies, we will separate each code block clearly so that you do not mess it up. So first we are going to style the Blogger post in a way that it looks like a separate box. After looking at the demo you would have noticed that every post is in a separate box with some shadow and rounded corners around the box. We may have also noticed that the background is a bit yellowish if you watched the demo carefully, though it is not so visible. On hover the borders change and the background goes to white smoothly which is due to CSS3 transitions we used. Let's learn how it is done.

STEP TO ADD EACH BLOG POST IN STYLISH SEPARATE BOX INTO BLOGGER

1. Go To Blogger -> Template -> Edit HTML ->
2. Proceed Search For

.post {

or search for

.post{

This is a CSS selector which is normally used in most Blogger templates to style the Blogger posts. If you can't find this code, then search for a similar code. The code looks similar to the below screenshot.

3. Now replace the properties inside it with the properties given below.

margin: 10px 10px 40px 7px; padding: 15px; border: 1px solid #CCCCCC; -webkit-border-radius: 0 20px 0 20px; border-radius: 0 20px 0 20px; background: #FEFFE6; -webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;

4. Save your template and check the blog. 
Your code will now look like the code in the below screenshot. 

Styling the Blogger Post block on Hover 
After looking at your blog you would have notice each of your posts are now a separate box. But you won't see any change when you hover the post. So now we are going to style how the post block will look like when hovered. Just below that whole code paste the following code and Save template.

.post:hover { -webkit-border-radius: 20px 0 20px 0; border-radius: 20px 0 20px 0; background: #fff; }

:hover is a Pseudo Class which can be used with any CSS selector to style the element when hovered. A bit technical, isn't it? In layman terms, it can be used to control what will happen when a reader hovers on a link, on a block, on a button or anything. Now check yourtemplate and you will see the difference in borders when hovered. Your final code will look like the one in the below screenshot.

 Customization :

1. Adjust the margin values 10px 10px 40px 7px if your posts are misplaced or are not properly aligned.

2. Alter #CCCCCC to change the border color

3. Alter #FEFFE6 to change the background of the post box

4. Alter #fff to change the background color on hover