5 tools for blogger should have and applied on their blog

 tools for blogger
Every profesional blogger know that if you want to be a blogger with high quality, you should have support tools to complete for build the blog. That’s okay if a new blogger said “we don’t know it”. In this article I will try to share to you which tools that you should have to complete your blog.

#1 Tools Html converter




The fungtion of html converter is if you want to creat an article when the article format is script code HTML/Javascript, you can’t set on your post directly, because if you set the scrip code directly, the result will be same as the format in your posted. That’s why we need code successor for appearing the script code, so it will appropriate with the real code with tools HTML converter or HTML Pharse.
Another fungtion is when you want to set third part in the blog template which is advertise script, first you should parsing the script, then pin it on template. This happened because there is different call instruction on the template script who need us to make a new script working.
The publisher of google adsense will agree if I said that advertise of adsense better to phrasing first before set in the template.
Its easy to creat HTML pharse in your blog:
1.    Create a new page and write HTML converter
2.    Choose HTML not compose
3.    Copy this code and paste on the post
4.    Click publish and you can test it.
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script><br />
<table style="margin: 0 auto;"><tbody>
<tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 500px;"></textarea><br />
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></td> </tr>
</tbody></table>

#2 Tools Css minifier



Did you know that loading speed can be an asset to determine fruitfulness of a blog. Because web browser tools when showing our blog intergrately more pay attention to first thing, which is: image size, file html size, and file script size.
Although that’s not a fundamental thing if you have an fast internet connection, but as a search engine will looking to mild quality than heavy quality. I think, you agreed with me.
Css script who pinned on the template blog there in upper code of ]]></b:skin> so, fi you want to test that your blog is heavy or not, you can test it directly to https://gtmetrix.com. Input your url to the coloumn then click analysis to test you blog.
If the result showing under 50%, that’s mean better you should fix the CSS on your template as soon as possible. You can use tools from this blog CSS MINIFIER. How to pair CSS MINIFIER on your blog:
1.    Create a new page and write CSS MINIFIER
2.    Choose HTML not Compose
3.    Copy this code and paste on the post
4.    Then publish

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:90%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{widt48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste kode css disini..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" />
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" />
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" />
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" />
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button>
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>


#3 CHARACTER COUNTER



this is my favorite tools. Before publish an article I personally counting number of characters that have been written to ensure that the character I have been written more than 800 words.
Not only me but also every blogger did the same thing. They said that article which has much carachter is potential to have the best SEO quality.
The search engine very love the articles who have a lot of character, beause long article will explain the tittle clearly.
You can test with the tools in this blog: words counting, and if you want to make a script or widget counter, you can follow this:
1.    Create a new page and write character counter
2.    Click html not compose
3.    Copy this code and paste on the post
4.    Save and publish
<form method="POST" name="wordcount">
<script language="JavaScript">

    function countit(){

    /*Word count script
    Over 400+ free scripts here!
    */

    var formcontent=document.wordcount.wordcount2.value
    formcontent=formcontent.split(" ")
    document.wordcount.wordcount3.value=formcontent.length
    }
    </script>
    <br />
<table border="0" cellpadding="5" cellspacing="0">
        <tbody>
<tr>
          <td width="100%"><textarea cols="55" name="wordcount2" rows="22" wrap="virtual"></textarea></td>
        </tr>
<tr>
          <td width="100%"><div align="right">
<input onclick="countit()" type="button" value="Calculate Words" /> <input name="wordcount3" size="20" type="text" /><br />
<div align="center">
</div>
</div>
</td>
        </tr>
</tbody></table>
</form>


#4 Sitemap blog

The function of sitemap is to explain to visitor what kind of list on the blog, and it will be have a good internal link. Check here SITEMAP
Search engine will index your blog without an error duplicate link or duplicate tittle because the sitemap made according fractional table and sparated from article post structure. Is the same thing if you use widget label but made a different maps on the blog more specific beause it will show all titles on the label.
Click demo sitemap for see the example. The script I took from Mrs. Arlina on her template document.
How to set responsive sitemap on your blog:
1.    Creat new page and write Sitemap
2.    Choose html not compose
3.    Copy this code and paste on the post
4.    Clik save and publish
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>


#5 Contact form

 blogger has prepare a widget contact form in the menu gadget, but maybe the display is so old and not interesting, so until now the user is only few users.
We know that this widget is very important and better to set it on your blog cause it will make someone easier to contact you. Check here CONTACT
You should see this contact first. If you like it, you can set in your blog.
1.    Creat new page and write contact
2.    Choose html not compose
3.    Copy this code and paste on the post
4.    Clik save and publish
<form id="kontak-arlina" name="contact-form">
Name
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

Email Address <span style="border-radius: 2px; border: 1px solid; color: #f14b4b; display: inline-block; font-size: x-small; font-weight: 300; line-height: normal; margin: 0 0 0 10px; padding: 2px 6px; vertical-align: middle;">required</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Content <span style="border-radius: 2px; border: 1px solid; color: #f14b4b; display: inline-block; font-size: x-small; font-weight: 300; line-height: normal; margin: 0 0 0 10px; padding: 2px 6px; vertical-align: middle;">required</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
form {color:#666;}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);border-radius:3px;resize:none;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(0,0,0,.24);}
#ContactForm1_contact-form-submit{float:left;background:#222;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#f14b4b;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

So, there is the tools that bloggers has to complete their blog. For the other wigets maybe highly recommended, but we should smart to choose which one important.


EmoticonEmoticon