Saturday, August 15

How to Create a Border Around a Post in Blogger

Your Blogger account gives you tools to style your posts, but you can take this a step further by creating a border around your content. A border provides an outline that spans the length of your post, adding a nice touch. Your border can be any size, style or color you wish so it stands out, ensuring your customers won't miss important announcements. Blogger gives you direct access to your post's HTML code. Edit this code to create an eye-catching border around your blog post.

Also Read: How to Add Border around Post Images on Blogger/Blogspot

Create A Border Around A Post In Blogger:

Step 1: Navigate to the Blogger website and sign in to your account.
Step 2: Click the blog post that you want to edit or click the "Create New Post" button.
Step 3: Click the "HTML" button on the top left corner of the screen.
Step 4: Enter the code <div style="border: 1px solid black; padding: 10px;">as the opening tag for the post around which you want to create the border.
Step 5: Substitute the number after the "border" property with the value of the width you want your border to be.
Step 6: Substitute the "solid" value with dashed, groove, ridge, inset, double or outset depending on what type of border you want around your post.
Step 7: Substitute the "black" with the color that you want your border to be. Values can be either the name of the color such as red, blue, green, yellow or the hex color code, such as #C92020.
Step 8: Substitute the number after the "padding" property with the value of the distance you want your post content to be from the border line.
Step 9: Enter the </div> tag to close the code section. For example to create a dashed, yellow border that is 5px in width and has a padding of 10px, the code would be as follows:<div style="border: 5px dashed yellow; padding: 10px;"> </div>
Step 10: Click the "Compose" button at the top of the page to view your borders. You can now add your content inside the new borders if it is a new post.
Step 11: Click the "Preview" button to see a preview of how your post with the border around it will appear when published.
Step 12: Click the "Publish" button if you are satisfied with the results and want to publish it to Blogger.
Newer Post Older Post

    Share This

1 comment:

  1. Good and well-written article :)
    Same article about Border For Each Blogger Posts
    Either way, keep up the great work :) <3