Cara Membuat Halaman Web Tools Untuk Blog

Halaman web tools adalah halaman yang digunakan untuk membantu sesama blogger dalam memenuhi kebutuhan seperti penyingkat kode adsense google dan membantu mencari kode warna untuk template dengan mudah.

Cara Membuat HTML Converter atau Perse Tools Di Blogspot

Agar Sebuah Blog Bisa lebih terlihat professional dan full feature, maka anda akan membutuhkan laman statis yang namanya HTML converter atau Perse Toolss.

Apa Itu Html Converter / Perse Tools? 

Html Converter adalah Suatu tindakan yang anda lakukan untuk mengkonvert atau mengubah suatu kode HTML agar lebih SEO Friendly dan valid HTML 5 dengan mengubah atau mengganti kode-kode tertentu dalam sebuah struktur Kode HTML yang akan Di convert tersebut.

Blogging

Biasanya digunakan pada kode-kode <iframe> atau kode iklan unutk sebuah blog. Dan Keunuggulannya adalah membuat script tersebut dimuat lebih cepat.

Script yang berubah hasil dari coverter:

• < berubah menjadi &lt;
• " berubah menjadi &quot;
• & berubah menjadi &amp;
• ' berubah menjadi &#309;
• > berubah menjadi &gt;

Cara Membuat HTML Converter :

1. Buka Blogspot dan masuk Ke Menu laman

2. Buat Laman Baru dan letakkan kode berikut ini di kolom HTML

<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>  
<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: 550px;"></textarea>
<div style="text-align: left;">
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></div>
</td> </tr>
</tbody></table>

DEMO

Demikianlah Tips kali ini mengenati tutorial cara membuat html converter. Semoga bisa membantu dan bermanfaat buat pembaca sekalian.

Cara Membuat Color Picker Di Blogspot

Color Picker adalah Suatu tools yang dibuat agar para pembaca bisa mengetahui kode html suatu warna yang diinginkan dengan mudah tanpa harus cari-cari di photoshop.

Biasanya yang sering menggunakan tools ini adalah para blogger yang suka mengedit template senidiri. Dan color picjer yang akan saya share disini adalah hasil cari-cari di google atau lebih tepatnya di blog GulingGuling.

Dan bagi yang ingin membuat color picker ini di halaman statis blogspot, silahkan ikuti langkah beriku ini:

1. Seperti biasa masuk ke menu laman di blogspot

2. Lalu Salin Kode dibawah ini dan pastekan di halaman statis anda

3. Ingat Sebelum mempaste kode ini, anda harus memberi judul pada halaman tersebut terlebih dahulu agar nanti URL yang dihasilkan tidak berantakan atau terlalu panjang.

dir="ltr" style="text-align: left;" trbidi="on">
<h3>
<span style="font-weight: normal;">Cara Pemakaian:</span></h3>
<div>
<span style="font-weight: normal;">1. Klik Tombol warna, maka akan muncul pilihan warna lain.</span></div>
<div>
<span style="font-weight: normal;">2. Setelah seleasi menetukan warna yang diinginkan klik </span><b>OK.</b></div>
<div>
3. Terakhir untuk memunculkan kode warna silahkan klik <b>Get Color</b>.</div>
<h3>
Pick a Color:</h3>
<input id="inputColor" type="color" value="#ff1a1a" />
<button onclick="getColor()">Get Color</button>
<div id="colorHex">
</div>
<div id="colorRGB">
<script>
function getColor() {
    document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
    document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    var r = parseInt(result[1], 16);
    var g = parseInt(result[2], 16);
    var b = parseInt(result[3], 16);
    return 'RGB('+r+','+g+','+b+')'; 
}
</script>
</div>
</div>

4. Terakhir untuk menyimpan klik Publikasikan

5. Lihat hasil klik Result

oke, sekian saja postingan untuk tips blogging kali ini, semoga bermanfaat untuk anda dan selamat mencoba serta semoga berhasil.

PS: Membuat halaman statis khusus yang hanya berisi web tools seperti Html converter, css minifier, dan color picker akan membuat blog anda lebih terlihat professional menurut para pakar di bung kamis.