Top Html And Css Codes That All Bloggers Should Know

How to Style Blog Post Headings?

See that, that one is heading. This is a way to tell a reader what’s in your post. That is why headings are the most important things in a web post. Commonly headings are as follows

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Here is how this HTML Heading Coding look like –

And that’s how you can make these kinds of Heading in your blog post by using these heading tags- 

<h1> Heading 1 </h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5 </h5>

How to Add ‘NoFollow’ or ‘DoFollow’ Attribute in links?

It is really one of a very important role of “Dofollow” or “Nofollow” attributes in a link, especially for SEO purpose. You can add these attributes by adding a relation tag ( rel=”” ) in a link. Write Html codes as shown below-  
<a href=”YOURLINKHERE” rel=”nofollow”>Title of link here</a>

How to insert Images Manually?

By this Html Code, you can add an image anywhere, in a post, page or widgets and this is how you can do it-

<img src=”YourImageURLHere”>

How to add a link with Image?

Sometimes you wish to add a weblink with your image or Widget image and you don’t know how to do it. Well here is the solution of this-<a href=”YourLinkHere”><img src=”YourImageLinkHere”></a>

How to create a list in a blogger post?

Creating an ordered list or Bullet point list is quite interesting. Here are the example and solution of how you can create an ordered list or bullet point list in a blogger post-   

1. List Item 1
2. List Item 2
3. List Item 3

• List Item 1
• List Item 2
• List Item 3

The List Html Codes look like this-

<ol>

<li>List Item 1</li>

 <li>List Item 2</li>

 <li>List Item 3</li>

 </ol>

<ul>

<li>List Item 1</li>

 <li>List Item 2</li>

<li>List Item 3</li>

 </ul>

Basic Text Editing Style HTML Codes

BOLD

EMPHASIS

STRIKETHROUGH

sometimes you always wish to make your text in a style and here is some basic text style you can use in your post.

How to do it?

<strong>BOLD</strong>

<em>EMPHASIS</em>

<strike>STRIKETHROUGH</strike>

How to change a Font Color manually?

This Html Code can change the font color of fonts. For colors, you need to know about Hex codes for colors. For more solution, you can take help of Google. <span style=”color: #ff8f8f”>changing a color of words</span>

How to Change a Font Style manually?

<span style=”font-family: Georgia, serif”><strong>changing the font family</strong></span>

How to change the Size of Text manually?

<font size=”5″>size of your words</font>

How to create an EMail address link manually?

Emailing is another way to communicate with your reader. You can make your email address link so a reader can mail you in just one click. Click Here to email Shankystuffzmedia

<a href=”mailto:shankystuffzmedia@gmail.com”>Click Here to email Shankystuffzmedia</a>

How to create a Table in a Blogger Post?

Making a table is quite an interesting topic in blogger. In wordpress website, so many plugins already have in plugin store. But in blogger, you have to do it manually. And this is the solution of adding a table in a blogger post-  

Heading 1	Heading 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 3

Here is – Table Html Codes for a blogger post

<table>

<thead>

<tr>

 <th>

<h5>Heading 1</h5>

</th>

 <th>

<h5>Heading 2</h5>

</th>

 </tr>

 </thead>

 <tbody>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

</tr>

<tr> <td>Row 2, Cell 1</td>

<td>Row 2, Cell 3</td>

 </tr>

 </tbody>

 </table>

How to create a Button manually in blogger post?

You can add a button with a link, like a download button in your blogger post. The button will look like this according to your theme CSS or Codes-

Button

Button Html Code for Blogger post-

<a href=”YourLinkHere” class=”button”>Button </a>
Here are some basic solutions of common blogger post problems. You can write in comments if you know some more styling codes for blogger post. I will keep trying to make your blog awesome. Read more blogger post problems on our Blogger Section.