Saturday, 24 January 2015

How To Add Colored frame on all Blogger Images

How To Add Colored frame on all Blogger Images
Bloggers always try  to make their blog unique by adding different design. There are many ways to add design into your blog, but often we can make our blog attractive by using simple trick. Generally we use border on blogger post image to make it attractive so I have planned to make border as colored frame. Image with frame make it different from blog background.  Suppose If you have added a white image with white background blog then you image may not be visible.  So if you want to make you blog image attractive then you must use frame on every post image. But it is not possible to add image border manually to every post. So I am going to share a trick where you can easily apply image border automatically by adding this magic code. And I have used RGB color instead of Hex color to make it distinctive. After adding the code your image will be within a ash color frame by default and whenever  you just mouse  over on them your image border frame will be change the color.  Using this trick your blog won't get slower or affect on other widget so you can use it easily. Just follow the below simple steps to add color frame on your blog image.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 

/* Image Frame By*/{
} img{
border: 10px double #D3D3D3;
} img:hover{
border: 10px double rgb(10,218,243);


  • Alter D3D3D3 to change the image default frame color
  • Alter 10,218,243 this to change the hover color.
Previous Post
Next Post

post written by: