Jun 11, 2017

Cara Membuat Tutorial Animasi GIF Dengan LICEcap

Cara Membuat Tutorial Animasi GIF Dengan LICEcap
Cara Membuat Tutorial Animasi GIF Dengan LICEcap - Sebagian orang khususnya blogger mungkin biasa menggunakan software screen recorder sebagai media berbagi tutorial, lalu di upload di situs Youtube. Hal ini mungkin tidak begitu memberatkan bagi blogger yang memiliki koneksi unlimited atau wifi. Namun saya rasa bagi blogger yang cuma modal seadanya cukup keberatan apabila membuat sebuah tutorial dalam bentuk video.

Apalagi ukuran videonya yang kadang tidak masuk akal. Maka dari itu, kamu bisa menggunakan software ringan bernama LICEcap.

Cara kerjanya sama seperti kebanyakan screen recorder, yakni merekam aktifitas yang terjadi pada layar desktop kamu. Bedanya, hasil rekaman tersebut disimpan dalam bentuk gambar berformat .GIF. Ya, gambar bergerak atau beranimasi. Karena hasil rekaman disimpan dalam bentuk gambar, maka ukurannya pun ringan. Kamu bisa lihat fitur dan system requirement di situs resmi LICEcap.

Cara Menggunakan LICEcap

Untuk penggunaannya mudah sekali. Pertama, klik tombol Record yang ada di pojok kanan. Kemudian kamu akan disuruh menamai file kamu dan klik Save. Setelah itu, barulah software ini mulai merekam.
Cara Membuat Animasi GIF Dengan LICEcap

Jika sudah selesai merekam, klik tombol Stop yang berada disamping tombol Record. Animasi GIF milikmu sudah jadi.
Cara Membuat Gambar GIF Dengan LICEcap

Oh iya, kamu bisa mengatur resolusi dan memilih daerah tertentu untuk direkam dengan cara menarik sisi software. Bisa juga dengan menulis ukuran secara manual di kolom yang ada di pojok kiri.

Cara Membuat Tutorial Animasi GIF Dengan LICEcap

Hasil animasi GIF nya bakal seperti ini. Mudah kan?
Cara Membuat Tutorial Animasi GIF Dengan LICEcap

Jun 5, 2017

Cara Membuat Ucapan Marhaban Ya Ramadhan Dengan CSS Animation

Cara Membuat Ucapan Marhaban Ya Ramadhan Dengan CSS Animation

Cara Membuat Ucapan Marhaban Ya Ramadhan di Blog - Gak kerasa kita para muslim sudah menunaikan ibadah puasa selama seminggu lebih. Khususnya para blogger, mungkin terasa kurang afdol bila tidak ada ucapan selamat berpuasa di blog nya masing-masing. Saya sendiri sampai kelupaan dan akhirnya baru bikin hari ini.

Nah, untuk itu teman-teman bisa pasang ucapan Marhaban Ya Ramadhan yang satu ini. Menariknya, widget ini hadir dengan fitur CSS Animation. Sebenarnya ini widget lama yang dibuat Om Adhi dari Kompi Ajaib, beliau pun sudah membuat versi baru dari ucapan Marhaban Ya Ramadhan dengan efek Parallax yang lebih bagus dari ini. Namun saya sendiri lebih suka versi CSS Animation, karena terlihat elegan dan simple pastinya.

Untuk demo, bisa kamu lihat langsung di blog ini.

Ya sudah, langsung saja di pasang.
  • Pertama, copy kode dibawah ini lalu salin di atas kode </head>.
<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

  • Setelah itu, copy kode dibawah ini lalu salin di atas kode <body>.
<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='URL FOTO ANDA' width='50' title="Click Me!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"Marhaban Ya Ramadhan"</h2>
    <p>Bulan suci kembali tiba, saat tepat menyucikan diri dari segala dosa, mohon dimaafkan dari segala kesalahan.
      <br/><br/> Saya, <b>NAMA ANDA</b> selaku admin blog <b>TITLE BLOG</b> mengucapkan:
      <br/>
      <b>"Selamat menjalankan ibadah puasa bagi umat yang menjalankannya"</b>.</p>
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='URL FOTO ANDA' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

Silahkan URL FOTO ANDA diganti dengan url foto kamu. Caranya kamu bisa mengunjungi Google Photos lalu upload foto yang kamu inginkan. Kemudian copy deh url gambarnya. Kemudian untuk NAMA ANDA dan TITLE BLOG bisa kamu sesuaikan sendiri.

