Show a Message To User By Clicking on Button

When We Click on any button in some PRO website's OR in PRO blogs we show the Pop-Up message with some kind of message for user which gives some instruction about the website OR blog OR about the special notifications for user.

What is This....?

If you want to show the visitor a message when he or she clicks on a button or a link you would maybe want to try this code.

Live Demo

Click Here

Codes

• Copy below codes
• Paste where you want to show

<style>
/*--- Message To User By Click On Button By www.fblatest.in --- */

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*--- Message To User By Click On Button By www.fblatest.in --- */
</style>

<!-- This Script by www.fblatest.in, Coded By: Krishna | Designing By: Hemant Verma-->

<!-- Start of Message Alert -->
<!-- Use this button in a form to pop-up a message when the user clicks it -->
<center>
<form>
<input type="button" value="Message" class="btnLogin" onClick="alert('Write Your Message Here'); return true">
</form>
</center>
<!-- End of Message Alert -->

Make Changes....!

• Replace Message it with your button name.
• Replace Write Your Message Here it with your message

Enjoy and Have Fun With Your Messages

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Add Google's Official Translator Widget

Google always provides us new kind of services and new kinds of plugins for our website and blogs. As we previously use the Flag Translating Widget for Blogger. Now we can use this Google's New Service named as Website Translator. This is very important and updated version of Google Translating Widget for Website and Blog's and we it's very easy and simple.

Google Says....!

Since we first launched the Website Translator plugin back in September 2009, more than a million websites have added the plugin. While we’ve kept improving our machine translation system since then, we may not reach perfection until someone invents full-blown Artificial Intelligence. In other words, you’ll still sometimes run into translations we didn’t get quite right.

Add Google's Official Translator Widget

• Go to Google's Website Translator Page
• Click on Add to Your Website Now

 

• Enter Your Website OR Blog's URL

  

•  Click on Next
• Choose Display mode as Horizontal, Vertical OR Dropdown Only.

• Click on Get Code
• Now Copy the meta code and paste that code before </head> 
• Save Your Template.
• Copy Next Code and paste where you want to show your Translate Widget.

Output Looks Like This....!

• Select text and Output look like this.

Enjoy Your Translate Widget 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

London Olympic Google Doodles 2012 for Blogger

Google world's most popular search engine supports to the London Olympics 2012 with making doodles and show them on the home page of Google and also we can play the events like today is basket ball event in the Olympics then Google sets the basket ball doodle on their home page.

Add Huddle Olympic Doodle

Use Our HTML Editor to Play With Doodle

• Copy below code and paste in our HTML Editor
• Click on Preview Button.

<iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/hurdles-2012-hp.html" width="550px"></iframe></div>

Add Basket Ball Olympic Doodle

Use Our HTML Editor to Play With Doodle

• Copy below code and paste in our HTML Editor
• Click on Preview Button.

 <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/basketball-2012-hp.html" width="550px"></iframe></div>

Add Slalom Canoe Olympic Doodle

Use Our HTML Editor to Play With Doodle

• Copy below code and paste in our HTML Editor
• Click on Preview Button.

  <iframe allowtransparency="false" frameborder="1" height="260px" scrolling="no" src="http://www.google.com/logos/2012/slalom_canoe-2012-hp.html" width="550px"></iframe>

Live Demo of Doodles....! Play Here

• Double Click on Play button for start Huddle game.
• Press Space Bar for Jump.

• Click on Play button for start Basket Ball game.
• Press two times Space Bar to drop ball into the net OR press double click for the same action. 

• Click on Play button for start Slalom Canoe game.
• Use arrow buttons OR move mouse with click to move the direction of boat.

Enjoy With Google Hacked Content....! 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Show HTML and Other Codes With Code Language Name

As we give previously Show HTML and Other Codes in blogger, Now this is new and updated widget with tutorials of blogger where you can show your codes in blogger with coding language name like jQuery, HTML, CSS, JavaScript etc, this tutorial is very simple and very highly customize with CSS Codes. It's a very Pro widget be'coz it include the orange bar where you can mention the code name with your site name.

Series of Show Codes in Blogger

1.HTML CSS and Other Coding Background

2.Blackino Pro Blockquote for HTML, CSS Codes

3.Show HTML, CSS Codes in New Three Coloured Background

Add CSS Codes of Widget

• Login to Blogger > Dashboard
• Go to Design > Edit HTML
• Search for 

]]></b:skin>

• Paste below code before ]]></b:skin>

/*------Codes By www.fblatest.in------*/


pre{
position:relative;
background:#333;
color:white;
font-family:Monaco, Courier, MonoSpace;line-height:1.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:12px;padding:10px;margin:0 0 25px 0;overflow:auto}pre code{padding:0;color:white;background:#333;white-space:pre
}


pre[rel]{padding-top:40px}pre[rel]:after{content:attr(rel);position:absolute;top:0;background:#F3A01E;padding:4px;left:0;right:0;font-size:36px;line-height:0;color:white;font:bold 20px "myriad-pro-1",Verdana;


/*------Codes By www.fblatest.in------*/

•  Save Your Template

 

How to Add it in Post....?

• After adding the CSS part
• Go to Posting > Edit HTML 
• Paste below code where you want to show the HTML CSS and others codes.

<pre class="lang-js" rel="HTML Codes By www.fblatest.in"><code><p>Write Your Codes Here
</code></pre>

Make Changes....!

• Replace it HTML Codes By www.fblatest.in with coding language and with your site URL.
• Replace Write Your Codes Here it with your codes.

If Any Problem Comes, Ask In Comments

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Blogger Dynamic Page Loading Effect

Many websites like Facebook, Google, Blogger having their own loading effect, when we visit on site and site take some loading time and in that time shows the loading effects on the all sites, you can also add a diffrenet and PRO loading effect like Blogger Dynamic Loading Effect with a bar.

Add Blogger Dynamic Page Loading Effect

• Login to Blogger > Dashboard 
• Go to Design > Edit HTML
• Search for

</head>

• Paste below code above </head>

<style>
/*  Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJ213Jl0TONL-GO09tFjdv9qsoaMG2BCJoAelsS08cgRIWCRRMA2T-wi8__e28rUNE-wWSZqBwZ_5nLSKM0QMCC_jtd_uo4QE6LlJZVWnZoUsIWR-DmdiffrsM_YNXQu_WXf4al7QnlWu/s1600/index.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.FB #fb-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#fb-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #FF6600;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#fb-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("FB");


$("#header").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

• Now Search for

<body>

• Paste below code after <body>

<div id='fb-loading'><div id='fb-progress-bar'></div><div id='fb-loader'>Loading...</div></div>

• Save Your Template

If Any Problem, Ask In Comment 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Show HTML, CSS Codes in New Three Coloured Background

New and other very different HTML, CSS and other coding backgrounds for blogger which highly customize for blogger from CSS with three different colors on mouse hover effects with big font and highly customization, and it will give a new and better look to your blog, in this tutorial the mouse hover effect also available be'coz when you see it, you will surely like it.

Series of Codes Posting Background

1.HTML CSS and Other Coding Background

2.Blackino Pro Blockquote for HTML, CSS Codes

Add CSS Part of Coding Background

• Login to Blogger > Dashboard
• Go to Design > Edit HTML
• Search for

]]></b:skin>

• Paste below code before ]]></b:skin>

.fblatest { font-size: 15px;font-family: Courier;font-weight: normal;font-style:italic; background-color: #000000; color: #ffffff; width: 90%; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .fblatest:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .fblatest:active { background-color: CornflowerBlue ; color: #000; }

• Save Your Template 

How to Add it in Post....?

•  After adding the CSS part
• Go to Posting > Edit HTML 
• Paste below code where you want to show the HTML CSS and others codes.

<div class="fblatest"> Replace Text With Your Codes </div>

Make Changes....!

• 15 Replace it to change the text size (Optional)
• Replace Replace Text With Your Codes this text with your own codes of HTML CSS JavaScript etc

If Any Problem Comes, Ask in Comments

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Make Your Image Hover with Sliding Panel

When we add any image to blogger it seems like very simple and many times we saw that some professional blogs OR websites use CSS in their images, so that they look better and rich type content in the blogs. In this effect we add CSS in images and that seems like very rich and they comes with the sliding panel on mouse hover with image description. You can easily add the links in the sliding panel as you see in the image and it will give a professional look to your blog.

1. Add Widget to Blogger

• Login to Blogger > Dashboard
• Go to Design > Edit HTML
• Search for 

<head>

• Paste below code after <head>

<link type="text/css" href="https://dl.dropbox.com/u/63968842/Slidingpanelwithmousehover%28www.fblatest.in%29.css" rel="stylesheet" />

• Now Save Your Template.

2. Image Adding Part in the Post

• Now Go to posting area > Edit HTML
• Paste below code in it.

<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9lLZvYdNuaTU8uZIw_-mABG3mOv4IEGYOCzQBY3r7gGBWCwlEmABwCpjjfE-CtvJbcpx7PJXS_OVmV5g4ECEAhmWvRH4Gcb39m-N4Mupex3B37wyk091MbuQHObD4IAzHoRgxcG6tvs/s1600/stadium.png">
<div class="desc">
Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>  

Make Changes....!

• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9lLZvYdNuaTU8uZIw_-mABG3mOv4IEGYOCzQBY3r7gGBWCwlEmABwCpjjfE-CtvJbcpx7PJXS_OVmV5g4ECEAhmWvRH4Gcb39m-N4Mupex3B37wyk091MbuQHObD4IAzHoRgxcG6tvs/s1600/stadium.png this link with your own image link.
• Adjust the width and height according to your choice from here width: 263px; height: 199px
• Replace the description about image from here Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions. according to your description.
• If you want that sliding panel comes upper side of image then after <div class="desc"> add upslide word with a space like this ===>> <div class="desc upslide">
• If you want that sliding panel comes from right side then add rightslide 
• If you want that sliding panel comes from left side then add   leftslide

If Any Problem Comes, Ask in Comments

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Guest Author Bio Widget with Mouse Hover

Guest Author Bio Widget is important for guest author be'coz when we invite any blogger to write any post then we have to give a description about her/him, end of our post. So, we have a special widget for it.

Guest Author Bio Widget

• Login to Blogger > Dashboard
• Go to Posting > Edit HTML
• At the end of guest post paste below code

 <link href='https://dl.dropbox.com/u/63968842/guestauthorbio%28www.fblatest.in%29.css' rel='stylesheet'/>


<div class='fbauthor_info'>
<div class='fbauthor_photo'>
<img alt='author' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghePfv-HIROGtXuVROzMxyWsOHMKlFR0neMtClTpUxlKCqfPq54ME9wLwvv5Rw8PfV_jJWIWTVPYnYx-Pq76eqRXTT9aIY9oPPWgJOzlFqdqRLe9fSE6c3Sw2VJmvVrNBodBUrSvIJIkr2/s1600/Butnty.jpg' width='200'/></div>
<h2><font face="verdana">This Post Was Written By:</h2>
<p> Hi....! I'm Hemant Verma, Graduate in Computer Applications in 2012, Love to Make Blogger Hacks and Like to Play With HTML and CSS and Now Going to Join Business. </p>
<table><tr><td><tr><img border="0"  src="http://1.bp.blogspot.com/-pMFW6caNEFg/TvsbhY3ppGI/AAAAAAAACDM/Wx5jw_HAeBw/s1600/untitled+copy.jpg" />
<a href='http://twitter.com/hemantverma003' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDovCPUdHJtqweSM_30g0qCKmzRT0IGvLRJt4WaGH-RRvfvPluCDxnoDSrPrBzjAOMnTOEN6vtKBCnLgGBrPSulRHiBLFOfuth75t51oE1cDM6FMH5M8UJOp0pIDu17hSeDxNFW66EEG-j/s48/Twitter2.png'></tr></a><tr><img border="0" src="http://4.bp.blogspot.com/-tMN8XVMaUAg/Tvshc3zjf0I/AAAAAAAACDY/WdAW8406v-g/s1600/or.jpg" /></tr><a href='http://www.facebook.com/COMPUTERS.TRICKS' target="_blank"><img alt='Facebook'  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iSEmqj1CgYkv_zH3iUN9wkMMMbPm24ANDDGK6xU78xnd8cEeLPc-opk2y6f3oXkCPusEHYZx_c4QNBeUEXkU6v7-dZUwJ50O5V9WR9Ee7YawYMbHatIfGC3qi5Cy__MkEF8jw6HbM1Uq/s48/Facebook.png'></a></td></tr></table></font>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.fblatest.in/2012/07/guest-author-bio-widget-with-mouse-hover.html' style='color:#CAC8C8;'>Get This</a></p></div>

Make Changes....!

• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghePfv-HIROGtXuVROzMxyWsOHMKlFR0neMtClTpUxlKCqfPq54ME9wLwvv5Rw8PfV_jJWIWTVPYnYx-Pq76eqRXTT9aIY9oPPWgJOzlFqdqRLe9fSE6c3Sw2VJmvVrNBodBUrSvIJIkr2/s1600/Butnty.jpg this link with your own snap link.
• Replace  Hi....! I'm Hemant Verma, Graduate in Computer Applications in 2012, Love to Make Blogger Hacks and Like to Play With HTML and CSS and Now Going to Join Business. this author info with your guest author's info.
• Replace hemantverma003 this twitter name with author's twitter name.
• Replace COMPUTERS.TRICKS this facebook username with author's facebook page  OR author's profile username.

Note: Don't Change Anything from Codes be'coz All Codes are Highly Sensitive.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Blackino Pro Blockquote for HTML, CSS Codes

As last we introduced you highly customize blockquote OR HTML CSS and Other Coding Background for blogger. Similarly today we are very happy to introduce you the very highly customized blockquote named Blackino Blockquote. It Looks like this below

Blackino Pro Blockquote

• Login to Blogger > Dashboard
• Go to Posting > Edit HTML 
• Paste below code in it.

<blockquote style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsPFpAd7ry3sj7b7xw8tMX_UAPa4rlEHbku1HGjKg0CWw5lXUIX7scy3Inzm7rFHg-ZHDVIIEZ2_alPJUxQeuazVKoSAjESaBlewRM90HP3u8jtDZgpq2Ze1BnFYt7ye9aG_2sEJHojOn/s320/blockquote+black.jpg); background-origin: initial; background-repeat: repeat repeat; border-bottom-left-radius: 6px 6px; border-bottom-right-radius: 6px 6px; border-left-color: rgb(153, 0, 0); border-left-style: solid; border-left-width: 4px; border-top-left-radius: 6px 6px; border-top-right-radius: 6px 6px; color: #dddddd; font-size: 15px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; outline-color: initial; outline-style: none; outline-width: medium; padding-bottom: 0px; padding-left: 15px; padding-right: 20px; padding-top: 0px;">


<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><i><b>Write Your Codes OR Text Here</b></i></span></blockquote>

• Now click on compose button of posting area.
• You will see a output like below.

 

• Replace this Write Your Codes OR Text Here with backspace of your keyboard and add your own Codes OR text.
• You are done.

How could We Use it....?

• We can use it as add the HTML, CSS, JavaScript and all other kind of codes when we provide codes in any tutorial.
• Also could use for the special text which we want to show that text to our visitors in special way.
• We could easy write our notification on Blackino Blockquote for our readers. etc. etc. etc.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Pro CSS Buttons for Blog and Website

Many Professional Bloggers and Web Developers use CSS buttons for their blog OR website and now we are introduce some fresh and pro CSS buttons for blog which will help to MAKE YOUR BLOG LIKE A PRO, and this is simply made by the CSS and embed with the HTML codes.

 CSS Buttons for Blog and Websites

• Login to Blogger > Dashborad
• Go to Design > Edit HTML
• Click on Check Expand on Template.
• Search for </head>
• Paste below code before </head>

 <link type="text/css" href="https://dl.dropbox.com/u/63968842/CSS%20Buttons%20%28www.fblatest.in%29.css" rel="stylesheet" />

• Save Your Template. 

 

How to Add Buttons

Now below we have given 10 styles where you want to add these buttons just simply copy that code and paste in the Edit HTML of posting background.

Example:-

<a href="#" class="fblatest">Demo 1</a>

10 Different Styles of CSS Buttons

<a href="#" class="fblatest">Demo 1</a>

 <a href="#" class="fblatest1">Demo 2</a>

  <a href="#" class="fblatest3">Demo 3</a>

  <a href="#" class="fblatest2">Demo 4</a>

  <a href="#" class="fblatest4">Demo 5</a>

  <a href="#" class="fblatest5">Demo 6</a>

  <a href="#" class="fblatest6">Demo 7</a>

  <a href="#" class="fblatest7">Demo 8</a>

  <a href="#" class="fblatest8">Demo 9</a>

  <a href="#" class="fblatest9">Demo 10</a>

Make Changes....!

• # Replace with your link.
• Demo Replace with your text.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Embed a HTML Encoder in Your Blog

Blogging Tool are very important for any blog who provide you the tricks of blog because tools made work easy and sensible and when you use that kind of any tool any blog then visitors see that blog and want to visit again and again, but as our team know and research and found that no one doesn't provide you the codes of Tools like HTML Editor, HTML EnCoder etc. but we do this, as last time we provided Automatic HTML EDITOR

Embed HTML EnCoder in Blog

• Login to Blogger > Dashborad
• Go to Posting > Edit HTML
• Paste below code carefull in Edit HTML area of posting 

Note:- Don't Change Anything in Below Code be'coz All Codes are Highly Sensitive

<div dir="ltr" style="text-align: left;" trbidi="on">
<style id="page-skin-1" type="text/css">
<!--
textarea {
width:50%;
color:#0080ff;
font:14px sans-serif, verdana;
background:#fff;
border:1px dotted #67A7E3; }
textarea:hover {
border:1px dotted #666;
}
input.mbt3 {
color:#000;
font: normal 12px  sans-serif, verdana;
border:1px dotted #67A7E3;
background:#C9E4FF;
}
input.mbt3:hover {
color:#289728;
font: normal 12px sans-serif, verdana;
border-left:5px solid #289728;
background:#fff;
}
input.mbt4 {
color:#3C3C3C;
font: normal 12px sans-serif, arial;
border:1px dotted #67A7E3;
background:#C9E4FF;
margin-bottom:4px;
}
input.mbt4:hover {
color:#289728;
border:1px solid #289728;
background:#fff;
}
</style>

<script type="text/javascript">
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
//]]>
</script>
<script src="http://mybloggertricks.googlecode.com/files/tabber.js" type="text/javascript">
</script>
<script src="http://mybloggertricks.googlecode.com/files/audio-player1.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[


function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}

function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

//Character count script
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}


//Meta tag generator
<!-- hide the script
function create(form) {
  if (confirm("Are you sure?")) {
    form.story.value = "Copy the codes below and insert them " +
      "just below Google and Yahoo verification codes below <head> Tag.\n\n";
    if (form.input1.value != "") {
      form.story.value +="<b:if cond='data:blog.url == data:blog.homepageUrl'>\n<meta NAME=\"Description\" CONTENT=\"" +
      form.input1.value + "\" />\n</b:if>\n";
    }
    if (form.input2.value != "") {
      form.story.value +="<meta NAME=\"Keywords\" CONTENT=\"" +
      form.input2.value + "\" />\n";
    }
    if (form.input3.value != "") {
      form.story.value +="<meta NAME=\"Author\" CONTENT=\"" +
      form.input3.value + "\" />\n";
    }
    if (form.input4.value != "") {
      form.story.value +="<meta NAME=\"Robots\" CONTENT=\"" +
      form.input4.options[form.input4.selectedIndex].value + "\" />\n";
    }
  }
}

function about() {

  msg=open("about.html","DisplayWindow","toolbar=no,width=280,height=420,directories=no,status=no,scrollbars=yes,resize=no,menubar=no");
}

// end hiding contents from old browsers  -->


//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>
<script type="text/javascript">
var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<script>
//HTML EnCoder Provide by www.fblatest.in and Made by MBT
//<![CDATA[

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=242573159179696";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//]]>
</script>



<div id="wrap">
<div id="outer-wrapper">
<div id="wrap2">
<div id="content-wrapper">
<div id="main-wrapper">
<div class="main section" id="main">
<div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<div class="post hentry">
<h2 class="post-title entry-title">
<script type="text/javascript">
   
</script>
    <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
   
</script>
  </h2>
<div class="post-body entry-content">
<form>
<textarea name="data1" style="height: 200px; width: 500px;"></textarea>&nbsp;
<div style="text-align: left;">

</div>
<div style="text-align: left;">
&nbsp;<input class="mbt2" onclick="html2entities(this.form.data1)" onmouseout="this.className='mbt2'" onmouseover="this.className='mbt2 mbt2hov'" type="button" value="Convert" /> <input class="mbt2" onmouseout="this.className='mbt2'" onmouseover="this.className='mbt2 mbt2hov'" type="reset" value="Clear" /> </div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use of HTML EnCoder

 Blogger Comment form doesn't support direct posting of HTML and JavaScript. In order to help you to do that we will need to change/encode the same code into a text and then post it effectively without any error. The Tool below will help you to change HTML characters to simple text, which could be easily inserted in your blogger template and comment form. You can also use it to convert your adsense code into an embeddable form. It converts special characters in this way.

• '<' becomes '&lt;'
• '>' becomes '&gt;'
• '"' (double quote) becomes '&quot;'
• ''' (single quote) becomes '&#039;'
• '&' becomes '&amp;'

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.