In this tutorial I will show you the easiest way to post and publish an html code for your blog viewers.
This method will be done with block quotes and how to use Firefox Encoder Decoder Add-on.
Step 1:
First thing you will have to do is download an add-on from firefox, called "Encode Decode HTML"
Click Here for the link.
 |
| Firefox Encode Decode Html Download Screenshot |
After you have installed the add-on for firefox, you can find it at the top right of your firefox browser.
 |
| Firefox Encode Decode Html Shortcut Screenshot |
Im going to use an example from one of my previous posts, like the image below.
Align your widget to center
<div align="center">
Your widget code goes here...
</div>
Step 3:
First highlight and then Copy the entire code in the box above, by pressing Ctrl+C.
"This will basically be the code that you want to show as is on your blog post"
Now if you go to your blogger post and you paste it directly to your blog post either in compose or html mode, it will look like this.
This is not the outcome that you wanted, it will basically only paste the text area as it is.
Your widget code goes here...
You want it to look like the first box, so follow the steps below.
Step 4:
What we need to do is Copy the code in the 1st box above again.
Step 5:
Open your Html Encode Decode Firefox add-on.
Step 6:
Now delete the default text in the "Enter Html" box.
Step 7:
Paste the code in the box by pressing Ctrl+V.
After pasting your code it shall look like the image above.
Step 8:
Press Encode
After encoding, you will get your transformed Html code like above.
Step 9:
Now Copy your transformed code by pressing Ctrl+C.
Step 10:
Open your blogger account and edit your desired post, or create a new one.
Step 11:
Now paste your Encoded Html code in your post.
This image shows how your code should look like in your post.
Step 12:
Highlight your code and press the block quote symbol, marked with a red box in the image above.
Step 13:
Save or Publish your post and your done!
Align your widget to center
<div align="center">
Your widget code goes here...
</div>
The image above will be your end result.
No comments:
Post a Comment