Add Sharing Widget To Blog

You can
simply integrate this widget with your blog by adopting following
procedure. So lets see how to add this widget on the blog ?

How to Add Sharing Widget To Blog:-

Go to Design / Edit HTML.

Click "Expand Widget Templates".

Take Backup of your blog template, it is very necessary (More info).
Find following piece of code in blogger template.

<data:post.body/>

Add
the following code just below it. If you find <data:post.body/>
code in more than one position then add the following code just below
the <data:post.body/> on everywhere you find.

<!Widget on www.internetricks4u.blogspot.in --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #E0E0E0;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#FF3030;position:relative;top:12px;'><center>If you enjoyed this article then kindly take 5 seconds to share it!!</center></div>

<table align='center' cellpadding='8' cellspacing='1' id='myshare'>

<tr>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtJ4hLjLMFf1qexEJ14OYRmSm-cWOzKPtdGpNnQKje6Hjngbve8L_H6WxROBXPAHOaTxQqyAdbNcD_Jb2-YR3QQXqyiULVvYqKn9tbfAwESa3Z94kf1Ue906T9cHAeUU6XnfDFkChoV0/h120/1.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9GHAdObg1M32rU1bkujkx8BPzPFW0gCYRQsDd6b9ZWN_VXjevt8gaY-kGhNPwBWOqZP0DERhL8yucEA2afH-b2ORhXPIFbJS9h6wOx9XULEpNiriNLC6OkWMbtQWPq-argoIdT4uS2U/h120/6.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlyWhbhPW3eQWME4JqdQOLDw3K2yMfiZdinqjY5aDTLje0PDuzEsXXxXMGm_0qDiSRQaIWvi7JXmtwphYQttsRmLiiPr-kw7FrdFfJuojJ40dgyZJuauO7UINHXwrW_cZ1MnociSbCJk/h120/5.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiib7_KGK2LITPNHaEGcuDFwnhzHGiBRGk-ZSrkDGEAuyRrPss4kUOTXuhd32lfutMpvICQKSKNb1yXunj0W6KLHs7HOFrgkHMcfFTbZnl8S65easB0WpHFfRULIiaRjMi5vJS2Qrnfctk/h120/3.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKBng6g2wbMPL8C6QIIdlQcB8jQDW_1ojzroviNNM9TG2RyhLBtnd1F01zWyWF8NhUWB79UZrh5JgqMvhEeATWCEZD0jITdWx3D7gDeCFp7j5fmkaM6bhMMRZa5kRyLis0i2Kynoi2bc/h120/2.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypvZHZRVmNQlpczTRDg0HfQmYGWII58j5aot1XI9Zd6UyDVZjHu8hCSlOxLwYzjlafEozZgjeM0OAok_RVbuJnShZJsa_eFTVsQtyWIC2oiAI449u-JOHDXHWHDqedggU6a4xX-6COuQ/h120/4.PNG'/></a></td>

<td><a target="_blank" class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkW9zR7CzAnP_S4-7n3w_KPvmvRuCcsmsVMxqdJNYM4m-rLd9TTlZ045Pmy9kQaLqSVuqSqMdpeYHtAZao-7TH9oOYIY0RW7z5PjFpVwgMw9I-gqBsonIZRSDARVXYfSpOGPARiSspyE/h120/7.PNG'/></a></td>

</tr>

</table>

</div></b:if>

Now search the following section in the template.

]]></b:skin>

Add the following CSS code just above it.

#myshare

     {width:100%px;

      height:50px;

      border:0px solid red;

      position:relative;

      }

#myshare tr td img

      {width:50px;

       height:50px;

       position:relative;

      }

Finally save your template and see the result.

If anyone find difficulty in placing the above code then comments
are always open for that. If you like the above article then don't
forget to subscribe it for latest updates.

Improve Comment Box with Disqus

Disqus is a global community that improves the discussion on the
websites and connects people across the Internet. You can easily update
your Blogger comment box to Disqus. It makes commenting easier in your
blog and can be implemented into your blog very smoothly by following
steps.

                          1.Firstly,login to your Blogger Dashboard.

                          2.After that open Disqus in new window without closing the Blogger.

                          3.Click "Sign Up".

                          4.Fill all the details and click "Continue".

5.Choose your Platform i.e blogger,wordpress.

6.At last click "ADD WIDGET".

source : http://internetricks4u.blogspot.in/2011/09/improve-comment-box-with-disqus.html

