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 kalau seorang blogger pemula menyampaikan " kami tidak tahu itu " di artikel ini saya coba untuk membuatkan kepada kau tools apa saja yang wajib kau miliki untuk menunjang kinerja blogmu .#1 Tools Html converter
Fungsi Html converter ini yakni kalau kau mau menciptakan postingan artikel dimana artikel itu berbentuk arahan script HTML/ JavaScript maka, cara untuk memasangnya dalam postingan tidak dapat dilakukan secara pribadi lantaran kalau kau memasukan secara pribadi arahan script itu, maka balasannya berbentuk sama dengan format yang dipasang dalam postingan Makanya dibutuhkan kode-kode pengganti untuk memunculkan arahan script itu biar sesuai dengan arahan 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 baiklah kalau 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 ketika menampilkan blog kita secara utuh dari ketika 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 kalau kau mempunyai sebuah koneksi internet yang cepat tapi sebagai mesin pencari akan lebih memperhatikan kualitas yang cepat dirayapi ketimbang yang berat . saya rasa kau baiklah dalam poin ini .
Script css yang tersemat pada template blogger berada diatas arahan ]]> </ b: skin> Nah, kalau 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 arahan 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];
</script>
</div> - Kemudian publikasikan .
#3 Tools penghitung kata
Nah ini tools favorit saya . Saya pribadi sebelum mempublikasikan artikel saya terlebih dahulu saya menghitung jumlah huruf yang sudah saya buat untuk memastikan bahwa jumlah huruf yang saya buat sudah lebih dari 800 huruf .
Bukan cuma saya , tapi sobat blogger lainnya juga menyampaikan bahwa artikel yang mempunyai jumlah huruf banyak ialah artikel yang berpotensi mempunyai kualitas seo baik .
Search engine sangat menyukai artikel yang mempunyai jumlah huruf banyak alasannya artikel yang panjang akan menjelaskan dari judul tersebut secara pas dan terperinci .
Kamu boleh Test memakai tools yang ada di blog ini Penghitung kata dan kalau kau niat juga untuk menciptakan Script aau widget penghitung kata kau boleh ikuti cara dibawah ini :
- Buat halaman gres dan beri judul Penghitung huruf / 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 alasannya sitemap dibentuk sesuai dengan potongan tabel dan dipisahan dari struktur postingan . seebnarnya sama saja kalau kau memakai widget label tapi menciptakan peta artikel sendiri dalam blog lebih spesifik alasannya 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 :
- 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 ketika 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 , kalau 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 pribadi 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 .