17 Feb 2016

How To Add HTML, Css Or Javascript Code To Blogger Posts


Add HTML codes to your Blogger posts
        Are you looking to Posting HTML , CSS or JavaScript codes in your blogger post? it may be your blog niche to post tutorials or teach coding. This is one of the most common question and a major problem for people using blogger platform.

So I am gonna help you with that and not just for the namesake but instead I am gonna teach you to wrap your code in 3 DIFFERENT STYLE BOXES (Chose your own style)

Yet, many blogspot users are unable to discover why they cannot display HTML coding as "plain text" in there posts. Many do gets error while inserting the codes and on the later hands you get a blank space in your post.

Also it doesn't work for programmers if you set your option as 'Show HTML literally' in your blogger post because you must be using different customizations to make the post look cool. So the customization code and the "Show HTML literally" would ruin your post. But yeah! It will work for 'one time code' post blogger (Bloggers who don't post codes or technology everyday as their niche)

     After a good Looooooong (Yeah honestly that long) research and lots of testing I Tony Stark, just kidding! ;)  found the easiest way to insert HTML without disturbing other elements and guess what?! it WORKS :D Today I'm gonna show you how you can easily insert any HTML/CSS/JavaScript codings in your Blogger posts AND that too in STYLISH BOX which will make your code look amazing and different from the all other text present in the post.

Check out these 3 styles and choose one which you want to work on your Blog

Style 1


Style 2


Style 3


I always advice my readers to make a habit of taking backup before you make any changes to template, be
a good blogger not just a blogger. To do so go to Go to Blogger >> Your Blog >> Template >> Click on Backup/Restore

Common steps for any style you select :-

1) Go to Blogger >> Your Blog >> Template >> Edit HTML

2) Click anywhere and press (CTRL+F) [its for searching the code we want] and search for

]]></b:skin>


Now Select one style out of the 3 styles, remember that you can choose only one style.

For Style 1 : Copy-Paste this code just above  ]]></b:skin>



.post blockquote {
background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQloUnw4vRHeQurw24ULmEQeCZAq7YQp_CYiJoaiOHOAmG9rmfpFgB98YV_ckOe3D7BKRyHg2EGbQg0HtnEptH9kulF6bjXIRR1Ti4mmAgDGWqVx-a0pJL_6A5igNXHuG7GgrLBlDlU/s1600/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}



For Style 2 : Copy-Paste this code just above  ]]></b:skin>


.post blockquote {
background: #f0ffff;
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}


For Style 3 : Copy-Paste this code just above]]></b:skin>

 
.post blockquote {
background: #d3d3d3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQloUnw4vRHeQurw24ULmEQeCZAq7YQp_CYiJoaiOHOAmG9rmfpFgB98YV_ckOe3D7BKRyHg2EGbQg0HtnEptH9kulF6bjXIRR1Ti4mmAgDGWqVx-a0pJL_6A5igNXHuG7GgrLBlDlU/s1600/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

 Now after posting the above code click Save Template

Time to Test

  • Go to Blogger >> Your Blog >> New Post
  • Copy-Paste this code below

.post blockquote {
background: #d3d3d3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQloUnw4vRHeQurw24ULmEQeCZAq7YQp_CYiJoaiOHOAmG9rmfpFgB98YV_ckOe3D7BKRyHg2EGbQg0HtnEptH9kulF6bjXIRR1Ti4mmAgDGWqVx-a0pJL_6A5igNXHuG7GgrLBlDlU/s1600/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}

Most Important Point

  • Now select the whole code that you just copy pasted and click "Quote" Button as shown below
Note: You have to Quote the codes which you want (Don't quote normal texts if you don't want it to) and only quote once.


That's it!!! Your Done, set! All ready to go :)
Good Luck! You Learnt something new today, Share it with your friends.........

----------------------------------------------------------------------------------------------------------------------------------
Join our mailing list to get these tutorials directly in your Inbox for FREE!

Want to be a Guest Blogger ? Its easy, send in your articles through Contact Us

Read- Blogger VS WordPress: Which is better? (Dilemma solved)
-----------------------------------------------------------------------------------------------------------------------------------

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)