Friday, May 9, 2014

How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts

It is the most talking thing that 'How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts'. Specially it is very much needed for new bloggers . So I will show you how to Insert or embed HTML, CSS, JavaScripts Codes in Blogger Posts.

How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts

First we will insert the CSS style Sheet to stylize our quote box.

  • Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed 
  • And now Search For ]]></b:skin> With (CTRL+F)
  • After you find ]]></b:skin> just above it paste the following coding

.post blockquote {background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYACKOLDHJbxdc0qAMYAS0aLkMYSlYPckKZAa8ttg8thlvdDT_tsDGGPUcgHQcc7TSHj2Rzycbw0vaXgPUKOW2NFyr1keNxdOiica1KHPG5ddZyKYDrm4oZDPMAuw493ASv08Awzjlt2g/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 pasting the above code save your template by pressing Save Template Button



Now in order to display the HTML, CSS or JavaScript coding in your Blogger post we'll use a blogger tool called "QUOTE". This tool is available in your Blogger Post Editor which will make your HTML Coding appear as plain text,


  • First Go To Blogger >> Your Blog >> Create a New Post >>

    How To embed HTML, CSS, JavaScripts Codes in Blogger Posts
  • Now Select the HTML, CSS or JavaScript coding which you pasted previously.How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts
  • Now After Selecting the HTML, CSS, or JavaScript coding just Press the "QUOTE" button Which is at the "Top Right" of you "Blogger Post Editor Tool Bar" Remember: Press the Button only once.
How To Insert HTML, CSS, JavaScripts Codes in Blogger Posts



Finally published your post.And show your result.





No comments:

Post a Comment