Jun 4, 2017

Cara Mudah Verifikasi Channel Youtube

Cara Mudah Verifikasi Channel Youtube

Cara Mudah Verifikasi Channel Youtube - Masih berhubungan dengan Youtube, kali ini saya akan memberikan tutorial mengenai cara memverifikasi channel youtube kamu dengan mudah dan cepat. Verifikasi yang saya maksud disini bukanlah lencana verified yang biasa dimiliki Youtuber terkenal, jadi jangan salah paham.

Pada dasarnya channel youtube yang baru dibuat berstatus belum terverifikasi, sehingga ada batasan-batasan fitur yang bisa kamu akses. Tentu saja batasan-batasan tersebut cukup mempersulit kamu yang suka membuat konten di youtube.

Namun ketika channel terverifikasi, batasan-batasan tersebut akan ditiadakan dan kamu bisa menikmati fitur-fitur berikut.
  • Dapat mengupload video berdurasi lebih dari 15 menit.
  • Dapat menambahkan thumbnail khusus untuk mempercantik tampilan video.
  • Dapat melakukan live-streaming.
  • Mendapatkan reputasi yang lebih baik di sistem Youtube.
  • Mendapatkan prioritas lebih tinggi untuk tampil di halaman pencarian Youtube.
  • Mencegah channel dianggap spam.
  • Dsb.
Nah, fitur yang menguntungkan bukan? Kalau begitu langsung saja simak tutorial berikut.

Cara Verifikasi Channel Youtube

  1. Pertama, pastikan sudah login akun youtube. Kemudian klik link berikut youtube.com/verify.
  2. Kemudian pilih Negara kamu yang tentu saja Indonesia.
    Cara Mudah Verifikasi Channel Youtube
  3. Lalu pilih opsi verifikasi yang kamu inginkan. Pada tutorial ini saya mencontohkan opsi kedua yaitu melalui SMS.
  4. Setelah itu masukkan nomor hp kamu kedalam kolom yang disediakan.
  5. Kemudian, klik Submit.
  6. Akan muncul sms masuk di hp kamu, masukkan kode yang ada ke dalam kolom yang disediakan dan klik submit.
    Cara Mudah Verifikasi Channel Youtube
  7. Channel kamu berhasil di verifikasi.
    Cara Mudah Verifikasi Channel Youtube
Demikian tutorial singkat kali ini. Semoga bermanfaat!

May 31, 2017

Cara Mengganti Thumbnail Video Youtube

Cara Mengganti Thumbnail Video Youtube
Cara Mengganti Thumbnail Video Youtube - Sebelumnya saya selaku admin Dunia Kozuki mengucapkan Selamat Menunaikan Ibadah Puasa bagi teman-teman yang menjalankan. Sudah lama gak update, tau-tau sudah puasa. Maafkan admin yang gak pernah update. Maklum, masih sibuk sekolah.

Oke, kali ini saya akan memberikan tutorial yaitu cara mengganti thumbnail video youtube. Apa itu thumbnail? Thumbnail secara istilah berarti sebuah gambar preview atau cover yang mewakili isi dari sebuah video. Biasanya video youtube yang baru di upload akan memiliki thumbnail default yang diambil dari isi video itu sendiri.

Memangnya thumbnail itu penting ya? Menurut saya penting. Dengan tampilan thumbnail yang menarik, akan memikat penonton untuk menonton video kamu. Kamu sendiri pasti lebih memilih untuk klik video dengan thumbnail yang menarik dibanding thumbnail yang seadanya tanpa editing sedikitpun.

Karena berkaitan dengan editing, pastinya kamu butuh software editing gambar semacam Adobe Photoshop. Tapi berhubung artikel ini bukan untuk mengajari kamu cara 'membuat' thumbnail video, saya anggap kamu sudah memiliki thumbnail. Sebagai referensi, kamu bisa screenshot cuplikan dari video kamu yang kamu anggap dapat mewakili isi dari videomu. Lalu edit di Photoshop supaya menjadi lebih menarik, kamu bisa atur kecerahan dan sebagainya.

Lanjut ke bagian tutorial

Cara Mengganti Thumbnail Video Youtube

  1. Pertama, masuk ke Youtube dan klik "Creator Studio".
  2. Kemudian klik Video Manager untuk menemukan video kamu yang ingin diganti thumbnail-nya.
  3. Lalu klik Edit pada video yang diinginkan.
  4. Setelah itu klik Custom Thumbnail lalu pilih thumbnail yang sudah kamu buat.
  5. Tunggu proses upload lalu klik Save Changes untuk menyimpan perubahan.
Silahkan lihat gambar dibawah ini untuk lebih jelasnya.

Bagi yang belum ada tombol Custom Thumbnail, itu artinya channel kamu belum diverifikasi. Silahkan lihat postingan saya yang satu ini : Cara Mudah Verifikasi Channel Youtube
Nah, gampang kan? Admin dan teman-teman juga punya channel parodi loh. Cek Ulu Production lalu klik subscribe dan like. Terima kasih!

Apr 12, 2017

Cara Download Album Facebook Sekaligus dengan Mudah

Cara Download Album Facebook Sekaligus dengan Mudah

Cara Download Album Facebook Sekaligus dengan Mudah - Setelah sekian lama tidak update, akhirnya saya kembali lagi untuk membahas cara download album facebook sekaligus tanpa susah payah download satu persatu. Mungkin pernah terpikirkan oleh teman-teman semua untuk mencari tahu cara untuk mengunduh suatu album di facebook secara sekaligus (satu album). Sayangnya, memang jarang sekali ditemukan software atau ekstensi pendukung browser yang memiliki fitur untuk hal tersebut.

Belum lagi, Facebook sudah menghapus fitur download album yang dulu pernah ada. Sehingga kebanyakan postingan sejenis yang bertebaran di SERP Google itu "Cara Kuno" dan tidak ada manfaatnya.

Tapi jangan khawatir, pada browser Google Chrome masih ada ekstensi pendukung yang dapat membantu. Dengan ekstensi tersebut, kamu bisa mengunduh album facebook sendiri maupun album orang lain. Ya, kita akan menggunakan DownAlbum.
  1. Pastikan sudah login ke akun Facebook kamu, kemudian arahkan ke tempat album yang ingin di-download.
  2. Kemudian pasang ekstensi DownAlbum.
  3. Nah, tepat di halaman yang terdapat album, klik tombol DownAlbum yang berada di pojok kanan browser. Lebih jelasnya silahkan lihat gambar dibawah ini.
    Cara Download Album Facebook Sekaligus dengan Mudah

  4. Setelah itu, tekan tombol Ctrl+S untuk menyimpan seluruh gambar. Lihat gambar dibawah ini.
    Cara Download Album Facebook Sekaligus
  5. Selesai!
Walaupun format penyimpanannya .html, namun tetap saja seluruh gambar dari album tersebut akan ikut terunduh. Mudah sekali kan? Nah, kamu bisa menerapkan cara ini jika ingin download album-album lain. 

Apr 4, 2017

Cara Uninstall Program dengan Bersih Tanpa Sisa

Cara Uninstall Program dengan Bersih Tanpa Sisa
Cara Uninstall Program dengan Bersih Tanpa Sisa - Uninstall program merupakan hal yang wajib jika ada suatu program yang tidak terlalu dibutuhkan. Karena pada dasarnya kita punya kecenderungan untuk menginstall program yang terlihat menarik, padahal nyatanya tidak begitu dibutuhkan. Kalau sudah begitu? Yang ada komputer bakal lemot karena banyaknya program yang menumpuk.

Mungkin boleh saja meng-install banyak program, itupun kalau kamu punya spesifikasi komputer yang mumpuni. Kalau spesifikasi seadanya musti pintar memanajemen ruang hardisk.

Untuk meng-uninstall suatu program biasanya kita akan menggunakan fitur uninstaller bawaan Windows yang ada di Control Panel. Padahal uninstaller bawaan Windows tersebut tidak sepenuhnya menghapus program, yakni masih menyisakan beberapa direktori tersembunyi dan registry. Kalau dibiarkan, komputer bisa lemot dan kinerja menurun.

Sudah banyak software yang khusus membantu untuk uninstall program, namun sampai saat ini Revo Uninstaller yang benar-benar menghapus program sampai bersih tanpa sisa. Direktori dan registry? Dijamin musnah. Saya sendiri menggunakan software ini.

