How to publish code snippets in Blog

    
For those who like to post code snippets on your blogs, Syntax Highlighter 3.083 is a very useful tool. If you are using blogspot, you often have a mess with your code. Syntax Highlighter is a solution for you. I googled a bit and found couple of articles which I found useful. To know how to use Syntax Highlighter, please follow the following steps:

Login to your Blogger Account and Click on Design link and Click on Edit HTML, which is highlighted in the image shown below,

Now follow these simple 3 steps to publish code snippets in blogger:

1. Search for “/head” tag in the HTML template and paste the below script tags above that. 

[Note]: Check “Expand Widget Templates” if search result is not found.

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/> 

2. Search for “/body” and Paste the below javascript code above “/body”

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script> 

3. Paste the below CSS code before “]]>” in your HTML Template

.dp-highlighter
{
 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar
{
 padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
 padding-left: 0px;
}

.dp-highlighter ol
{
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
 list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
 border: 0;
}

.dp-highlighter .columns
{
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div
{
 padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span
{
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
 margin: 0px;
}

.dp-highlighter.collapsed ol li
{
 display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
 border: none;
}

.dp-highlighter.printing .tools
{
 display: none !important;
}

.dp-highlighter.printing li
{
 display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
 padding: 3px 8px 3px 10px;
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
 border-left: 0;
}

.dp-highlighter.collapsed .tools
{
 border-bottom: 0;
}

.dp-highlighter .tools a
{
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; } 

Done! Those were the changes to be made in the HTML Template and now you can start posting your source code in blogger as shown below:
While writing a post, select “Edit HTML” to write the blog post in HTML mode and wrap your source code snippet with a pre tag and add name=”code” and class=”“, after wrapping your source code it should look like something below,

<pre name="code" class="csharp">
//your source code goes here
</pre>

Here is the list of supported languages,

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

  

How to Add the Facebook Like Button Below every Post

  
Facebook has come up with  a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post . 

1. Go to this link and select the options and click on Get Code button (Code will be updated with these details).
 
2. Facebook provides code in two ways: IFrame and XFBML. You can select any one of them, XFBML has some advanced options than IFrame.

3. Copy the code(either IFrame or XFBML). Log in to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”.

4. Look for <data:post.body/> and immediately below that, paste the copied code. 

5. If you choose XFBML, then look for </head> and immediately above that paste the following code,

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

   (Note: You don't have to add this if you have already added this code for some other Facebook widget)

6.  Save the template and you should see the Like Button on each of your posts.
      

How to Hide Your Post Date, Time and/or Author

Some blog authors may want to hide Post date, time and author name. May be they want to see their blog looks clear or everything. Now, I will show you the trick to "hide your post date, time and or author". The methods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Before doing any changes make sure you have the backup copy of the code.

1. Login to blogger and go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.


For Hiding Post Date:
Find this code and delete it.
<data:post.dateHeader/>

For Hiding Post Time:
Find this code and delete it.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
 
For Hiding Post Author:
Find this code and delete it.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

 
Now, save your editing and check you changes.