How to Add Borders to Images in Blogger

add borders to images in blogger
Inserting or adding  images  to Blogger  is necessary to emphasize more of what we are going to deliver to  our rreaders. And in order to make this photo more proffessional in looks and be different from others, we will add borders on it.  Here, in this article I will share to you how to add border(s) to an individual image using HTML .
Before we will go to the steps, let me show you first the different border attributes or styles namely: dotted, dashed, solid, double, groove, ridge, inset and outset. See the demo below:

Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset

Now you have seen those different border styles, it is now time to proceed to the tutorial. Please follow the steps below:

How to Add Borders to Inserted Images in Blogger


Note:

You must have to know first how to get the  image link (url) of your uploaded images  in Blogger before you can apply this trick. Please click this link for assistance.

Step 1. Go to Blogger Dashboard
Step 2. Select a certain post or  you may choose some published posts with images that you want to add borders on it.
Step 3.  Copy the HTMLcode below and paste it in your Blogger Post Editor page. (Your page editor must be switched to HTML Mode).
<img src="http://2.bp.blogspot.com/-YfeHiEQ9oTQ/UxiIwApRJ9I/AAAAAAAACH8/KXBGtzcNT2g/s1600/add+borders+to+blog.png" style="background-color: white; border: 3px dashed orange; margin-left: auto; margin-right: auto; padding: 1px;" />

Customizations:


- Replace the black bolded texts w ith image link (url) of your photo.
- Background color is white, you may change it according to your blog's color.
- Border attributes here are 3px which the size, greater numerical value will mean a larger size also. Dashed is the border style, you can change it with the different border styles as  shown in the demo above.  And orange for the color of the border.
- For the padding, greater numerical value will make your borders to pull out from your image. See the demo below


Note:

The first image has a padding of 10px while the second one has only 1px.

Step 4. Publish or update  your post and you are done. Congrats! :-)
Peace Buddies!!!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Dip the bandages, 1 at a time, in to the answer so they're totally soaked inside the warm 'mineralized' h2o, and wrap firmly about the principal locations of cellulite (e.

    Those senior moments can turn into senior memories if you
    continue to exercise your brain. In all campaigns regarding breast cancer women are
    strictly asked to be well familiar with their breasts.

    Review my website :: nicht normal (nichtnormal.de)

    ReplyDelete
  2. I could not refrain from commenting. Perfectly written!

    my web page :: remove survey ()

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...