Semua blogger profesional tahu bahwa untuk menjadi seorang blogger yang bermutu wajib memiliki tools penunjang yang bermodalkan alat sebagai kelengkapannya dalam membangun blognya.

Tapi wajar saja jika seorang blogger pemula mengatakan “kami tidak tahu itu” di artikel ini saya coba untuk berbagi kepada kamu tools apa saja yang wajib kamu miliki untuk menunjang kinerja blogmu.

#1 Tools Html Converter

Fungsi Html converter ini yakni jika kamu mau membuat postingan artikel dimana artikel itu berbentuk kode script HTML/ JavaScript.

Maka cara untuk memasangnya dalam postingan tidak bisa dilakukan secara langsung karena jika kamu memasukan secara langsung kode script itu, maka hasilnya berbentuk sama dengan format yang dipasang dalam postingan.

Makanya diperlukan kode-kode pengganti untuk memunculkan kode script itu agar sesuai dengan kode aslinya dengan menggunakan tools Html converter atau Html pharse.

Fungsi lainnya ketika kamu mau memasang script pihak ketiga dalam template blog misalnya script iklan maka terlebih dulu kita diharuskan memparse script tersebut baru boleh disematkan dalam template.

Hal ini terjadi karena adanya perintah pemanggil yang beda pada script template yang mengharuskan kita membuat script yang ditanam itu jalan sendiri.

Para publisher google adsense juga akan setuju jika saya mengatakan bahwa script iklan adsense sebaiknya di pharse terlebih dahulu sebelum dipasang pada daleman template. Demo HTML PHARSE.

Cara membuat Html pharse dalam blog sangat simple :

1. Buat halaman baru dan beri judul Html converter
2. Pilih jenis penulisan Html bukan compose
3. copy code dibawah ini dan paste kedalam post laman tersebut
   <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>
4. Klik pubikasikan dan selesai silahkan test

#2 Tools CSS Minifier

Apakah kamu tahu bahwa kecepatan loading sebuah blog menjadi sebuah asset besar untuk menentukan keberhasilan sebuah blog.

Sebab alat web browser saat menampilkan blog kita secara utuh dari saat dibuka Lebih memperhatikan hal hal utama  antara lain: ukuran gambar, ukuran file html, ukuran file sebuah script.

Walau hal itu bukan sesuatu hal yang mendasar jika kamu memiliki sebuah koneksi internet yang cepat tapi sebagai mesin pencari akan lebih memperhatikan kualitas yang cepat dirayapi ketimbang yang berat.

Saya rasa kamu setuju dalam poin ini.

Script css yang tersemat pada template blogger berada diatas kode ]]> </ b: skin> Nah, jika kamu mau uji apakah blogmu berat atau tidak kamu bisa mengujinya lansung dengan menuju ke https://gtmetrix.com

Silahkan uji blogmu dengan memasukkan url ke kolom yang disediakan kemudian klik analisa.

Jika hasil yang ditampilkan dibawah 50% berarti sebaiknya kamu segera memperbaiki css yang ada dalam templatemu.

Kamu bisa gunakan tolls dari blog ini CSS MINIFIER dan cara pasang tools css minifier ke blogmu sebagai berikut :

1. Buat halaman baru dan beri judul Css minifier
2. Pilih jenis penulisan Html bukan compose
3. copy code dibawah ini dan paste kedalam post laman tersebut
   <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(/{([sS]+?)}/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(/{([sS]+?)}/g,function(e){return e.replace(/([(){}[]:;,]+)/g,”<span class=’pn’>$1</span>”).replace(/!important/gi,”<span class=’im’>!important</span>”)}),a=a.replace(//*([wW]+?)*//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)(.*?){([sS]+?)?}}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(//*[wW]*?*//gm,””):n.replace(/(n+)?(/*[wW]*?*/)(n+)?/gm,”n$2n”),n=n.replace(/([nrts ]+)?([,:;{}]+?)([nrts ]+)?/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>

    

4. Kemudian publikasikan .

#3 Tools Penghitung Kata

Nah ini tools favorit saya.  Saya pribadi sebelum mempublikasikan artikel saya terlebih dahulu saya menghitung jumlah karakter yang sudah saya buat untuk memastikan bahwa jumlah karakter yang saya buat sudah lebih dari 800 karakter.

Bukan cuma saya, tapi sahabat blogger lainnya juga mengatakan bahwa artikel yang memiliki jumlah karakter banyak adalah artikel yang berpotensi memiliki kualitas seo baik.

Search engine sangat menyukai artikel yang memiliki jumlah karakter banyak sebab artikel yang panjang akan menjelaskan dari judul tersebut secara pas dan jelas.

Kamu boleh Test menggunakan tools yang ada di blog ini Penghitung kata dan jika kamu niat juga untuk membuat Script aau widget penghitung kata kamu boleh ikuti cara dibawah ini :

1. Buat halaman baru dan beri judul Penghitung karakter / Character counter
2. Pilih jenis penulisan Html bukan compose
3. copy code dibawah ini dan paste kedalam post laman tersebut

   <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. Save dan publikasikan .

#4 Sitemap Blog

Sitemap yang fungsinya untuk menjelaskan kepada pengunjung apa saja daftar isi pada sebuah blog juga akan memiliki kualitas internal link yang baik.

Mesin pencari akan mengindex tanpa ada errornya duplikat link ataupun duplikat title sebab sitemap dibuat sesuai dengan pecahan tabel dan dipisahan dari struktur postingan.

Sebenarnya sama saja jika kamu menggunakan widget label tapi membuat peta artikel sendiri dalam blog lebih spesifik sebab menunjukkan semua nama judul yang ada dalam label.

Klik Demo Sitemap untuk melihat contohnya. Script itu saya ambil dari mba arlina yang menyertakan dalam dokumentasi templatenya.

Cara memasang sitemap responsive pada blog :

1. Buat halaman baru dan beri judul Sitemap
2. Pilih jenis penulisan Html bukan compose
3. Copy code dibawah ini dan paste kedalam post laman tersebut

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

4. Klik save dan publikasikan .

#5 Contact Form

Blogger juga sudah menyiapkan widget contact form di menu pilihan gadgetnya cuman mungkin karena tampilannya yang masih jadul dan kurang menarik sehingga sampai saat ini penggunanya sangat sedikit.

Kita tahu bahwa widget ini sangat penting dan sebaiknya diterapkan pada blog karena akan lebih memudahkan seseorang untuk menghubungi kita.

Lihat dulu contoh “Contact” Ini, jika kamu suka ayo terapkan keblogmu caranya :

1. Buat halaman baru dan beri judul Contact
2. Pilih jenis penulisan Html bukan compose
3. copy code dibawah ini dan paste ke dalam post laman tersebut

   Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

   <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: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;border-radius:2px;vertical-align:middle;”>required</span>
   <input id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” />

   Content <span style=”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;border-radius:2px;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” />
   <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>

4. Terakhir save dan publikasikan.

Nah itulah yang menurut saya wajib bloggers miliki untuk menunjang blognya. Untuk widget widget lain juga memang sangat disarankan tapi kita harus pintar dalam memilah milih apa saja yang penting dan sangat dibutuhkan.