30 April, 2010

Contact Me widget -Add it to your sidebar




Widgetbox provides us with a free widget contact Emailer version 4 through which your visitors can send email without publishing your email.
This contact widget can be placed in the sidebar (column of the blog), or in the post if you like
The widget is under widgetbox.com , but before you copy the code you can modify the text and colors of the widget.

[1] To embed Contact EMailer form into your web page, blog etc. follow these steps Click here and go to widgetbox.com
[2] Provide Widget Settings

  •      Your Email address
  •      Web page in which Contact EMailer form Widget is to be displayed
  •      Title,Subtitle,Field captions etc
  •      Foreground and Background Colors
  •      Right to left support, if needed
  •      Image CAPTCHA suppport
  •      width and hieght of form
[3] The widget appearance will change when you are making changes to the settings4 Click on Get Widget button
[5] If you want to embed the widget in a web page, choose the embed Code option and copy the code

     You can also click on the buttons for Facebook,Blogger,Twitter,iGoogle,WordPress,my Yearbook,TypePad,Blogger Post,Netvibes,Webs,Pageflakes,Piczo,Ning,Confluence according to your requirements
[6] Paste the HTML into your webpage
[7] Test your web page with the Contact EMailer form
[8] If you are a Pro account holder in widgetbox.com, your widget will not display the about link

28 April, 2010

11 Clean White XML blogger templates

 There are tonnes of Blogger templates out there, but we all know it’s hard (or perhaps take times) to find the really nice and high quality ones. So for those who are bored with their current Blogger template and intend to change, we thought your time can be spent better on browsing only the best and nicest among the free Blogger themes.

Here i have collected white color blogger template in no particular order,please drop comments if you like it.You can view my previous posts free blogger templates



For Download and demo Option Click on the images

[1] White space blogger templates

Features:
  1. Three columns with left and right sidebar
  2. Google Adsense ready (468×60 banner, 160×600 skyscraper, 200×200 square)
  3.  No image
     Built-in search box
  4. Built-in navigation tab
  5. Customized comment style
[2] Evidens White

Features:
  1. Three columns
  2. Adapted from Wordpress
  3. Black, Blue, Elegant,
  4. Right sidebar
  5. Web 2.0, Fluid width
[3] Black And white blogger templates

[4] Mosaicus blogger gallery templates

Features:
  1. Minimalistic
  2. White, Clean
  3. jQuery Premium Features
  4. Easy to customize
  5. Gallery Style
[5] Wire News templates

Features:
  1. Three columns
  2. Adapted from Wordpress
  3. Black, Ted, Elegant,
  4. Right sidebars
  5. Web 2.0, Fluid width
[6] Apartus blogger templates

Features:
  1. Two column
  2. Adopted from wordpress
  3.  Fixed width,grey red
  4. Right sidebar
  5. White,Twitter widget
[7] Fauna Frost blogger templates

Features:
  1. Two columns with  right sidebar
  2. Adopted from wordpress theme
  3.  Fixed width
  4. Blue, grey , white
  5. Blogger Xml
[8] Bughaw blogger template

Features:
  1. 2 column ,
  2. 125*125 boxes
  3.  Custom footers 
  4. Blue and white blogger template
  5. Clean and customizable
[9] Headline News blogger template

Features:
  1. Three columns
  2. With left and right sidebar
  3.  Fixed width
  4. Built-in navigation tab
  5. White and clean
[10] Digital statement blogger template

Features:
  1. Two columns Clean and elegant
  2. Tabbed sidebar
  3. Right sidebar
  4. Fixed width
  5. Magazine style
[11] Game Zine white blogger template

Features:
  1. Three columns
  2. Magazine style
  3. Special for gaming blogs
  4. Two inline minipost
  5. Easily Customizable

24 April, 2010

Reverse the order of your posts-blogger hack

Is there a way to make my posts show up in reverse order??
Newest to oldest posts.. can we change that order?
Put posts into chronological order??
How To Reverse The Order In Which Posts Are Listed On Your Blog??

IF you are a blogspot user and looking for solution to this problem then you are at the right place.
I have been a regular Visitor on Blogger help forums i found so many people asking this question ,even i want some handy solution for  my Guitar blog.
Until now in order to reverse the order you needed to play around with the dates (change the date of every post )which is not possible if the number of posts are large.
So here is a handy Blogger hack that can automatically reverse your post in chronological order.
This hack was first posted by David Merriman on The Merriman Family Blog.

Reverse the Order of your posts-blogger hack


Go to your blog's Layout tab and click Edit HTML
and find where it says </body>

Copy the following code and paste it Directly Above </body>



Save Template 


 See a Demo Test blog And tell me if it works for you because i have not tried it yet.

Previous post->Generate 300+ backlinks in 1 minutes

21 April, 2010

Generate 300+ backlinks in 1 minutes

Backlinks are the backbone of every successful site ,A blog with large number of backlinks is generaaly at the top of the search engines.Backlinks are links on one website that lead back to another website.

I was Searching google inside out to find some tricks to get free and easy backlinks And suddenly i come across this website  called backlinkgenerator

How this generate backlinks??
You may have heard about websiteoutlook It provides some handy information about your blog like your Alexa rank??Your approximate ads revenue??.............In return provides you free backlink.
What this backlink generator does is it has a collection of 344 such websites which it automatically pings these sites with your blog address  instead of you doing manually.
I strongly recommend you to do this for your blog .



Follow easy steps and Get free backlinks
[1] Go to backlinkgenerator
[2] Enter your blog address like shown in figure above
[3] Click Generate

Similar posts-
How to get .edu backlinks for free
Blogger widget to display Latest backlink pointing to your blog
Reciprocal Link checker

18 April, 2010

Make Images open in a popup window

Blogger Logo Grey
All you bloggers on blogspot ,you must have noticed that when you upload any image to blogger,blogger gives you three sizes (small ,medium ,large)and the original sized image is accessible to uses when they click on the image but the image opens in same window thus navigates your readers away from your blog.


One Nice way to avoid this is to use target="_blank" within your images anchor tag so that your images open in new window.But why not add a little frill and make the image open in a popup window.

Here,s an Example HTML code for any image


What you have to do is ADD :

target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;

after the closing double quotes enclosing the url of the original image, but before the > tag.So that result will be like this-



Let me Explain all the elements one by one.

width=520, height=520 Defines the size of the popup window

resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no are optional attributes, you can change their values to yes or no according to your needs

For demo click on the grey blogger logo (above) accompanying this post.

the target="_blank"  makes the link open in a new window

you can add the attributes top= and left= to define the position of the pop-up window

Here's an example:

    target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no, top=20, left=20,'); return false;"

This would make the window open with a displacement of 20 pixels from the top and left of the screen.
Values can be adjusted according to the requirement and will.

Like this article -you can view more of my posts on Images 

Previous post- Use Jquery to style your external Links
                        Image hovering by changing opacity

10 April, 2010

Add skype emoticons to blogger


Skype is a free service that enables us to make calls and send instant messaging over the internet .

Personally i uses skype a lot and loves to use smiles ,nothing would be better than if we could add skype emoticons to blogger.

You may have seen tutorial to add yahoo emoticons to blogger ,this tutorial works on the same method.

Firstly we will include emoticons and symbols to our template so that our visitors know how to use this empticons.
[1] Login to dashboard and move to Edit Html tab.
[2]"Expand Widget Template"
[3]Locte this line of code.
<p> <data:blogCommentMessage/> </ p>
 [4]Just below paste this code:

 <div style=' width: 370px; TEXT-ALIGN: left; border: solid 2px #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>

<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/> :a <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/>: a

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b <img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/>: b

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c <img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/>: c

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/>: d

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/>: e

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/>: f

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/>: g

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/>: h

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> i

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/>: j

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/>: k

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/>: l

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m <img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/>: m

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n <img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/>: n

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/>: o

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/>: p

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/> :q <img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/>: q

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/> :r <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/>: r

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/> :s <img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/>: s

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/> :t <img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/>: t
</div> </ Div>
 Save changes and we can see these emoticons above the comment form.

This emoticons are not yet working ,to make them working we have to include script in the template code.

[5] Locate the </body> in our template (the code near the end of it) and just above it, paste the script:

<script type='text/javascript'>

//<![CDATA[ //<![ CDATA [
a = document.getElementById('comments'); a = document.getElementById ('comments');
if(a) { if (a) (
b = a.getElementsByTagName("DD"); b = a.getElementsByTagName ("DD");
for(i=0; i < b.length; i  ) { for (i = 0; i <b.length; i    ) (
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') { if (b.item (i). getAttribute ('class') == 'Author-comment-body', 'comment-body') (
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>"); _str = b.item (i). innerHTML.replace (/: j / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd . gif 'alt =''class =' smiley'/>");
_str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>"); _str.replace _str = (/ k / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:l/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>"); _str.replace _str = (/: l / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:m/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>"); _str.replace _str = (/: m / gi, "<img src = 'http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:n/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>"); _str.replace _str = (/: n / gi, "<img src = 'http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt = ''class = 'smiley'/>");
_str = _str.replace(/:o/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>"); _str.replace _str = (/: o / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>"); _str.replace _str = (/: p / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:q/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>"); _str.replace _str = (/: q / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:r/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif' alt='' class='smiley'/>"); _str.replace _str = (/ r / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:t/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>"); _str.replace _str = (/: t / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:s/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>"); _str.replace _str = (/: s / gi, "<img src = 'http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif' alt =''class = 'smiley'/>");

_str = _str.replace(/:a/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>"); _str.replace _str = (/: a / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:b/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>"); _str.replace _str = (/ b / gi, "<img src = 'http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:c/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>"); _str.replace _str = (/: c / gi, "<img src = 'http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt = ''class = 'smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>"); _str.replace _str = (/: d / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:e/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>"); _str.replace _str = (/: e / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:f/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>"); _str.replace _str = (/ f / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:g/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>"); _str.replace _str = (/: g / gi, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt ='' class = 'smiley'/>");
_str = _str.replace(/:h/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>"); _str.replace _str = (/: h / gi, "<img src = 'http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt = ''class = 'smiley'/>");
_str = _str.replace(/:i/ig,"<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>") _str.replace _str = (/ i / ig, "<img src = 'http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt = ''class = 'smiley'/>")
b.item(i).innerHTML = _str; b.item (i). innerHTML = _str;
} )
} )
} )

//]]> //]]>

</script> </ Script>

Final thought : Customization of box(around smiles).

We can easily change the background color , text alignment , padding by changing properties of the div element.

<div style=' width: 370px; TEXT-ALIGN: left; border: solid 2px #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>

 I hope you will like this post, i have been working hard to collect the best content for my readers .Please do comment...................