4

How to make online converter that converts raw HTML/Javascript to Blogger Post compatible



It is a major problem for all techie blogger who used to post codes daily as well as those new blogger who frequently post codes. Blogger supports HTML and Javascripts language to excute within blogger post. Here is the ultimate solution for them. The main problem is when we post a raw HTML / Javascripts , it is excuted. You may noticed when we write some code as a post, it does not appear as a post.  Replacing "<" by &lt; and ">" by &gt; can solve your problem if your code is small. But usually scripts are too large to manage them with replacing them by hand. So, here some software can fix this problem. But, Have you ever think of solving this problem online by your self. Yes, you can solve this bug with a tiny code. It is better than using any software / website for HTML/javascript converter/ replace system. now have a look on the code:

Place all the code in a post or page. Create a post or page in blogger and name it HTML online converter. Then paste the code given below & you are done.

/** here the HowBloggerCode stars ** /
<script>
function HowBloggerCode(){
 var hbc;
 hbc = document.getElementById('hbcconverter').value;
 if(hbc==""){
   alert('Please input the code/script you want to convert for blogger');
 }else{
  hbc =  hbc.replace(/</g,"<");
  hbc =  hbc.replace(/>/g,">");
  document.getElementById('hbcconverterresult').value = hbc;
 }
}
/** here the HowBloggerCode ends ** /
</script>
Place this code where you want to place the converter.
<textarea id="hbcconverter" style="height: 350px; width: 98%;"></textarea>
<input type="button" value="convert" onclick="HowBloggerCode()" />
<textarea id="hbcconverterresult" style="height: 350px; width: 98%;"></textarea>
if you need style then copy it otherwise ignore it. 
<style>
textarea#hbcconverter, textarea#hbcconverterresult {
    width: 75%;
    height: 147px;
    margin-top: 25px;
    margin-left: 51px;
    background: black;
    color: white;
    text-shadow: 0px 0px 7px rgb(252, 197, 2);
    border-radius: 21px;
    padding: 20px;
}
input[type="button"] {
  background: black;
  color: white;
  float: right;
  border: none;
  padding: 8px;
  margin-top: 16px;
  margin-right: 269px;
  height: 31px;
  border-radius: 8px;
}
</style>

Now have the live demo: First put code in first Textarea and click on Convert. Converted code will shown on Second Textarea. you can add style using custom css to your converter.


LIVE DEMO: HTML CONVERTER/ REPLACER

Mrinmoy

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

4 comments:

  1. Mrinmoy17 June 2014 at 11:23

    You can use Smiley in Comment :P :D. So express your feeling. You can report any bug, you face during script installation. :P

    ReplyDelete
  2. Unknown20 June 2014 at 07:38

    Good site.......

    ReplyDelete
  3. Denno23 June 2014 at 05:21

    how i change the background from black to white. black is not suitable for my blogg.

    ReplyDelete