Cara Menambahkan Fitur Web tools di Blog

Loading...

Halo sobat anak simpel, jika blog kalian membahas niche tantang blogging, maka tidak ada salahnya menambahkan fitur webtools di blog kalian. Karena webtools sangat bermanfaat bagi para blogger maupun bagi seorang yg ingin belajar HTML.
Cara menambahkan fitur webtool di blog

Webtools disini, berfungsi utk keperluan para blogger, atau utk keperluan blogging kita sendiri.
Nah pd kali ini saya akan membahas cara menambahkan fitur webtools di blog.
Contoh webtools yg sudah terpasang di blog saya ada tiga, yaitu:
1. HTML pharse
2. CSS minifier
3. Color Picker

Cara Menambahkan Fitur Webtools 

Seperti yg saya katakan diatas, pd kali ini saya akan membahas cara membuat webtools , namun disini saya hanya akan membahas 3 webtools, yakni HTML pharse, CSS minifier, dan Color picker.

1. HTML Pharse

Pada pembahasan yg pertama ini, saya akan membahas tentang HTML Pharse.
Apa itu HTML Pharse?
Jadi HTML Pharse adalah Webtools yg berfungsi utk memparse kode HTML.
Biasanya digunakan ketika seorang blogger ingin memasang kode iklan di template, maka kode iklannya harus di pharse dulu menggunakan HTML pharse ini.
Lalu bagaimana cara membuatnya?
Berikut cara membuatnya , simak dgn baik ya sob.
   1. Login terdahulu ke blogger
   2. Jika sudah berada di dashboard blogger, lalu pilih tata letak
   3. Lalu pilih tambahkan gadget
   4. setelah itu pilih HTML/Javascript
   5. Lalu masukkan script berikut
<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 />
<h2>
</h2>
<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>
<br />
<div style=”text-align: left;”>
<input onclick=”convert();” style=”padding: 5px;” type=”button” value=”Parse Script” /></div>

</td> </tr>
</tbody></table>
   6. Setelah itu simpan
Jadi begitu cara membuat HTML pharse, jika sudah maka publikasikan.

2. CSS Minifier

Pembahasan yg kedua adalah tentang CSS Minifier.
Langsung saja simak cara membuatnya berikut:
   1. Login ke blogger
   2. Pd dashboard blogger , pilih tata letak
   3. Lalu pilih tambahkan gadget
   4. Pilih HTML/Javascript
   5. Lalu masukkan script berikut ini
<div id=”cssminifier”>
<h2>
</h2>
<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>
<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>
   6. Lalu Klik simpan
Jika kalian sudah mengikuti langkah langkah di atas jangan lupa utk mempublikasikannya.

3. Color Picker

Pembahasan yg terakhir adalah tentang color picker
Color picker disini berfungsi utk mengetahui kode HTML suatu warna.
Langsung saja berikut cara membuatnya:
   1. Login ke blogger
   2. Pd dashboard blogger , pilih tata letak
   3. Lalu pilih tambahkan gadget
   4. Pilih HTML/Javascript
   5. Lalu masukkan script berikut ini
<br />
<dir br=”” gt=”” 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 yg diinginkan click </span><b>OK.</b></div>
<div>
3. Terakhir utk memunculkan kode warna silahkan click <b>Get Color</b>.</div>
<h3>
Pick a Color:</h3>
<input id=”inputColor” type=”color” value=”#ff1a1a” />
<button onclick=”getColor()”>Get Color</button>
<br />
<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-fd]{2})([a-fd]{2})([a-fd]{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>
</dir>
   6. Lalu Klik simpan
Setelah semuanya selesai, jangan lupa publikasikan.

Penutup

Baiklah sobat anak simpel, begitulah cara menambahkan fitur weebtools di blog, semoga apa yg saya tulis ini dapat bermanfaat bagi kalian dan bisa membantu kemajuan blog kalian.
Loading...

Tags: #Blog #Cara #Fitur #Menambahkan #tools

author
Author: 
    Barbie Kumalasari Ngaku Tarif Endorse nya Ratusan Juta, Netizen: Siapa yg Mau Bayar?
    slidegossip.com – Barbie Kumalasari seolah tak ada hentinya membuat sensasi. Setelah heboh dgn
    Lucinta Luna Dimaki-Maki Raffi Ahmad Sampai Nangis Gara-Gara Rambutan! Settingan?
    slidegossip.com – Kabar mengejutkan datang dr Raffi Ahmad dan Lucinta Luna. Seperti dilansir
    Guru lelaki maut ketika water rafting
    Gambar hiasan via MyAdventureHost GOPENG 15 Sept. – Seorang guru lelaki mati lemas
    8 Tips Lindungi WhatsApp Dari Hacker Nakal
    WhatsApp adalah aplikasi perpesanan terpopuler. Bagaimana tidak, jumlah pengguna aktif blnannya lebih dr

    Leave a reply "Cara Menambahkan Fitur Web tools di Blog"