bikin KONVERSI KODE pada blog

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
<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



Di bawah ini link HTML nya
<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

21 komentar

  1. Hi Man!!
    Can you send this template to me, please? thanks

    BalasHapus
  2. minta template yang ini dong mas ;) ^_^ terima kasih mas :-bd

    BalasHapus
  3. Makin Mantap Aja Mas Designnya Udah Pernah Liat Di Blognya Mas Yang Satunya :p :D

    BalasHapus
  4. makasih kang taufik,, fast respon :-bd

    BalasHapus
    Balasan
    1. sama sama mas, dan selamat malam selamat beristirahat :yaya:

      Hapus
  5. wah keren nih saya ijin coba ya mas taufik, hehe :D keren nih, ini dia yg saya cari2, tampilan blog ini keren :D
    -> http://yoga-tc.blogspot.com/

    BalasHapus
    Balasan
    1. wah keren nih saya ijin coba ya mas taufik, hehe :D keren nih, ini dia yg saya cari2, tampilan blog ini keren :D
      yang punya blog nya juga keren lho... ^_^ :D

      Hapus
    2. punya saya juga sudah jadi mas yg pastinya lebih ganteng & keren, hehe :-bd
      http://yoga-tc.blogspot.com/p/konversi-kode.html

      Hapus
    3. pewarnaan nya serasi, jadinya pas... :-b

      Hapus
  6. mas, gimana cara nampilkanya menggunakan popup?

    BalasHapus
    Balasan
    1. yang muncul window baru gitu, :D

      Hapus
    2. ini kode nya
      <a class='small-btn' 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' title='Jendela munculan'><i class='icon-folder-open'/> Konversi Kode</a>
      ganti alamatnya dengan alamat konversi anda

      Hapus
    3. trimakasih mas, sukses buat mas taufik :-bd

      Hapus
    4. mas, gimana atasi outer wrapper di http://qaptaas.blogspot.com/p/code-converter.html

      Hapus
  7. coba edit ulang lagi di dalam konersi kode nya di situ ada kode seperti di bawah ini
    @media (max-width:510px){
    #outer-wrapper {width:98%;}
    .main-wrapper{width:96.5%;border:none}
    }

    coba rubah nilai widht dari main-wrappernya dengan nilai 100% atau ke nilai auto

    BalasHapus
  8. wah.. terima kasih mas buat tutorialnya dan sangat bermanfaat buat newbie seperti saya hhehe... :p

    BalasHapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code