Cara Membuat Tool Minify CSS, HTML, JS di Blog - Marzep Design

Cara Membuat Tool Minify CSS, HTML, JS di Blog

Tool Minify adalah tool untuk mengcompress HTML, CSS dan Java Script, tujuan mengcompress ini agar mempercepat performa blog atau website, jadi sobat wajib membuat tool minify CSS, HTML dan Java Script di blog.

Cara Membuat Tool Minify CSS, HTML, JS di Blog

Cara Membuat Tool Minify CSS ini sangat lah mudah sekali sobat tinggal membuat tool minify ini di halaman blog dan jika butuh silahkan langsung buka saja dan tinggal compress html, css dan java scriptnya.

Pada umumnya tutorial cara membuat tool minify hanya berguna untuk compress kode css saja, nah tutorial cara membuat tool minify yang saya bagikan ini mampu mengcompress html dan java script juga.

Apa Itu Minify...?

Minify merupakan suatu cara untuk mengumpulkan semua elemen yang ada di blog (JS & CSS) dan kemudian menggabungkannya menjadi satu file. maka Selanjutnya file yang digabungkan tersebut akan dikompres dan menjadikannya lebih ringan. Hal ini akan meningkatkan kecepatan loading dari sebuah website.

Itu adalah pengertian singkatnya, sekarang sobat tau kalo mengcompress CSS, HTML dan Java Script mampu meringankan blog tunggu apa lagi? ayo ikuti terus tutorial ini.

Cara Membuat Tool Minify di Halaman Blog

Seperti yang saya bilang di atas membuat tool minify di blog sangat mudah sekali, langsung saja ke totorialnya.

1. Masuk dashoard "blogger.com" klik menu "halaman" dan klik "halaman baru".


2. Pilih "HTML" jangan lupa kasih "judul" "copas kode di bawah" kasih "deskripsi" jika perlu dan terakhir klik "publikasikan".



<style type="text/css">
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
#sidebar-wrapper{display:none!important;float:left;margin:0;}.post{width:95%;}
</style>
<textarea id='ta' spellcheck='false' placeholder="Minify HTML / CSS / JavaScript.."></textarea>
<center><button class="tmbl" id='bt'><span>&lt;/&gt;&nbsp;MINIFY</span></button></center>
<style type="text/css"> ::-webkit-selection { background: rgba(255, 186, 0, 0.48); } ::-moz-selection { background: rgba(255, 186, 0, 0.48); } ::-o-selection { background: rgba(255, 186, 0, 0.48); } ::selection { background: rgba(255, 186, 0, 0.48); } * { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border:0; outline: none; } body { font-family: helvetica, sans-serif; } textarea { font-size: 16px; display: block; width: 100%; height: calc(100vh - 70px); padding: 20px; background: #fff; color: #1a1a1a;border: 5px solid rgba(0, 0, 0, 0.67);border-radius: 17px;box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.67);} .tmbl {margin-top: 20px;box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.67); width: 100%; height: 50px; cursor: pointer; background: linear-gradient(45deg,#2d82ea,#2d92ea,#2db1ea); background-size: 200% 200%; animation: Gradient 15s ease infinite; color: #fff; border: 1px solid transparent; padding: 6px 12px; font-size: 16px; line-height: 1.42857143; border-radius: 4px; user-select: none;}.tmbl.focus, .tmbl:focus, .tmbl:hover {color:#333;text-decoration:none;}</style>
<script type='text/javascript'> (function() { var ta = document.getElementById('ta'), bt = document.getElementById('bt'); function compress() { var v = ta.value; v = v.replace(/(>)?\s+/g, "$1 "); v = v.replace(/([\t\n\s\r]+)</g, "<"); ta.value = v; ta.focus(); ta.select() } bt.onclick = compress })();</script>

Selesai.... "Lihat Demo"

Penutup

Itulah Cara Membuat Tool Minify untuk compress CSS, HTML dan Java Script di halaman blog dengan mudah...

Semoga tutorial ini bermanfaat untuk banyak orang dan terima kasih.

0 Response to "Cara Membuat Tool Minify CSS, HTML, JS di Blog"

Post a Comment

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel