bikin KONVERSI KODE pada blog

1 Des 2013

Dengan akan berakhirnya tempat penyimpanan data di google yaitu googlecode. kita sebagai para blogger mulai memindahkan data ke google drive ^satu / _satu apalagi data yang buat di host di blog tentunya di atur ulang dan di edit lagi sesuai keperluan. kali ini saya akan membuat sebuah tool untuk blog yaitu KONVERSI KODE tool ini biasa di pasang pada blog blog yang mengulas tentang tutorial blog.
Perhatikan kode di bawah ini

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116<style type="text/css">
#site-header,
#sidebar-wrapper,
#box-right,
#site-nav,
#comments,
.comments,
.breadcrumb,
#site-footer,
#home-links,
.home-links,
#blog-pager,
.post-head,
.top-post,
.post-title
{display:none}
#outer-wrapper {width:500px;}
.main-wrapper {width:96%;margin:2px}
body {
  background-color:#333;
  padding:10px;
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#999;
 }
p {margin-top:20px;}
code {color:#21A121;}
#codes {
  border:none;
  width:98%;
  height:225px;
  margin:10px auto 10px;
  display:block;
  background-color:#444;
  padding:5px;
  font:normal 12px 'Courier New',Monospace;
 }
#codes:focus {background-color:#3c3c3c;color:white;}
.button-group {
  margin:0px auto 0px;
  text-align:center;
}
button,button[disabled]:active {
  background-color:#1C588A;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:black;
  text-shadow:0 1px 1px #4285F4;
padding:5px 10px;
  border:1px solid #444;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
 box-shadow:0 1px 2px #000;
}
button:active {box-shadow:none}
button[disabled],button[disabled]:active {opacity:0.4;cursor:default;}
 #opt1,
 #opt2,
 #opt3,
 #opt4,
 #opt5 {
  display:inline-block;
  margin:0px 10px 0px 0px;
  vertical-align:middle;
  border:none;
  outline:none;
 }
@media (max-width:510px){
#outer-wrapper {width:98%;}
.main-wrapper{width:96.5%;border:none}
}
</style>
<textarea spellcheck="false" id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button>
<button onclick="cdClear();">Bersihkan</button>
</div>
<p>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br />
<input id="opt2" type="checkbox" />Konversi <code>&#39;</code> menjadi <code>&amp;#039;</code><br />
<input id="opt3" type="checkbox" />Konversi <code>&quot;</code> menjadi <code>&amp;quot;</code><br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</p>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

Pada elemen yang di block biru adalah elemen yang tidak perlu ditampilkan. Silahkan sobat atur / edit lagi elemen mana yang harus di sembunyikan / tidak ingin di ikut di tampilkan dengan elemen display:none

Pada elemen yang di block hijau adalah elemen untuk menyesusikan lebar pada saat menampilkan pada jendela tampilan yang baru dengan kata lain biar responsif

Untuk pemasangan nya silahkan copy paste kode di atas pada new entry atau posting baru atau pada laman baru seperti biasa kita pastekan pada menu HTML dan bukan COMPOSE sebelum mempublish kan alangkah lebih baik pratinjau dulu barang kali belum sesuai atau masih ada yang error. Karena ini tool konversi kode dan bukan posting biasa jadi jadwal nya di mundurkan jauh ke belakang karena kita hanya perlu LINK nya saja. untuk lebih jelasnya lihat demo

• DEMO

Di bawah ini link HTML nya

1<a class='small-button' href='http://topsmedia.blogspot.com/2013/01/konversi-kode.html' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=400,resizable=0,top=50,left=100&quot;);return false;' target='_blank'>konversi kode</a>

Untuk elemen small-button silahkan sesuaikan dengan eleman tombol yang ada di template sobat
Itulah ulasan yang singkat tentang bikin KONVERSI KODE pada blog. saya hanya mengantisipasi kode kode yang di simpan di googlecode ke bentuk lain, biar pada saat googlecode di tiadakan oleh pihak google kita sudah aman dan santai tidak di repotkan lagi dengan kode kode yang error.

sumber kode :
dte.web.id
mas Taufik Nurrohman

tool

Taufik 14.16