Add Meta Descripttion to Blogger Post

Blogger has now become more friendly with its new updated features. Blogger now finally introduced most awaited SEO
features for Google hosted blogspot blog. Blogger team is trying to get
closer to its biggest competitor Wordpress. Now you have no need to
hack template for adding meta tags.
You can easily add meta description, meta tag to not only for your Blog
homepage but also for individual posts or static pages. So lets see
learn the tutorial.

How to Add Meta Tag And Description:-

Go to Design / Edit HTML.

Download the full template before making any changes in it.( More Info)
Find following piece of code in blogger template.( say code 1)

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

If you find the above code then there is no modification needed in
template but if you don't find this code then search for another code (
say code 2).

<meta expr:content='data:blog.metaDescription' name='description'/>

If you find code 2 then replace it with code 1 but if you don't find code 2 also then add code 1 just below the <head> section of template and save the template.

Add Meta Description To Blog:-

Go to Settings / Search preferences, Under Meta tag / Description, click "Edit" and select "Yes" , Now write a meta description about your blog in space provide.

Add Description To Your Post:-

While writing a new post in blogger post editor then you will find a
new option called "Search Description" under "Post Settings", where you
can add a short description of your individual post.

Finally I want to say that if you find difficulty in adding meta
description then you can drop your comment below regarding your problem.

More article from the same author Improved

Pre Tag As Syntax Highlighter

Syntax
highlighter are generally used for those blogs, which have scripting
tutorials. There are large number of powerful syntax highlighter tool
exist over the Internet (Add syntax highlighter with jQuery).
Through which you can make your code more readable to the user. It not
only highlight the script but also gives the clear idea, how the script
is formulated. But the main disadvantage in using them are they effect
the page loading time as they uses powerful jQuery script. So in this
tutorial I will tell you to add Syntax highlighter without any jQuery
script.

How to Add Syntax Highlighter To Blog:-

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Find following piece of code in blogger template.

]]></b:skin>

Choose your favorite syntax highlighter code from the list below and paste it just above the ]]></b:skin>
And save the template.

