• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

How To Add / Show Code in Blogger Posts

 Rohitkumar  03:47  Leave a Comment
Tweet
How To Add Code in Blogger Posts

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-
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>
You can easily identify this code and can copy paste very easily without any kind of error.

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/AVvXsEhpibHDO_E43TPENbB43KdarQBdgV8BzVYll9MPQAwv42hzkhlOodQYg9cKVWMAEj0h5Z0botUB3P1hmJRf2FZWZzRgIlmFNE5RDqsTlM500UwdmOfnvxwR-PMtqlaYJQRRKQwX_eDUhllW/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/AVvXsEhpibHDO_E43TPENbB43KdarQBdgV8BzVYll9MPQAwv42hzkhlOodQYg9cKVWMAEj0h5Z0botUB3P1hmJRf2FZWZzRgIlmFNE5RDqsTlM500UwdmOfnvxwR-PMtqlaYJQRRKQwX_eDUhllW/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/AVvXsEhOgdbB7cVMZUzsSFX9Eaa10A8BxLdCXH5KHaR9nK6ZHokMBEHAE26Zq0AvT0fY_EBZomQQcZSO-wLgGAvhdrIFXmQ0siCzv_h3SB74jqKABga7kbWXAbpdSTLstD0cl8vEIcEf4sanNo9h/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/AVvXsEg0puuIGMz1gNZhwPunwda0MCbFTnA0kRiAQEFFccwG2XLyaCOcmO3bibWZYK3pdwqtIKnB5kw3OI5aSQ6ELpOcpU1j9kVWYkpOmuMzdkFCBTcYm5_a6aOqawwKxKq3JagGPgtk6cioufZA/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/AVvXsEgt8W7zvQknh8-_zPVbzeJi2uNAjrwam8P_BHHKyzyMEzVkkcjrvU15Pc6gLyQgyXodEVx_wbcabHPHSlLJ-lw24mp7a882IepRmIePFf76YH5jejwLtIQ17Zkee4s6fbwAh77ry52lQhGt/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/AVvXsEhp0LnJrXvyPhYjsi3JsPvtRCXdqr8_ETor9ybDaAx1Vyaxwn0pWua9VKRfWufnDCRyGa_0EeFyxMZB-aJJkZGi06b69710ONSw9CKD13lwXfI9mapM-_x7jE4VazTAtQbFYBSWLLJDA1dm/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>
Your Parsed Code
</pre>
7.Now Copy all your Script code and Parse it through our Quick HTML Parser Tool.
[Click Here To Parse/Convert Your Code]
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.

Note : you can change font size (change 15px to your desired size) , Font Color (change #333333 to your desired color)

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.
TechEthix Recommendations :
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

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In how to, trick, widget
Subscribe Now

Get Latest Posts Directly Into You Inbox

0 comments:

Post a Comment

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • How to use full ISP bandwidth to speed up downloading
  • How to add Custom Fonts in Blogger or Any Website
  • MaterialMix : A Free Material Design Blogger Template
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!