Friday, 24 January 2014

How to Add Each Blog Post in Seperate Box?

In lots of Blogger Templates maybe you have seen that there isn't a separate box for each Post but this is now possible to add each blog post in separate box. Actually this hack could be applied by using CSS, After applying this trick each post are going to be shown in an seperate outside box and when ones hover mouse it'll change the Border Color when again Hover it'll automatically again change colour. This is a great step to bring out more professional looks to your blog and attracts more visitors. So lets start how to add this effect.

How to Add This Effect?

  • Go To Blogger Dashboard
  • Select Your Specific Blog and Click on Template
  • Then Click On Customize
  • After that Click On Advanced Option
  • And Then Select CSS: (i.e Add CSS)
  • Now Copy the below Code and paste it over there.
.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}
  • That's it
Customization :- If You are interested in Changing the background Color then Replace #FFFFFF with Your Own Color Code.And If you want to change the Border Color then Change #000000 #FF0000 #0004FF  to Your Desired Color Code.

Final Words:

So this is an amazing tutorial to show each of your blog post in a different box and attracts a lot more visitors. Now It's your turn to share this post with your friends and also share your views with us in comments till then Peace, Blessings and Happy Blogging.

No comments:

Post a Comment