Add Line Border In Your Blogger Post To Make Post Stylish
8 Stylish Line Border Style Widget For Blog Posts
Hi Bloggiyan! Today we are sharing border style for blogger post. You can add your post content under these border with simple HTML coding. Its benefit to get user attention on your post content also clear view will help user to read easily your content. Hope you like these border style & like to add in your post . No widget installation no template editing required to add borders .
Lets see how its work
1. Login to your blogger dashboard2. Click on "New Post"
3. In the post editor click Edit HTML
4. Copy and paste the code in the box below, in where you want your line border to appear.
Style 1
Use the code below for Solid border line.
<div style="border-style: solid;">
<span style="color: black; display: inline ! important; float: none; font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Your Content Should Be Here
<span class="Apple-converted-space"> </span></span></div>
<span style="color: black; display: inline ! important; float: none; font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Your Content Should Be Here
<span class="Apple-converted-space"> </span></span></div>
Style 2
Use the code below for Double border line.
<div style="border-style: double; border-width: 3px">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
Style 3
Use the code below for Dotted border line.
<div style="border-style: dotted">
<span style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none; "> Your Content Should Be Here<span class="Apple-converted-space"> </span></span></div>
<span style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none; "> Your Content Should Be Here<span class="Apple-converted-space"> </span></span></div>
Style 4
Use the code below for Inset border line.
<div style="border-style: inset; border-width: 3px">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
Style 5
Use the code below for Outset border line.
<div style="border-style: outset; border-width: 3px">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
Style 6
Use the code below for Ridge border line.
<div style="border-style: ridge">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
Style 7
Use the code below for Groove border line.
<div style="border-style: groove">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
Style 8
Use the code below for Dashed border line.
<div style="border-style: dashed">
Your Content Should Be Here</div>
Your Content Should Be Here</div>
You can put your text or images under border.
If Like this post please add rating or want to know something more feel free to comments here .
