Cara Memasang CSS Minifier Dan Beautifier di Blog

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 berantakan /atau di compres bisa juga digunakan untuk mencompres /atau minifier css.

Jadi tools ini bisa digunakan untuk merapihkan dan juga mencompres css kalian. Supaya menjadi lebih seimple / menjadi rapih, beraturan.

sebelumnya saya juga sudah berbagi 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 saya akan berbagi 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 baru / laman baru
  • Lalu masuk ke tab HTML
    • Cara Memasang CSS Minifier Dan Beautifier di Blog
  • 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, lalu publikasikan. dan selesai....


Cukup sekian dan terimakasih, semoga artikel tentang Cara Memasang CSS Minifier Dan Beautifier di Blog
Jangan lupa tinggalkan jejak anda di kolom komentar :)
Tinggalkan Komentar