In This Tutorial we are going to learn Adding Codes in Blogger Posts or Showing Codes in Blogger Posts.
Many Bloggers try to add/show code snippet in blogger posts but without using proper coding the codes get overlapped i.e. if you have pasted any blogger widget code in your blog post then it will be posted like the original widget itself on blog there will be no code shown on your blog.
To eliminate this issue, today I'm going to tell you how to overcome when you have to show script codes in your posts.
You have a look on our live Demo :
Here is your script code you want to show.So here above box might contain any widget script code like the following if you want to show.
Here is Our Demo [Add Our Blogger Badge]
<a style='text-decoration:none;color:white;text-You can easily identify this code and can copy paste very easily without any kind of error.
transform:uppercase;background-color: #00C4FF;padding:4px;border:4px solid #00B5EC;border-radius:8px;font-
weight:bold;font-family:georgia;border-bottom-left-radius:2px;border-top-right-radius:2px;text-shadow:1px 1px
1px black;' target="blank" title="MyRockingTricks - Tech Me Awesome : Best Blogger , Computer , Internet Tricks"
href="http://myrockingtricks.blogspot.com/">MyRockingTricks</a>
Now, How To Add/Show Such Stylish and Professional Codes in Your Blog Posts
You need to follow these simple steps :
1. Go To Blogger > Template > Edit HTML.
2. Find the following code.
]]></b:skin>3. After finding this code, Paste the following code just above it.
pre {
overflow: auto;
font-size: 15px;
font-weight: normal;
line-height: 20px;
text-transform: none;
color: #333333;
font-family: Georgia;
background: #F7F7F7 urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMuvcIki-yJOZuI1cUShDLDccO5b9Pd76by3YZ7RHYz1s5a1QZRJj9ABjN0skVovBFdcc0Kr9fUBg21lrkzBDuelagy4lgvmet9k3HHykNiwSE8LNILo9RYgpJn8fdD1n5AUziWwP9UX7Z/s1600/code.png') 10px 2px no-repeat;
padding: 2em 1em 1em 1em;
border: 1px solid #DDD;
margin: 15px 0;
}
/***** Notifications *****/
.message_box { margin: 15px 0; }
pre { overflow: auto; background: #F7F7F7 urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMuvcIki-yJOZuI1cUShDLDccO5b9Pd76by3YZ7RHYz1s5a1QZRJj9ABjN0skVovBFdcc0Kr9fUBg21lrkzBDuelagy4lgvmet9k3HHykNiwSE8LNILo9RYgpJn8fdD1n5AUziWwP9UX7Z/s1600/code.png') 10px 2px no-repeat; padding: 2em 1em 1em 1em; border: 1px solid #DDD; margin: 15px 0; }
.note { color: #666; border: 1px solid #FDEBA5; padding: 0.5em 1em 0.5em 3em; background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjSYXzawQzfpiQrXtfzGY6pOgMVBs_kf8PhYH0u8Egmngtu_kuOcwzuS83XtrPH7Eta-rhxyJIagGlcXVpjOHgrST8KPEigTXtVvh_MlM_20RLLkxC0VVLI9uELN2OnB-lVXpHcn3EMVd/s1600/thumb.png") no-repeat scroll 10px center #FEF4C8; }
.announce { color: #666; border: 1px solid #BEE5F8; padding: 0.5em 1em 0.5em 3em; background: urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-gOs1RiuCO6_gpEs-7nZTcYWBXUDCCemxUajAXA_4wsEghkDKuR7hI1eWfbVJk183gl27oNn0riLslizJq9CQY6DD78asd59cd19szNcFyQkg1mARNgjlWPAIJ-c2dR3eUclw5DFS7Hw/s1600/speaker.png') no-repeat scroll 10px center #D7EFFB; }
.success { color: #666; border: 1px solid #DEF1BF; padding: 0.5em 1em 0.5em 3em; background: urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4TnWcYzOzomucFDRxosNANgn-HxgnUGHDGxOqwv82_OfS2bmwdAsn6pL2mw5dMZipFcs02tvB2-WsNQGY36Xht3UnxN_m7BnaBrRHVpgQuhlDaA8cMkU5aGkguGnkkaD7wg6RodHgMG_j/s1600/tick.png') no-repeat scroll 10px center #E8F6D2; }
.warning { color: #666; border: 1px solid #FFDBDB; padding: 0.5em 1em 0.5em 3em; background: urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjHkSST_3rOip2ZDXLt9O0W6huDCzMBBwT4Nzcx9nQafr_ylwB-l9mdOjMLcZuti6-JlWu0sbI-ZJco-hHry5-8i3eB5q0oj77FTxk849gtTpmKvJ9C3qJmVcjYD56kkCEraSd9IaU0L2/s1600/cross.png') no-repeat scroll 10px center #FFE7E7; }4. Now Click Save. You are done.5. Now you have to do one simple task, while wrtting post article, go to HTML Section.
6. Place the following code.
<pre>7.Now Copy all your Script code and Parse it through our Quick HTML Parser Tool.
Your Parsed Code
</pre>
Remeber : The code will not work until you parse/convert it, now paste your parsed/converted code instead of "Your Parsed Code"
8. Thats it, Publish your blogger post , go to your blog and check it.
Don't forget to add your comment and subscribe our blog posts by your Email for latest and most unique Blogger Tricks and Tech Information.
You can also share this post with your friends. Don't forget to add Our badge to your Blog.
1. How To Change Blogger Scroll Bar
2. Add Beautiful CSS Expand On Hover Social Subscription Widget for Blogger
3. Create a Beautiful CSS Blogger Badge for Your Blog