Cara Uninstall Program dengan Bersih Tanpa Sisa

  • Pertama, silahkan download software Revo Uninstaller. Kemudian install seperti biasa.
  • Buka software-nya, lalu akan muncul daftar program yang bisa di-uninstall.
    Cara Uninstall Program dengan Bersih Tanpa Sisa
  • Pilih program yang ingin di-uninstall, kemudian klik Uninstall pada toolbar. Atau bisa juga klik kanan lalu klik Uninstall.
    Cara Uninstall Program dengan Bersih Tanpa Sisa
  • Setelah itu Revo akan melakukan analisis. Tunggu sebentar sampai proses analisis selesai.
    Cara Uninstall Program dengan Bersih Tanpa Sisa
  • Lalu, setelah selesai menganalisis, akan muncul Scanning Modes. Pilih mode Advanced lalu klik Scan. (Biasanya juga akan muncul suatu uninstaller, tinggal di-uninstall saja)
    Cara Uninstall Program dengan Bersih Tanpa Sisa
  • Tunggu sampai proses scanning selesai.
  • Kemudian akan muncul hasil scanning yang menunjukkan file dan direktori dari program tadi yang belum terhapus. Untuk menghapusnya, klik Select All ⇒ Delete ⇒ Finish.
    Cara Uninstall Program dengan Bersih Tanpa Sisa
  • Setelah itu akan muncul pula daftar registry yang belum terhapus. Untuk menghapusnya, lakukan seperti langkah diatas.
  • Selesai!
Dengan begitu, program tersebut sudah berhasil di-uninstall dengan bersih tanpa sisa sedikitpun. Kinerja komputer atau laptop kamu pun jadi stabil.

Apr 1, 2017

Cara Membuat Tools Code Parser/Converter HTML

Cara Membuat Tools Code Parser/Converter HTML

Cara Membuat Tools Code Parser/Converter HTML - Code Parser atau Converter HTML merupakan sebuah tools yang berfungsi untuk menterjemahkan kode HTML ke dalam bentuk karakter unik tertentu, seperti tanda petik dua ("), ampersand (&), petik satu ('), tanda lebih kecil (<) dan lebih besar (>). Jadi, ketika sebuah kode HTML diurai melalui code parser, hasilnya akan seperti ini.
  • < akan diubah menjadi &lt;
  • " akan diubah menjadi &quot;
  • & akan diubah menjadi &amp;
  • ' akan diubah menjadi &#039;
  • > akan diubah menjadi &gt;
Biasanya tools ini digunakan para blogger untuk mengkonversi kode iklan adsense agar kompatibel dan muncul dengan semestinya. Kalau tidak di-parse, maka iklan tidak akan muncul. Memang sudah jadi keharusan. 

Selain itu, bagi blogger yang suka membagikan kode CSS, HTML atau Javasript di blog-nya perlu mem-parse kode yang dibagikan. Khususnya yang memakai pre code atau syntax highlighter. Sama seperti iklan adsense, kalau tidak di-parse tidak akan muncul dengan baik.
Nah, untuk itu kamu harus punya tools code parser/converter HTML sendiri di halaman blog kamu. Supaya memudahkan kamu jikalau ada kebutuhan untuk mem-parse, sehingga tidak perlu repot lagi mencari tools-nya di google. Pengunjung juga bisa terbantu dengan keberadaan tools ini di blog kamu.

Cara Membuat Tools Code Parser/Converter HTML

  • Pertama, buat terlebih dahulu sebuah page/halaman. Dengan cara klik menu Laman pada dasbor blogger. Kemudian klik Laman Baru untuk membuat tools.

Cara Membuat Tools Code Parser/Converter HTML
  • Setelah itu masuk ke mode HTML, kemudian copy kode dibawah ini lalu pastekan ke dalam halaman tersebut (ingat, dalam mode HTML!).
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<br />
<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</ul>
<style type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{font:13px 'Courier New',Monospace;border:1px solid #e9e9e9;width:550px;height:250px;margin:0 auto;display:block;background-color:#f3f3f3;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
button:active{background:#3f92e1;}
button[disabled],button[disabled]:active{background:#3f92e1;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
</style> 
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('convert').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, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>


  • Kalau masih bingung mengenai caranya, lihat gambar berikut.

Cara Membuat Tools Code Parser/Converter HTML


  • Setelah itu, klik Publikasikan dan lihat hasilnya. 

Nah, halaman code parser sudah jadi. Selanjutnya kamu bisa menyesuaikan warna dan semacamnya dengan mengutak-atik CSS-nya. Mudah sekali kan?
loading...