What is web hosting?

<span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4eP6poj5ZBYXz3kjtGgrSQ-l2rHM__HdakN0nWCJpHbfOdzoZYCRruEw3xXsCp3r_2QwjFzbBVnEz-QV7jMyOgk8EKqfbrJUOhKWETlvxa2JNeyB46XZa0rhB_X-Wv7ydl-WKSd7qWo/s300/images.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="What is web hosting" border="0" data-original-height="146" data-original-width="300" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4eP6poj5ZBYXz3kjtGgrSQ-l2rHM__HdakN0nWCJpHbfOdzoZYCRruEw3xXsCp3r_2QwjFzbBVnEz-QV7jMyOgk8EKqfbrJUOhKWETlvxa2JNeyB46XZa0rhB_X-Wv7ydl-WKSd7qWo/w640-h311/images.jpg" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br />    </span><div><span>    </span><span>    </span>Web hosting is a service that allows organizations and individuals to post a website or web page on to the Internet. A web host, or web hosting service provider, is a business that provides the technologies and services needed for the website or webpage to be viewed in the Internet. Websites are hosted, or stored, on special computers called servers. <div><br /><div> <span>    </span><span>    </span>When Internet users want to view your website, all they need to do is type your website address into their browser. Their computer will then connect to your server and your webpages will be delivered to them through the browser. </div><div><br /></div><div><span>    </span> <span>    </span>Most web hosting companies require that you own your domain name in order to host with them. If you do not have a domain name, the web hosting companies will help you purchase one.</div><div><br /></div><div><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;"><b>The basic features of a web hosting plan include:</b></p><h3 style="border: 0px; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: 0.05em; line-height: inherit; margin: 30px 0px 10px; padding: 0px; text-align: left; text-transform: uppercase; vertical-align: baseline;"><span style="color: #2b00fe; font-size: medium;">DISK SPACE</span></h3><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">All web hosting accounts offer a certain amount of disk space that you can use to store your web files. It is recommended that you have some sort of estimates on what you need for various tasks - the amount of space you need for your emails, web files, databases, etc. By breaking down your usage, you can better estimate how much space you should go for.</p><h3 style="border: 0px; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: 0.05em; line-height: inherit; margin: 30px 0px 10px; padding: 0px; text-align: left; text-transform: uppercase; vertical-align: baseline;"><span style="color: #2b00fe; font-size: medium;">BANDWIDTH OR DATA TRANSFER</span></h3><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">Very often web hosts talk about bandwidth and data transfer as the same entity. However, they are in fact, different.</p><ol style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style: none; margin: 0px; padding: 0px; vertical-align: baseline;"><li style="border: 0px; font: inherit; list-style: none; margin: 0px; padding: 0px; vertical-align: baseline;">Bandwidth is the amount of data that can be transferred at one time.</li><li style="border: 0px; font: inherit; list-style: none; margin: 0px; padding: 0px; vertical-align: baseline;">Data transfer is the actual amount of data transferred.</li></ol><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">Think of it this way. If bandwidth were a tunnel, the bigger the tunnel the more cars can pass through it. Data transfer would then be the number of cars allowed to go through the tunnel in a given time period, say a month.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">The less bandwidth you have, the slower it takes your website to load, regardless of your visitor's connection type. Visitors will have to wait their turn. The less data transfer you have, the more often you will find your website unavailable because you have reached the maximum amount of data allowed to be transferred.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">To determine what is sufficient, you need to take into consideration the size of your website and the number of visitors you have in a month's time.</p><h3 style="border: 0px; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: 0.05em; line-height: inherit; margin: 30px 0px 10px; padding: 0px; text-align: left; text-transform: uppercase; vertical-align: baseline;"><span style="color: #2b00fe; font-size: medium;">EMAIL ACCOUNTS</span></h3><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">Email accounts are a common feature of web hosting, especially if you are hosting a domain. There are three main types of email accounts: POP3, forwarding, and aliases.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">POP3 accounts are the traditional inboxes. You have space on the server to store your emails, and at the same time, you can use an email program to download your mail. Each login and password combination usually equates to one account.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">Forwarding mail accounts are useful if you are employing the service of another company to filter your emails for you. Rather than storing your emails on your mail server, emails are redirected to another email address.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">Aliases accounts are similar to forwarding mail accounts. Some hosts allow you to setup a catch-all alias, which is often used to collect emails sent to addresses not recognized by your mail server.</p><h3 style="border: 0px; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; letter-spacing: 0.05em; line-height: inherit; margin: 30px 0px 10px; padding: 0px; text-align: left; text-transform: uppercase; vertical-align: baseline;"><span style="color: #2b00fe; font-size: medium;">FTP ACCESS</span></h3><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">After you have created your web pages on your computer, you need to transfer those files to your web server. The files are transferred to the server by use of FTP.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;">FTP is also the protocol of downloading your web files from the server to your computer, ie. backing up your website files.</p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://linksredirect.com/?cid=113418&source=linkkit&url=https%3A%2F%2Fwww.bluehost.com%2F" target="_blank"><button class="button"><span style="font-size: medium;">Click here to get Web hosting</span></button></a></p><p style="border: 0px; color: #404040; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 20px; margin: 0px 0px 20px; padding: 0px; vertical-align: baseline;"><br /></p></div></div></div>