/* Code written on internetricks4u.blogspot.in */
#mypretag
{
-moz-border-radius: 0px 25px 0px 25px;
white-space:pre-line;
background-color: #e3e3e3;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space:pre-line;
width: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag
{
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 25px 25px 25px 25px;
background-color: #e3e3e3;
padding: 15px 5px 15px;
white-space: pre-line;
-moz-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
width: 100%;
height: auto;
min-height: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag {
border-left: 8px solid #1C86EE;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
-o-border-radius: 25px 25px 25px 25px;
white-space: pre-line;
background-color: #e3e3e3;
padding: 15px 5px 15px;
width: 100%;
border-radius: 25px 25px 25px 25px;
height: auto;
min-height: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag {
border-left: 8px solid #1C86EE;
background-color: #e3e3e3;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space: pre-line;
width: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag {
color: white;
border-left: 8px solid #e3e3e3;
white-space: pre-line;
background-color: #262626;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
width: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag {

color:black;
border-left: 8px solid #8B0000;
background-color: #EEE685;
height: auto;
min-height: 100%;
padding: 15px 5px 15px;
white-space: pre-line;
width: 100%;
}

/* Code written on internetricks4u.blogspot.in */
#mypretag {
color:black;
border-left: 16px solid #FFFF00;
white-space: pre-line;
height: auto;
min-height: 100%;
background-color:#c5c1aa;
padding: 15px 5px 15px;
width: 100%;
-moz-border-radius:30px;
border-radius:30px;
-o-border-radius:30px;
-webkit-border-radius:30px;
}

Note:Make The Following Modification:-

To change background color simply change #262626 to any desired value.
To change the border color simply change #fff000 to any desired value.

How To Use These Code:-

Click Posting / New Post.
Click "Edit HTML" in post editor of your post.
And paste the following in it.

<pre id="<span style="color: blue;">mypretag</span>"><span style="color: red;">...Your Code Here...</span></pre>

Good luck to your post.

Note:

The changes made by us will not shows up in compose tag whereas it shows when post will published.

Finally I want to say that I give my best to produce this article if any
one find difficulty in doing this process then comment are always open
for that or if you like the above article then don't forget to subscribe
it for latest updates.

More Article From The Same Author

Make Over The 'pre' tags

Styling preformatted text blocks is one of the more difficult tasks
when customizing a blog. In truth, many bloggers may never need to use
preformatted text at all, but if you plan on posting code snipits, using
this technique is a must.

When you post large blocks of code on your blog you will probably be
using the <pre>,<code>, your code
</code>,</pre>, format. By doing so you are turning the code
block into monospaced type with the code tag, and wrapping the entire block in a command to maintain its preformatted state. This technique, in combination with a code snippet plugin like Code Autoescape will deliver a functional, though at times, unattractive result. How to style those pre tags?

When you keep the preformatting of a block of code, you are in effect
keeping all of the white-space and line-break formatting intact. This
means that, while your blog’s content area may be 500px across, if the
line of code runs to 800px your theme will likely break, or the code
will overlap your sidebar. This is absolutely devastating to the clean
lines and careful detail you have put into your blog’s custom look.

Many WordPress themes, in fact many website designs, use overflow-x:scroll;
to add a horizontal scroll bar to the preformatted text area. This, by
the way, is what I did on both the Slate and Paisley themes. It works
fine, and with made for release themes, I think it’s the best option.
That doesn’t mean that there aren’t any options to spiff up the look of
these snipits. Let’s take a look at some way to do it.

This is the stylesheet code from the Slate theme.

<code>pre {

        height: auto;

        overflow-x:scroll;

        }</code>

With the pre tag styled in this way we get a preformatted text area that looks like this:

pre_tag-wordpress1

Let’s replace overflow-x:scroll; with some white-space and word-wrap values.

<code>pre {

        height: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;

        }</code>

The pre-wrap value and the variations included in this
stylesheet block specify that lines of code should break as necessary to
fit within the containing element. In addition, the word-wrap value break-word
specifies that, when necessary, unbreakable words may be broken so the
text will fit in the box. Now we have everything fitting within our
content area. Unfortunately, it looks a lot like the paragraph text:

pre_tag-wordpress-21

To fix this, let’s add a background color, padding, and change the
font around. With the Slate theme, we need to make a few changes to the
style sheet. We are going to add padding and a background to the pre tag like this:

<code>pre {

        height: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        padding:15px;
        background: #459dcb;
        }</code>

Additionally, let’s specify the code tag font when its wrapped in the pre tag:

<code>pre code{
        font:16px Monaco, 'andale mono', 'lucida console', monospace;
        color:#373737;
        }</code>

Finally, we need to specify what our code tag font is, when it’s included in a paragraph:

<code>code{
        font:14px Monaco, 'andale mono', 'lucida console', monospace;
        }</code>

This is the final result:

pre_tag-wordpress-3

You might notice in the image that WordPress in the first line is wrapped with a code tag to show the code style when used in a paragraph.

Depending on the look you are going for, you might try stripping out
the background color all together and enlarging the font, or try messing
with the background color. There are endless possibilities.

source : http://www.arsgrafik.com/text-break-pre-tags/

Pre Tag Code for Blogspot Example

<code class="css" style="color: rgb(131, 148, 150); font-family: Monaco, 'Courier New', Courier, monospace; font-size: 12px; display: block; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; letter-spacing: 0px; white-space: pre; "><span class="tag" style="color: rgb(133, 153, 0); ">pre</span> <span class="rules">{
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">display</span>:<span class="value">block</span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">font</span>:<span class="value">normal <span class="number" style="color: rgb(42, 161, 152); ">12</span>px/<span class="number" style="color: rgb(42, 161, 152); ">22</span>px Monaco,Monospace <span class="important" style="color: rgb(203, 75, 22); ">!important</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">color</span>:<span class="value"><span class="hexcolor" style="color: rgb(42, 161, 152); ">#CFDBEC</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-color</span>:<span class="value"><span class="number" style="color: rgb(42, 161, 152); ">#2f2f2f</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-webkit-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-moz-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-ms-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">-o-repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">background-image</span>:<span class="value">repeating-linear-<span class="function">gradient(top, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">0</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">444</span> <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">22</span>px, #<span class="number" style="color: rgb(42, 161, 152); ">2</span>f2f2f <span class="number" style="color: rgb(42, 161, 152); ">44</span>px)</span></span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">padding</span>:<span class="value"><span class="number" style="color: rgb(42, 161, 152); ">0</span>em <span class="number" style="color: rgb(42, 161, 152); ">1</span>em</span>;</span>
  <span class="rule"><span class="attribute" style="color: rgb(181, 137, 0); ">overflow</span>:<span class="value">auto</span>;</span>
<span class="rule">}</span></span></code>