3 Tool Yang Wajib Blogger Miliki Untuk Meningkatkan Peforma Blog

Sebagai blogger kita harus menyediakan suatu alat yang dapat menununjang performa blog yang kita miliki. Namun kebanyak blogger tidak menyedari keberadaan tool dan manfaat tool tersebut padahal tool tersebut adalah salah satu tolak ukur blog yang berkualitas. Naah pasti kalian yang masih awam masih bingung dengan nama tool ?. Tool merupakan suatu alat yang dapat membantu kinerja suatu perangkat. Banyak macam tool yang dapat kalian temukan namun di artikel ini saya akan membahas 3. tool yang wajib blogger miliki. Naah loh wajib apa betul ini wajib ? sebnarnya tidak namun apabila kita ingin blog kita menjadi lebih berkualitas kita harus memasang 3 Tool ini karena dengan kita memasang tool ini blog kita akan lebih terlihat profesional dan berkualitas.

TOOL

3 Tool Yang Wajib Blogger Miliki.

1. Tool CSS minifier.

Tool ini meruapakan tool yang berguna untuk meminimalisir penggunaan CSS agar loading blog lebih cepat. Pernahkah kalian menjumpai blog yang memiliki loading blog yang lambat ? loading blog yang lambat itu ada beberapa faktor yang mempengaruhi salah satunya penggunaan Script CSS yang berlebihan. Dengan kita minifier CCS pada tamplate blog kita maka blog kita akan terasa ringan dan cepat. Maka dari itu tool ini sangat di perlukan pada blog kita terutama blog yang mendesain tamplate.

Cara membuat tool CSS minifier.

1. Pertama kalian masuk buat postingan di menu laman.
2. Beri jenis penulisan HTML bukan compose.
3. Beri judul halaman dengan judul CSS converter.
4. Masukan kode di bawah ini.

<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:100%;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{width:48%;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 your CSS code here..." spellcheck="false"></textarea>
<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>.

5. Dan kalian bisa langsung publikasikan.

2. HTML Converter.

Pernahkah kalian membuat suatu postingan namun postingan itu berbentuk HTML dan javascript, tentunya kita tidak dapat langsung mempublikasikan karena skrip itu tidak cocok untuk di publikasikan namun kita bisa meng converter script itu agar dapat di publikasikan. Tool untuk meng converter html atau parse yaitu HTML converter. HTML converter ini juga berfungsi untuk memasukan script pihak ketiga kedalam tamplate blog kita seperti kita mau memasang script iklan pada blog kita perlu mengparse terlebih dahulu script tersebut menjadi html, maka daru itu tool HTML converter sangat di butuhkan pada blog kita untuk mempermudah dalam mengparse script.

Cara membuat tool HTML converter.

1. Masuk ke menu halaman dan buat satu postingan.
2. Beri judul dengan judl HTML converter.
3. Ubah jenis penulisan menjadi HTML.
4 Setelah itu kalian masukan kode di bawah ini.

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>
<br />
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</ul>
<style type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{font:13px 'Courier New',Monospace;border:1px solid #e9e9e9;width:550px;height:250px;margin:0 auto;display:block;background-color:#f3f3f3;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
button:active{background:#3f92e1;}
button[disabled],button[disabled]:active{background:#3f92e1;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
</style>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('convert').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/</g, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

5. Setelah itu kalian bisa publikasikan.

3. Tool penghitung kata.

Tool yang satu ini berguna untuk menghitung beberapa kata yang telah kita buat. Tool ini sangatlah saya sukai karena dengan tool ini kita bisa menghitung berapa kata yang telah kita buat. Ada yang berpendapat bahwa artikel yang memiliki kata - kata yang banyak bisa di bilang artikel berkualitas namuan bagaimana kita menghitungnya ala harus menghitunya satu persatu ? tidaklah kita tidak perlu menghitungnya satu persatu kita hanya perlu membuat tool yang dapat menghitung kata - kata.

Cara membuat tool penghitung kata.

1. Masuk ke menu halaman dan buat satu postingan.
2. Beri judul dengan judul Penghitung kata.
3. Ubah jenis penulisan menjadi HTML.
4 Setelah itu kalian masukan kode di bawah ini.

<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>

5. Kalian bisa langsung publikasikan.

Naah itulah 3 tool yang wajib blogger miliki untuk meningkatkan peforma blog. Mungkin artikel di atas ada yang kurang jelas kalian bisa komen di bawah dengan bahasa yang sopan dan bijak.

Bagikan di Facebook

Bagikan di Twitter

Bagikan di Google+

Bagikan di LinkedIn