Tools What is web hosting?

               Web hosting is a service that allows organizations and individuals to post a website or web page on to the Internet. A web h...

Read more »

HTML Encoder - Google Adsense code Converter

<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="color: purple;">This HTML Encoder Will convert your HTML code into given format, so it will allow you to post your html code into your blogger blog without viewing it's result. for example;</span> <br /> <br /> <blockquote class="tr_bq"> <a href='http://www.bloggerdaddy.tk' target='_blank' title='blogger and html tutorial'><img alt='www.bloggerdaddy.tk' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDNN5fDUAsI6ItQqWBmYMPniyR-ZXzJBftNGKUdMa2yuuE30yome5LE1cgSiEWks0ypf3NIcyhNCeQFQeK4Cdbwh-p2RwaAE3IeXt809ranoVJi9_LCYSiz_03nvV9-18AoN-Gp7070D9/s250-Ic42/test%25252818%252529.gif'/></a></blockquote> <br /> The above code will never be able to write on your post, besides will generate below<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7oBSMkReLid-xSNv-namsTQ-_8bGEk8we1rwFgT6gjqSpdNoRudJAJ5GWKSxvuK3ZrWaHJ97_mJPz7Pf32kRaVpFVIROCuOb4ozUzlnFbBEz9N9dSZXxWADSNM-p_ajMOKU88vy5Irk/s1600/test%252818%2529+%25281%2529.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7oBSMkReLid-xSNv-namsTQ-_8bGEk8we1rwFgT6gjqSpdNoRudJAJ5GWKSxvuK3ZrWaHJ97_mJPz7Pf32kRaVpFVIROCuOb4ozUzlnFbBEz9N9dSZXxWADSNM-p_ajMOKU88vy5Irk/s400/test%252818%2529+%25281%2529.gif" /></a><br /> <br /> so, to post that code you need to convert it with this HTML encoder<br /> <br /> <br /> <b><span style="color: purple;">To convert Google Adsense code</span></b><br /> <b><span style="color: purple;"><br /></span></b> <b><span style="color: purple;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiES8rEYhl8WC7NdXTYS9IPe9kqqyU4SqkecaZ8uDXh_1fxAvEd3uHBR2LixzBxXmA_BTOeNXEZzHSo-9L1GJVX4wQXqYWXdq09pnosqs0w-s5E6Iz-EZ-RDAlWoUu0PA2L96jvy1-lZZ8/s1600/ad.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiES8rEYhl8WC7NdXTYS9IPe9kqqyU4SqkecaZ8uDXh_1fxAvEd3uHBR2LixzBxXmA_BTOeNXEZzHSo-9L1GJVX4wQXqYWXdq09pnosqs0w-s5E6Iz-EZ-RDAlWoUu0PA2L96jvy1-lZZ8/s400/ad.jpg" /></a></span></b><br /> <b><br /></b> Yes, you can use this tool to convert your Google adsense code before installing it into your HTML webpage (in <span style="color: orange;"><b>blogger.com</b></span> we called it <b>edit html</b> page)<br /> <br /> <span style="font-size: medium;"><b><span style="color: #20124d;">Submit your code</span> >> <span style="color: magenta;">Click "encode HTML code" button</span></b></span><br /> <span style="font-size: medium;"><b><span style="color: magenta;"><br /></span></b></span></div><br></br> <script type="text/javascript"> function convert(){ var ele1 = document.getElementById("somewhere"); var replaced; replaced = ele1.value; replaced = replaced.replace(/</ig, "<"); replaced = replaced.replace(/>/ig, ">"); replaced = replaced.replace(/"/ig, """); replaced = replaced.replace(/±/ig, "±"); replaced = replaced.replace(/©/ig, "©"); replaced = replaced.replace(/®/ig, "®"); replaced = replaced.replace(/howdy/ig, "ya'll"); ele1.value = replaced; } </script><br /> <center><textarea id="somewhere" style="height: 250px; width: 100%;" >

Tools HTML Encoder - Google Adsense code Converter

This HTML Encoder Will convert your HTML code into given format, so it will allow you to post your html code into your blogger blog withou...

