Sunday, 12 May 2013

How to Embed Code Snippets in Blogger Blogs and Websites

If you want to include code snippets on a page or an article, this tutorial will help you out. Below is an example of code snippet.
code-snippet-demo
This tutorial will teach you how to insert scripts as they are(snippets). This is very simple method and the scripts you want to show will have no decorations.

How to Include Code Snippets in Blogger Blogs?

1. You need to include the CSS first. It should be added in the header part so that it is not needed to add again and again on every page. Go to your Blogger dashboard. And then go to Template-->Edit HTML. Copy and paste the code in the following snippet before the </head> tag and click Save Template Button. That is all. You saved the styles in the template. So, you no need to specify the styles each time you include snippets.
 <style type="text/css">
.code-snippet{
   background: #ffffff; 
   overflow:auto;
   width:auto;
   border:solid #808080;
   border-width:.15em .1em .15em .8em;   
}
.snippet-pre{
   margin: 0; 
   padding:.6em .6em .4em .8em;
}
</style>

2. The snippet you want to embed in an article needs to be encoded. So, go to this website. Convert your code.

3. The code given below is the code you should add in your blog post to include snippets. Replace the text “converted code” with the above converted code.

<div class="code-snippet"><pre class="snippet-pre">converted code</pre></div>

4. When you create a new post in Blogger, switch to HTML mode. Paste the above code at the place where you want the snippets to appear and publish your article.

How to Include Code Snippet in Websites?

1. We have to include the styles in the header part. So, first copy the style code in the below snippet and save  it as snippet.css and include this file in your server.

.code-snippet{
background: #ffffff; 
overflow:auto;
width:auto;
border:solid #808080;
border-width:.15em .1em .15em .8em;   
}
.snippet-pre{
   margin: 0; 
   padding:.6em .6em .4em .8em;
}
2. You need to link this style sheet to every page you want to include code snippets. So, include the code given below before </head> tag. Note that href should have the URL of the style sheet.

<link href="snippet.css" rel="stylesheet" type="text/css">
3. Next is your code snippet. Open the web page in your favourite editor and include the code given below at the place where you want to include your snippets.

<div class="code-snippet"><pre class="snippet-pre">converted code</pre></div>
4. You need to the change the text “converted code” with the encoded text of your code which you want to include as snippets on the page. Go to this website to do the encoding.

5. Finally save your page.

This is very simple. There is no formatting or highlighting of the script. I am going to write an article about the plug-ins and online resources to create cool code snippets, in future.

You may also like the article “Free Online Tools Needed for Webmasters to Create Cool Website”.


Share and Subscribe

Share and Populate

Get Free Updates in Your Inbox

Site Admin

My Theme Shop

9 comments :

  1. excellent piece of information, I had come to know about your website from my friend kishore, pune,i have read atleast 8 posts of yours by now, and let me tell you, your site gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanx a lot once again, Regards, Education India

    ReplyDelete
  2. Thanks a lot! Your article is pretty good. I like it

    ReplyDelete
  3. Thanks for useful info. I will recommend your post to my friends (writers at http://special-essays.com); I think they will also like it.

    ReplyDelete
  4. I always like your blog post because you always come with different ideas and information. Writings-centre.com

    ReplyDelete
    Replies
    1. Thank you for your felicitations.

      Delete
  5. Great post!Thanks for sharing it.

    ReplyDelete
  6. I like to read your blog, it is very informative and user-friendly, best wishes

    ReplyDelete