5 Tools Ini Wajib Seorang Blogger Miliki Dan Terapkan Pada Blognya

Semua blogger profesional tahu bahwa untuk menjadi seorang blogger yang bermutu wajib mempunyai tools penunjang yang bermodalkan alat sebagai kelengkapannya dalam membangun blognya .Tapi masuk akal saja bila seorang blogger pemula menyampaikan " kami tidak tahu itu " di artikel ini saya coba untuk mengembangkan kepada kau tools apa saja yang wajib kau miliki untuk menunjang kinerja blogmu .

#1 Tools Html converter

Fungsi Html converter ini yakni bila kau mau menciptakan postingan artikel dimana artikel itu berbentuk isyarat script HTML/ JavaScript maka, cara untuk memasangnya dalam postingan tidak dapat dilakukan secara eksklusif lantaran bila kau memasukan secara eksklusif isyarat script itu, maka akibatnya berbentuk sama dengan format yang dipasang dalam postingan Makanya dibutuhkan kode-kode pengganti untuk memunculkan isyarat script itu biar sesuai dengan isyarat aslinya dengan memakai tools Html converter atau Html pharse .

Fungsi lainnya ketika kau mau memasang script pihak ketiga dalam template blog contohnya script iklan maka terlebih dulu kita diharuskan memparse script tersebut gres boleh disematkan dalam template . hal ini terjadi lantaran adanya perintah pemanggil yang beda pada script template yang mengharuskan kita menciptakan script yang ditanam itu jalan sendiri .

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

Cara menciptakan Html pharse dalam blog sangat simple :

Buat halaman gres dan beri judul Html converter
Pilih jenis penulisan Html bukan compose
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, "&");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(/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>
Klik pubikasikan dan selesai silahkan test

#2 Tools Css minifier

Apakah kau tahu , Bahwa kecepatan loading sebuah blog menjadi sebuah asset besar untuk memilih keberhasilan sebuah blog . Sebab alat web browser dikala menampilkan blog kita secara utuh dari dikala dibuka Lebih memperhatikan hal hal utama antara lain : ukuran gambar, ukuran file html, ukuran file sebuah script .

Walau hal itu bukan sesuatu hal yang fundamental bila kau mempunyai sebuah koneksi internet yang cepat tapi sebagai mesin pencari akan lebih memperhatikan kualitas yang cepat dirayapi ketimbang yang berat . saya rasa kau oke dalam poin ini .

Script css yang tersemat pada template blogger berada diatas isyarat ]]> </ b: skin> Nah, bila kau mau uji apakah blogmu berat atau tidak kau dapat mengujinya lansung dengan menuju ke https://gtmetrix.com silahkan uji blogmu dengan memasukkan url ke kolom yang disediakan lalu klik analisa .

Jika hasil yang ditampilkan dibawah 50% berarti sebaiknya kau segera memperbaiki css yang ada dalam templatemu . kau dapat gunakan tolls dari blog ini CSS MINIFIER dan cara pasang tools css minifier ke blogmu sebagai berikut :

Buat halaman gres dan beri judul Css minifier
Pilih jenis penulisan Html bukan compose
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 isyarat 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("cssField");">Compress CSS</button>
<button onclick="clearField("cssField");">Clear Field</button>
<button onclick="selectAll("cssField");">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(/<(.*?)('|")(.*?)('|")>/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,"<").replace(/>/g,">"),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];

Advertiser

</script>
</div>
Kemudian publikasikan .

#3 Tools penghitung kata

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

Bukan cuma saya , tapi sahabat blogger lainnya juga menyampaikan bahwa artikel yang mempunyai jumlah abjad banyak yakni artikel yang berpotensi mempunyai kualitas seo baik .

Search engine sangat menyukai artikel yang mempunyai jumlah abjad banyak lantaran artikel yang panjang akan menjelaskan dari judul tersebut secara pas dan terang .

Kamu boleh Test memakai tools yang ada di blog ini Penghitung kata dan bila kau niat juga untuk menciptakan Script aau widget penghitung kata kau boleh ikuti cara dibawah ini :

Buat halaman gres dan beri judul Penghitung abjad / Character counter
Pilih jenis penulisan Html bukan compose
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>
Save dan publikasikan .

#4 Sitemap blog

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

Mesin pencari akan mengindex tanpa ada errornya duplikat link ataupun duplikat title lantaran sitemap dibentuk sesuai dengan cuilan tabel dan dipisahan dari struktur postingan . seebnarnya sama saja bila kau memakai widget label tapi menciptakan peta artikel sendiri dalam blog lebih spesifik lantaran menyampaikan 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 :

Buat halaman gres dan beri judul Sitemap
Pilih jenis penulisan Html bukan compose
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&max-results=9999&callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>
Klik save dan publikasikan .

#5 Contact form

Blogger juga sudah menyiapkan widget contact form di sajian pilihan gadegetnya cuman mungkin lantaran tampilannya yang masih jadul dan kurang menarik sehingga hingga dikala ini penggunanya sangat sedikit .

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

Lihat dulu pola Contact Ini , bila kau suka ayo terapkan keblogmu caranya :

Buat halaman gres dan beri judul Contact
Pilih jenis penulisan Html bukan compose
copy code dibawah ini dan paste kedalam post laman tersebut

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan eksklusif 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>
Terakhir save dan publikasikan .

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