Read more »

How To Make A Link Button-Download button

<div dir="ltr" style="text-align: left;" trbidi="on"> Many bloggers think that how to make a link button ??? so friends here is new useful trick for "link button".<br /> <h2> <a href="https://www.blogger.com/blogger.g?blogID=2318473155192028396" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="background-color: black; color: red;">Demo Button Link </span></h2> <div> <form> <input class="Bloggerdaddy" onclick="window.location.href='http://www.bloggerdaddy.tk/2016/04/how-to-make-link-button-download-button.html'" type="button" value="Your Text Here" /> </form> <span style="color: yellow; font-size: large;"><b style="background-color: black;"><br /></b></span> <span style="color: yellow; font-size: large;"><b style="background-color: black;">How to put button by using HTML code ?</b></span><br /> <b><span style="color: #351c75;"><span style="color: black; font-size: 12pt; font-weight: normal; line-height: 18.4px;"><b><span style="color: #351c75;"><br /></span></b></span></span></b> <b><span style="color: #351c75;"><span style="color: black; font-size: 12pt; font-weight: normal; line-height: 18.4px;"><b><span style="color: #351c75;"> Paste The Following HTML code in your post </span></b></span></span></b><br /> <b><span style="color: #351c75;"><span style="color: black; font-size: 12pt; font-weight: normal; line-height: 18.4px;"><b><span style="color: #351c75;"><br /></span></b></span></span></b></div> <div style="text-align: center;"> <span style="font-family: "calibri" , "sans-serif"; font-size: 11.0pt; line-height: 115%;"><span style="color: blue;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="Picture_x0020_4" o:spid="_x0000_i1025" type="#_x0000_t75" alt="http://techtricksclub.com/wp-content/uploads/2014/04/Select-HTML-JAVA-Script-To-Inser-Widget.jpg" href="http://techtricksclub.com/wp-content/uploads/2014/04/Select-HTML-JAVA-Script-To-Inser-Widget.jpg" style='width:271.5pt;height:300pt;visibility:visible;mso-wrap-style:square' o:button="t"> <v:fill o:detectmouseclick="t"/> <v:imagedata src="file:///C:\Users\hitarth\AppData\Local\Temp\msohtmlclip1\01\clip_image001.jpg" o:title="Select-HTML-JAVA-Script-To-Inser-Widget"/> </v:shape><![endif]--><!--[if !vml]--><u><strike></strike></u></span></span></div> <div> <span style="background-color: white; color: purple; font-size: large;"><b><u>HTML code</u></b></span></div> <div> <blockquote class="tr_bq"> <span class="navy"><form></span><span class="navy"><input</span> <span class="green">class</span>="Bloggerdaddy" <span class="green">type</span>="button" <span class="green">value</span>="Your Text Here" <span class="green">onclick</span>="window.location.href='http://www.bloggerdaddy.tk/2016/04/how-to-make-link-button-download-button.html'" <span class="navy">/></span><span class="navy"></form></span></blockquote> <h2 style="text-align: left;"> <span style="background-color: black; line-height: 115%;"><b><span style="color: yellow; font-size: large;">How to paste css code in blogger template ?</span></b></span></h2> <div class="MsoNormal"> <span style="color: #7030a0; font-size: 12pt; line-height: 115%;"><b><br /></b></span></div> <div class="MsoNormal"> <span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;">Step 1 : Add The Css Code To Your Template<o:p></o:p></span></b></span></div> <div class="MsoNormal"> <span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;"><br /></span></b></span></div> <div class="MsoNormal"> <b style="font-size: 16px; line-height: 18.4px;"><span style="color: #351c75;">Step 2 : </span></b><span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;">Go To Blogger >> Template >> Backup Your Template<o:p></o:p></span></b></span></div> <div class="MsoNormal"> <span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;"><br /></span></b></span></div> <div class="MsoNormal"> <b style="font-size: 16px; line-height: 18.4px;"><span style="color: #351c75;">Step 3 : </span></b><span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;">Click Edit HTML >> Search For ]]></b:skin> <o:p></o:p></span></b></span></div> <div class="MsoNormal"> <div class="separator" style="clear: both; text-align: center;"> </div> <span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;"><br /></span></b></span></div> <br /> <div class="MsoNormal"> <b style="font-size: 16px; line-height: 18.4px;"><span style="color: #351c75;">Step 4 : </span></b><span style="font-size: 12pt; line-height: 115%;"><b><span style="color: #351c75;">Now Paste The Following code Above/Before ]]></b:skin><u><o:p></o:p></u></span></b></span></div> <div class="MsoNormal"> <span style="color: #7030a0; font-size: 12pt; line-height: 115%;"><b><br /></b></span></div> <span style="color: purple; font-size: large;"><b><u>CSS code </u></b></span><br /> <span style="color: purple; font-size: large;"><b><br /></b></span> <br /> <blockquote class="tr_bq"> <strong>input.</strong><b>Bloggerdaddy</b> <strong class="blue">{</strong> width<span class="blue">: 200px;</span> padding<span class="blue">: 20px;</span> font-weight<span class="blue">: bold;</span> font-size<span class="blue">: 150%;</span> background<span class="blue">: #660099;</span> color: <span class="blue">#FFFFFF;</span> cursor: <span class="blue">pointer;</span> border<span class="blue">: 1px solid #009999;</span> border-radius<span class="blue">: 10px;</span> -webkit-box-shadow<span class="blue">: 6px 6px 5px #009999;</span> -moz-box-shadow<span class="blue">: 6px 6px 5px #009999;</span> box-shaddow<span class="blue">: 6px 6px 5px; #009999;</span><strong class="blue">}</strong><strong>input.</strong><span class="blue"><b>Bloggerdaddy</b>:</span><strong class="red">hover</strong> <strong class="blue">{</strong> color<span class="blue">: #99FF00;</span> background<span class="blue">: #0033CC;</span> border<span class="blue">: 1px solid #A3A3A3;</span> -webkit-box-shadow<span class="blue">: 2px 2px 5px #666666;</span> -moz-box-shadow<span class="blue">: 2px 2px 5px #666666;</span> box-shaddow<span class="blue">: 2px 2px 5px; #666666;</span><strong class="blue">}</strong></blockquote> <b style="font-size: 16px; line-height: 18.4px;"><span style="color: #351c75;">Step 5 :</span></b><span style="color: #351c75;"> <b>Click on Save template button and its done. </b></span></div> </div>

