Apply different border colors on your images in blogger

You are here: Home / Tutorials / Blogging / Apply different border colors on your images in blogger

Blogger is one of the two popular and commonly used blogging platforms in the blogsphere. The second blogging service is Wordpress. All of the two offers a variety range of options for a blogger to perform different operations on his/her blog.

Customizing your blog's appearance is one of the major things that will add value to your blog and increase your visitors traffic. Having a blog with the same look and feel throughout all of the posts/pages bores visitors.

You've come to the right solution center where you will learn how to apply different line/border colors to your images in your blog hosted in blogspot. But keep in your mind that this is possibly done through HTML coding which means to change the border styles, colors and weights you have to implement HTML codes. Follow the steps below to familiarize yourself with these tips.

1. Log in into your blogger account

Type the blogger's main web address or URL (which is: www.blogger.com). Provide your log in details, i.e. your google mail address and your passwords, then click on the Sign in button.

2. Go to the posts editor

Click on the New post button to go to the post editor. If you always use the default compose mode, you will have to click on the HTML tab.

3. Click on the Inset image button

Click on the Insert image button located at the bar at the top of your post editor. Select your image as you always do. If you don't know how to insert an image on the post go to our how to insert a photo in your post tutorial. After inserting your photo you will see the code similar to the one below except the image and link tags URLs.

4. Add the below CSS code

Look the above code. Delete 'border="0"' and replace with the below CSS code:

style="border:4px solid #000000;"

Above is a format of Cascading Stylesheet code (typically known as CSS code), that helps web designers to style their HTML documents. 4px is a value for the weight of your image's borders. For our case change 4 to any number that will fit your interests and make sure to add px after the number as they go together. Alternatively, you can use em or % instead of px if you prefer.

#000000 is a color code which prints black color on the web page when viewed in the web browser. Change it to any color code or name. If you don't know the color codes, simply type on the name of any color you want to decorate your border with, such as blue, green, yellow, black, etc.

See the complete code below:

See our code's results below, that is an image with a black border.

5. publish your post

Now you can switch back to compose editing mode or publish your page to see how your image/photo looks like. For more practices try changing different colors and border sizes.

Apply different border colors on your images in blogger

1. Log in into your blogger account

2. Go to the posts editor

3. Click on the Inset image button

4. Add the below CSS code

5. publish your post

Related articles

See also:

No comments:

Post a Comment

Apply different border colors on your images in blogger

1. Log in into your blogger account

2. Go to the posts editor

3. Click on the Inset image button

4. Add the below CSS code

5. publish your post

Related articles

See also:

Mjknetten

No comments:

Post a Comment