Box Model for Putting Information Code for Blogger

If You Are Readers Of Blog,Then You Can Notice So many Blog Use Box Model To Show Important Code. In Blogger You Can Use Box Model System That look Your Post Awesome. You Can Put Your Code Here so That Visitors Can Get Code Easily. it make Extra Style For Your Blog Post. Here Is A Example Of Box Model We Are Going To Tell Here In Details.

Demo Box Model-

How To Implement Box Model In Blogger Blog Post

Follow The Below Steps To Put Box Model In Post-
Step 1:

• After Log in Blogger Blog, Go To Theme> then click on Edit HTML
• Then Search For Code ]]</b:skin> using Ctrl+F
• After Finding That Code ]]</b:skin>, You Need To Put Given below Code Before ]]</b:skin>

.Box-model {
background-color: #FFF1C7;
border: 5px solid #F2E1AC;
padding: 10px 30px 10px 15px;
margin: 0 0 1em 0;
font-weight: bold;
font-size: 13px;
position: relative;
}

Now save Template

Step 2:
Let's Move To Step 2. In This part We Are Going To Add Style On Blogger Post .

• Go To Post Editor(Click-Create New Post). Here In post Editor, You Can Notice Compose And HTML Mode. You Need To Turn On HTML Mode To Add Box Model Style To post.
• In The HTML Mode You Need To Add Code like That

<div class="box-model">
<p>Here we have shown you the live demo of Model box, This is just an image of Model box.</p>
</div>

• Then Again Come To Compose Mode, Then Try to publish Post. let's See On Front page.
• In The Code, notice The Blue Colored Text. These are The Text That Will Be Applied into box-Model class. You Can Change Those Text. Use Your Own Text That You Can Want To show In The Box Model.

Here is A Live Example Of Box Model-

Related Posts