Tips Tools Tricks Widgets How To Make A Link Button-Download button

Many bloggers think that how to make a link button ??? so friends here is new useful trick for "link button". Demo Button Link ...

Read more »

Create Animated GIFs in the Browser with HTML5 and Web Workers

</script> </head> <body> <h1>Create Animated GIFs in the Browser with HTML5 and Web Workers</h1> <p>Drop a video. Select playback speed. Press "start GIF frames" to begin capturing images and "end GIF frames" to finish and process the video frames into an Animated GIF. <a href="#">Back to Article</a></p> <br> <div id="drop"> DROP!<button onclick="document.querySelector('input').click()">Or Select</button> <input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])"> <button id="start-button">start GIF frames</button> <button id="end-button">End GIF frames</button> <button id="sample-button">Try Sample File</button> <label>Speed</label> <input type="range" id="speed" min="30" max="1000" step="1" value="100"> <span id="speedrate">100</span> </div> <div id="output"></div> <h3>Video:</h3> <canvas id="c"></canvas> <video id="v" controls="" loop="" autoplay="" style="visibility:hidden;position:absolute;"></video> <h3>Animated GIF:</h3> <a download="" href="" id="link"><img id="image" src=""></a> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/javascript"> var worker = new Worker('w.js'); var URL = window.URL || window.webkitURL; if (!URL) { document.getElementById("output").innerHTML = 'Your browser is not <a href="http://caniuse.com/bloburls">supported</a>!'; } else { worker.addEventListener('message', function(e) { document.getElementById("output").innerHTML = "Done. Look below."; image.src = e.data; }, false); var start = document.getElementById("start-button"); var end = document.getElementById("end-button"); var sample = document.getElementById("sample-button"); var image = document.getElementById('image'); var speed = document.getElementById("speed"); var speedrate = document.getElementById("speedrate"); var flag = false; var delay = 100; //default speed //control play speed speed.addEventListener('change', function(){ var s = this.value; delay = s; speedrate.innerHTML = s; }, false); var v = document.getElementById("v"); var canvas = document.getElementById('c'); var context = canvas.getContext('2d'); var cw,ch; v.addEventListener('play', function(){ cw = v.clientWidth; ch = v.clientHeight; canvas.width = cw; canvas.height = ch; draw(v,context,cw,ch); },false); function draw(v,c,w,h) { if(v.paused || v.ended) return false; c.drawImage(v,0,0,w,h); if(flag == true){ var imdata = c.getImageData(0,0,w,h); worker.postMessage({frame: imdata}); } setTimeout(draw,delay,v,c,w,h); } sample.addEventListener('click', function(){ v.src = 'small.webm'; },false); start.addEventListener('click', function(){ flag = true; worker.postMessage({delay:delay,w:cw,h:ch}); document.getElementById("output").innerHTML = "Capturing video frames."; },false); end.addEventListener('click', function(){ flag = false; worker.postMessage({}); document.getElementById("output").innerHTML = "Processing the GIF."; },false); /* Drag drop stuff */ window.ondragover = function(e) {e.preventDefault()} window.ondrop = function(e) { e.preventDefault(); document.getElementById("output").innerHTML = "Reading..."; var length = e.dataTransfer.items.length; if(length > 1){ document.getElementById("output").innerHTML = "Please only drop 1 file."; } else { upload(e.dataTransfer.files[0]); } } /* main upload function */ function upload(file) { //check if its a video file if(file.type.match(/video\/*/)){ /* oFReader = new FileReader(); oFReader.onloadend = function() { document.getElementById("output").innerHTML = ""; var blob = new Blob([this.result], {type: file.type}); var url = URL.createObjectURL(blob); v.src = url; }; //oFReader.readAsBinaryString(file); oFReader.readAsArrayBuffer(file); */ //why read the whole video into memory when you can stream!! document.getElementById("output").innerHTML = ""; var url = URL.createObjectURL(file); v.src = url; } else { document.getElementById("output").innerHTML = "This file does not seem to be a video."; } } } </script>

Tools Create Animated GIFs in the Browser with HTML5 and Web Workers

Create Animated GIFs in the Browser with HTML5 and Web Workers Drop a video. Select playback speed. Press "start GIF frames...

Read more »

List of top 10 best responsive website / blog checkers online

<div dir="ltr" style="text-align: left;" trbidi="on"> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">I am been hearing so many things about responsive <a href="http://www.shipmethis.com/2014/04/checkwebsitehacked.html" target="_blank">website checkers </a>which check whether your website or blog is responsive with popular devices including tablets, mobile phones, laptops, televisions etc. You can use <a href="http://www.shipmethis.com/2014/04/responsiveadsplacement.html" target="_blank">responsive ads</a> for your responsive websites. Unfortunately I couldn't find good list of best responsive website / blog checkers online available to check shipmethis.com. Here I am listing some of the top responsive website / <a href="http://www.shipmethis.com/2013/05/top-7-best-and-popular-seo-online-tools.html" target="_blank">blog checkers</a> that are online.<br /> <br /> </span></span><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div style="text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F7OVpgOXiyj94m8hUq9_9aOja5kCZ6IKL5PRnQAt4-c0E2kzBhOQXiv4kbvtWZxjyDopR5uw6ZSbDtRpdHskYKO5lsLDuY2x7nqRUE0HAd2_jbBK2EHbTPPI1ChNAZBYwAvhBJPxUtM/s1600/Capture.PNG" imageanchor="1"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F7OVpgOXiyj94m8hUq9_9aOja5kCZ6IKL5PRnQAt4-c0E2kzBhOQXiv4kbvtWZxjyDopR5uw6ZSbDtRpdHskYKO5lsLDuY2x7nqRUE0HAd2_jbBK2EHbTPPI1ChNAZBYwAvhBJPxUtM/s320/Capture.PNG" width="320" /></a></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <span itemscope="" itemtype="http://schema.org/Blog">responsive</span></div> <span itemscope="" itemtype="http://schema.org/Blog"> <a href="https://www.blogger.com/null" name="more"></a><br /> 1.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://www.responsinator.com/?url=http%3A%2F%2Fwww.shipmethis.com" rel="" target="_blank">Responsinator.com</a> – Responsinator show your website in different devices including iPhone 3+4 portrait with a width of 320px, 480px, iphone 5, 568px, Crappy Android portrait with a width of 240px, 320px, Andriod Nexus portrait of 384px, 600px and so on. These show the website only and not the version of mobile hosted on blogger.<br /> <br /> 2.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://mattkersley.com/responsive" rel="" target="_blank">Mattkersley.com</a> - in this site you can select either devices only or width sizes. You cannot navigate the website shown in the frames. This site shows 240px, 320px, 480px, and 768px frames.<br /> <br /> 3.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://www.studiopress.com/responsive/" target="_blank">Studiopress.com</a> - This website is also like mattkersley.com which checks 240px, 320px, 480px, and 768px frames. This website is made by Matt kersley itself. Now you know the similarity.<br /> <br /> 4.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsivedesignchecker.com/www.shipmethis.com" target="_blank">Responsive design checker</a> - This site offers sizes such as 27 inch monitor, 17 inch workstation, 15 inch macbook pro, 11 inch macbook air, ipad landscape, nexus, and iphone. These are divided into desktops and laptops and tablets and phones. You can click through each icon and know how your appears in these devices.<br /> <br /> 5.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsivetest.net/" target="_blank">Responsive test</a> - This site offers scales which we can access the width of our website. You have to press enter to load your website after typing your website. You can change the width of devices by changing the numbers.<br /> <br /> 6.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsive.is/shipmethis.com" target="_blank">Responsive.is</a> - This website offers devices such as desktops, tablet landscapes, tablet portrait, smartphone landscapes and smart phone portrait. This is created by TypeCast.<br /> <br /> 7.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://designmodo.com/responsive-test" target="_blank">Designmodo.com</a> - This is a simple responsive checker where new bloggers can access and study.<br /> <br /> 8. <a href="http://www.dimensionstoolkit.com/a/#url=http://www.shipmethis.com&w=1024&h=480" target="_blank">Dimensionstoolkit</a> - Dimension tool kit is one of the newest response checker in town. This allows websites to view in devices like phone, wide phone, tablet and wide tablet. This also allows users to check the website's responsiveness in different widths up to 2450px.  Users can click on the scale to check the responsiveness.<br /> <br /> 9.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://quirktools.com/screenfly/#u=http%3A//www.shipmethis.com/2014/04/online-free-converter-gadget-from-html.html&w=1024&h=600" target="_blank">Quirktools.com</a> - I think this is a good website for checking your website. This website has scales to check width, many landscapes and portraits, There is option for rotating, allow scrolling button, use of proxy server etc. This one is the best in store today.<br /> <br /> 10. <a href="http://ami.responsivedesign.is/" target="_blank">ami.responsivedesign.is</a> - This is website that show website's responsiveness in laptop, television, tablet and mobile. The advantage of this is that you can see the website version in mobile of rather than the blogger mobile version.<br /> <br /> Hope you liked the list. You can suggest other good responsive checkers on the comment section. If you like this post, kindly share it and don’t forget to subscribe us.</span><br /> <span itemscope="" itemtype="http://schema.org/Blog"><a href="http://blogerdaddy.blogspot.com/2016/01/create-alexa-rank-widget-for-your.html"><br /></a></span> <span itemscope="" itemtype="http://schema.org/Blog"><a href="http://blogerdaddy.blogspot.com/2016/01/create-alexa-rank-widget-for-your.html">Create Alexa Rank Widget for your Website / Blog with JAVA Code</a></span><br /> <span itemscope="" itemtype="http://schema.org/Blog"><br /></span> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br /> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br /> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br /> <a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-family: 'times new roman'; font-size: x-large;">Click here for blogger tools</a><br /> <div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span itemscope="" itemtype="http://schema.org/Blog"></span></div> <div> <br /></div> </div>

Blogger Template Tips Tools List of top 10 best responsive website / blog checkers online

I am been hearing so many things about responsive website checkers which check whether your website or blog is responsive with popular dev...

Read more »

Best Free Tools and Tutorials for making websites / blogs responsive

<div dir="ltr" style="text-align: left;" trbidi="on"> <span itemscope="" itemtype="http://schema.org/Blog">Responsive design was a term coined by Ethan Marcotte. He have a blog which is the unstoppablerobotninja.com . As you know in he coming years of internet, mobile users are going to govern the revenue rates of publishers. The number of mobile phones in developing countries are going in high rate and the number of laptop rates are going down. You can read the economic times review about "Number of mobile handsets sold in India to reach 251 million units next year: Gartner" by Indu Nandakumar, ET Bureau at Oct 11, 2012. The article says that the number of Samsung mobile phones expected to sell in the 2013 is 251 million units.</span><br /> <span itemscope="" itemtype="http://schema.org/Blog"><br /></span> <span itemscope="" itemtype="http://schema.org/Blog">Responsive design is always an added bonus to your website. Responsiveness increases click rate, reduces bounce rate and make your site attractive to visitors from different devices. How one can create a responsive design? It is not easy to create a responsive design yourself, if you are not a pro in it.<br /> </span><br /> <div style="text-align: center;"> <span itemscope="" itemtype="http://schema.org/Blog"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGpKKQfDnywKb7BxT2yEquo8YkNloztRXe01wfQaDYDFAzKi0iR-cAou4DrwNaRmPsDL8pH_9kf6TwFMHqFGABAZkZualySopcJiv1DemgAltmv-ytOXd4EkUmtMg1-rctU7-Lr92Bk0/s1600/mm.jpg" imageanchor="1"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGpKKQfDnywKb7BxT2yEquo8YkNloztRXe01wfQaDYDFAzKi0iR-cAou4DrwNaRmPsDL8pH_9kf6TwFMHqFGABAZkZualySopcJiv1DemgAltmv-ytOXd4EkUmtMg1-rctU7-Lr92Bk0/s200/mm.jpg" width="200" /></a></span></div> <div style="text-align: center;"> <span itemscope="" itemtype="http://schema.org/Blog">on pc</span></div> <span itemscope="" itemtype="http://schema.org/Blog"><br /> May be you have seen some codes like this;</span><br /> <blockquote class="tr_bq"> <br /> /* Default styles first then media queries */<br /> @media screen and (min-width: 400px) {...}<br /> @media screen and (min-width: 600px) {...}<br /> @media screen and (min-width: 1000px) {...}<br /> @media screen and (min-width: 1400px) {...}</blockquote> or like this<br /> <br /> <blockquote class="tr_bq"> <link href="styles.css" rel="stylesheet" media="all and (max-width: 1400px)" </blockquote> <span itemscope="" itemtype="http://schema.org/Blog">These codes push the website to perform different layouts in different pixels.<br /> <br /> I can share you some good article written about making your website responsive and some tools.</span><br /> <span itemscope="" itemtype="http://schema.org/Blog"><br /></span> <br /> <div style="text-align: center;"> <span itemscope="" itemtype="http://schema.org/Blog"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQN3i00chhv8puPP_Fq9wAnEjmdO2TDbYEL5QbZsIaDCalPY5VODB4I1WNGz7AWgto9ZbF0wPNQ7_012H7jcmXmAA5LBeYOOwWO0TBR23XPiKhIG5WDi-yQe9Urfx4bj5C2Mq7kdP0z9M/s1600/on+mobile.PNG" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQN3i00chhv8puPP_Fq9wAnEjmdO2TDbYEL5QbZsIaDCalPY5VODB4I1WNGz7AWgto9ZbF0wPNQ7_012H7jcmXmAA5LBeYOOwWO0TBR23XPiKhIG5WDi-yQe9Urfx4bj5C2Mq7kdP0z9M/s320/on+mobile.PNG" width="176" /></a></span></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td class="tr-caption">on Mobile</td></tr> </tbody></table> <span itemscope="" itemtype="http://schema.org/Blog"> </span>First to some good articles about responsiveness.<br /> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"></span></span><br /> <h4> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text" style="background-color: yellow;">  Tutorial 1</span></span></h4> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"> </span></span> <br /> <div> </div> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"> </span></span> <br /> <div> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">In http://learn.shayhowe.com/ i have seen article about RESPONSIVE DESIGN. I really like it because of the simplicity in the article. The article share a responsive website called the <a href="http://foodsense.is/" target="_blank">food sense</a> and its performance. It also talk about Flexible Embedded Media, Combining Viewport Values, , Viewport Resolution, Viewport Scale, Viewport Height & Width, Mobile First, Media Query Browser Support, Orientation Media Feature, Aspect Ratio Media Features, Pixel Ratio Media Features,Resolution Media Feature,Logical Operators in Media Queries</span></span></div> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"> </span></span> <div> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">Flexible Grid and fixed grid.</span></span></div> <span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"> <div> </div> <div> </div> <div> <h4> <span style="background-color: yellow;"> Tutorial 2</span></h4> </div> <div> This article is found in http://alistapart.com and it had about 103 comments.This article discusses asic things like what is media query etc. You can view it here, <a href="http://alistapart.com/article/responsive-web-design" target="_blank">MOBILE TO WEBSITE AND VICE VERSA</a></div> <div> </div> <h4> <span style="background-color: yellow;"> Other Tutorials</span></h4> <div> 1. <a href="http://css-tricks.com/css-media-queries/">http://css-tricks.com/css-media-queries/</a></div> <div> </div> <div> 2. <a href="http://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/">http://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/</a></div> <div> </div> <div> 3. <a href="http://www.lukew.com/presos/preso.asp?26">http://www.lukew.com/presos/preso.asp?26</a></div> <div> </div> <div> 4. <a href="http://dev.w3.org/csswg/css-values/#viewport-relative-lengths">http://dev.w3.org/csswg/css-values/#viewport-relative-lengths</a></div> <div> </div> <h3 style="text-align: center;"> <span style="background-color: #6aa84f;"> TOOLS FOR RESPONSIVENESS</span></h3> <div> </div> <div> <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">You need check the responsiveness of your website. For that you have to use free responsive checkers available in the internet. For making your work easy, i have collected the best free ones and made a list which you can access here. </span><br /> <h4 style="background-color: white; border: 0px; clear: both; color: #402f33; font-family: Prociono, Arial, sans-serif !important; margin: 0px 0px 5px; outline: 0px; padding: 10px 0px 0px; position: relative; text-align: center; text-transform: capitalize; vertical-align: baseline;"> <a href="http://blogerdaddy.blogspot.com/2016/01/list-of-top-10-best-responsive-website.html" target="_blank">List Of Top 9 Best Responsive Website / Blog Checkers Online</a></h4> <div> Hope you got a clear image about the template and layout of the website. </div> </div> <div> </div> <div> The you can get how your website speed distribute in pc as well as mobile by going to this link.</div> <div> <h4 style="background-color: white; border: 0px; clear: both; color: #402f33; font-family: Prociono, Arial, sans-serif !important; margin: 0px 0px 5px; outline: 0px; padding: 10px 0px 0px; position: relative; text-align: center; text-transform: capitalize; vertical-align: baseline;"> <a href="http://blogerdaddy.blogspot.com/2016/01/free-online-website-webpage-speed-test.html" target="_blank">Free Online Website / Webpage Speed Test Tool From Google, Yahoo</a></h4> </div> </span></span>Hope this helps. Subscribing ship me this for cool posts like this. You can also follow us on fb, twitter and Google plus.<br /> <span itemscope="" itemtype="http://schema.org/Blog"></span><br /> <div> <a href="http://blogerdaddy.blogspot.com/2016/01/popular-posts-with-automatic-numbering.html"><br /></a> <a href="http://blogerdaddy.blogspot.com/2016/01/popular-posts-with-automatic-numbering.html">Popular Posts With Automatic Numbering - Bubbles!-Widget</a><br /> <br /></div> <div> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br /> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br /> <span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br /> <a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-size: x-large;">Click here for blogger tools</a><span itemscope="" itemtype="http://schema.org/Blog"></span><br /> <div> <br /></div> <div> </div> </div> </div>

Tips Tools Best Free Tools and Tutorials for making websites / blogs responsive

Responsive design was a term coined by Ethan Marcotte. He have a blog which is the unstoppablerobotninja.com . As you know in he coming ye...

Read more »

Online character count tool

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Of7l8umIeiu30B-G3V364IL1Ou6UsfWdcwA9WqAp0Vwp0dMR8ZWoh8xZFSuKSmFiu4kFvrQa3K7pJbjqCtUnFZaQhL8d85s3hfxRuxT8cMe_4kFUwoVDImGwY3bv3lW9bfhNtEe1rac/s1600/word+count.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Of7l8umIeiu30B-G3V364IL1Ou6UsfWdcwA9WqAp0Vwp0dMR8ZWoh8xZFSuKSmFiu4kFvrQa3K7pJbjqCtUnFZaQhL8d85s3hfxRuxT8cMe_4kFUwoVDImGwY3bv3lW9bfhNtEe1rac/s400/word+count.jpg" /></a></div> Character Counter tool is very useful tool to count your Meta description and title length before publish your webpage. <br /> <br /> Title and Meta Description very important part of every webpage search engines always prefer good length description and title page for show in top search result. It’s very important that your Meta Description must not exceed 145 Characters including spaces and that your Post titles must not exceed 66 Characters.<br /> <h1 style="border-bottom-style: none; border-top-style: none; font-family: Arial; font-size: 30pt; font-stretch: normal; text-align: center; text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.0980392) 0px 6px 1px, rgba(0, 0, 0, 0.0980392) 0px 0px 5px, rgba(0, 0, 0, 0.298039) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.247059) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.14902) 0px 20px 20px;"> <span style="color: magenta;">Character Counter Tool</span></h1> <div> </div> </div> </div> </div> </div> <script src="https://allbloggertips.googlecode.com/svn/Character-Count-%20jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ /** * Character Counter for inputs and text areas */ $('.word_count').each(function(){ // get current number of characters var length = $(this).val().length; // get current number of words //var length = $(this).val().split(/\b[\s,\.-:;]*/).length; // update characters $(this).parent().find('.counter').html( length + ' characters'); // bind on key up event $(this).keyup(function(){ // get new length of characters var new_length = $(this).val().length; // get new length of words //var new_length = $(this).val().split(/\b[\s,\.-:;]*/).length; // update $(this).parent().find('.counter').html( new_length + ' characters'); }); }); }); </script> <script src="http://www.vktechzone.com/2014/04/Online%20Character%20Count%20Tool%20Online2_files/core067.js" type="text/javascript"></script> <br /> <center> <div style="-khtml-box-shadow: 5px 5px 5px #aaa; -moz-box-shadow: 5px 5px 5px #aaa; -webkit-box-shadow: 5px 5px 5px #aaa; background-color: #eeeeee; border: 1px solid #505050; box-shadow: 5px 5px 5px #aaa; padding: 10px 10px 10px 10px;"> <div class="container"> <form action="" method="post"> <fieldset style="width: 96%;"> <div class="input"> <center> <span class="counter">56 characters</span></center> <br /> <textarea class="word_count" cols="60" id="field1" name="field1" onfocus="javascript:if(this.value=='Please Copy and paste your text here to start count characters.') this.value='';" rows="20" style="width: 100%;">Please Copy and paste your text here to start count characters.