Howdy Reader,
In this Tutorial I will help you guys to Add HTML codes to your blog post. As we know that adding HTML code is not possible in post directly. Blogger had come up with a new thing you can directly put the HTML code in your blog when you are posting/editing a post there is an option, by clicking on
Post option > compose settings and checking the Show HTML literally.
What ever you type in HTML will be shown there directly in your post.
But there is another way to show your post in some cool boxes.
Just add this below code in your post and you will get a blue box like below and in it you will be able to add your HTML code directly. but you need to keep this code with you. Save it in a notepad.
<pre style="background-attachment: initial; background-clip: initial; background-color: #edf7f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(181, 181, 181); border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(181, 181, 181); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(181, 181, 181); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(181, 181, 181); border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-top-style: solid; border-top-width: 1px; clear: both; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.857em; line-height: 1.5em; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 15px; max-height: 400px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; width: 565px;"><span class="Apple-style-span" style="color: #073763; font-family: Georgia,'Times New Roman',serif;"><span class="Apple-style-span" style="color: #073763; font-family: 'trebuchet ms',verdana,arial,sans-serif; font-size: xx-small; margin: 0px; padding: 0px;"><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="font-size: 15px; font-weight: normal; line-height: 22px; margin: 0px; padding: 0px;"><span class="Apple-style-span" style="font-family: Arial,Georgia,'Times New Roman',Times,serif; margin: 0px; padding: 0px;"><span class="Apple-style-span" style="margin: 0px; padding: 0px; white-space: normal;"><data:post.body></data:post.body></span></span></span></b></span></span></pre>
Enjoy and hopefully it was useful.
P.S. always check on show HTML literally. otherwise the the code wont show.
0 comments:
Post a Comment