Cara Memasang Css Minifier Dan Beautifier Di Blog

Cara Memasang Tools Css Compresor Dan Beautifer Di Blog

Memasang Tools CSS minifier Dan Beutifer di blog. Berbagi tools untuk merapihkan css yang berserakan /atau di compres dapat juga dipakai untuk mencompres /atau minifier css.

Makara tools ini dapat dipakai untuk merapihkan dan juga mencompres css kalian. Supaya menjadi lebih seimple / menjadi rapih, beraturan.

sebelumnya aku juga sudah mengembangkan tools All In One, tools untuk merapihkan. HTML, CSS, JavaScript bagi kalian yang ingin mencobanya silahkan kunjungi postingan ini..... HTML, CSS, Javascript Compressor Dan Beautifier

Dan masih banyak tools lainnya, silahkan cek di daftar tools online di blog mas tamvan ini. Tools Online

Nah kali ini aku akan mengembangkan tools untuk dipasang pada blog kalian, barang kali ada yang mau wkwk. Tampilan dari tools ini sebagai berikut.

CSS Minifier And Beautifier

Silahkan di coba dulu, kalo tertarik untuk memasangnya, ikuti tutorial berikut ini.

Cara Simple Memasang CSS Minifier Dan Beautifer Di Blog

• Login dulu ke Blogger.com

• Buat postingan gres / laman gres

• Lalu masuk ke tab HTML

• Lalu pastekan Script Css minifier dan beautifer ini kedalamnya.

 <script src='https://cdn.rawgit.com/senchalabs/cssbeautify/master/cssbeautify.js'></script> <div class="bungkus">   <div class='judul' >     <strong>CSS Minifier And Beautifier</strong>         </div>   <div class="isinya">     <textarea placeholder="INPUT TO MINIFIER CSS" class="cssmin-in cssbeaut-out col-sm-5"></textarea>     <textarea placeholder="INPUT TO BEAUTIFIER CSS" class="cssmin-out cssbeaut-in col-sm-5 "></textarea>   </div>   <div class="cssmin-btn col-sm-2">       <button class="btn btn-primary minify" type="submit">Minify CSS</button>       <button class="btn btn-primary clear-code" type="submit">Clear All</button>       <button class="btn btn-primary beautify" type="submit">Beautify CSS</button>       </div> </div> <script> $(function() {   /*    * Just some styling helpers    */   var inputWidth = $('.col-sm-5').width();   $('textarea').height(inputWidth*(3/4));   $('.cssmin-btn').css('margin-top',inputWidth*(1/3)+'px');   $('.cssbeaut-btn').css('margin-top',inputWidth*(1/3)+'px');      /*    *     */   $('.minify').click(function() {     var input = $('.cssmin-in').val();     var output = input       .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g, '')       .replace(/\s*\{\s*/g, '{')       .replace(/\s*\}\s*/g, '}')       .replace(/\s*\:\s*/g, ':')       .replace(/\s*\;\s*/g, ';')       .replace(/\s*\,\s*/g, ',')       .replace(/\s*\ \s*/g, ' ')       .replace(/\s*\>\s*/g, '>')       .replace(/\s*\+\s*/g, '+')       .replace(/\s*\!\s*/g, ' !');     $('.cssmin-out').val(output);   });   $('.clear-code').click(function() {     $('.cssmin-in').val('');     $('.cssmin-out').val('');   });   $('.beautify').click(function() {     var beaut_input = $('.cssbeaut-in').val();     var beaut_output = cssbeautify(beaut_input, {       indent: '    ',       openbrace: 'end-of-line',       autosemicolon: true     });     $('.cssbeaut-out').val(beaut_output);   });   $('.beaut-clear-code').click(function() {     $('.cssbeaut-in').val('');     $('.cssbeaut-out').val('');   }); }); </script> <style> .bungkus{max-width:540px;margin:0 auto;background:#2c3e50;width:100%;}.judul{width:100%;margin:5% auto 0 auto;background:#16A085;font-family:'Lobster',cursive;position:relative;-moz-box-shadow:0 4px 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.4);box-shadow:0 4px 4px rgba(0,0,0,0.4);}.judul>strong{text-align:center;color:#fff;padding:18px;width:91%;display:block;font-size:24px;}.isinya{width:100%;height:361px;margin:0 auto;}.cssmin-in{width:47%;height:361px !important;float:left;margin-top:0px;margin-left:2px;}.cssmin-out{width:47%;height:361px !important;float:right;margin-top:0px;margin-right:2px;}textarea{width:99%;height:357px;border:none;resize:none;}.cssmin-btn{width:100%;background:#2C3E50;margin:0 auto !important;}.minify{width:15%;margin:2%;}.beautify{width:15%;margin:2%;}.btn{width:30%;border:0px;background:#f26262;padding:12px;color:white;cursor:pointer;border-radius:6px;}.btn:hover{background:#5ba435;} </style> 

Tools ini memerlukan ajax jquery. Jika di template anda belum ada / toolsnya tidak bekerja. Masukan Script Berikut di atas </head>

 <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' ></script> 

• Jangan lupa kasih judul, kemudian publikasikan. dan selesai....

Cukup sekian dan terimakasih, biar artikel perihal Cara Memasang CSS Minifier Dan Beautifier di Blog
Jangan lupa tinggalkan jejak anda di kolom komentar :)