Memasang Tools CSS Minifier & Beautifier di Blogger

Memasang Tools CSS Minifier & Beautifier di Blogger

Blogger Tools

SobatMasbro

September 16, 2020

SobatMasbro - CSS (Cascading Style Sheet) bukan sebuah bahasa programan tapi lebih tepatnya bahasa design suatu website atau Style Sheet Language yang digunakan untuk mendesign tampilan suatu web agar lebih bagus dan menarik.

Fungsi utama CSS adalah mendesain atau mengubah halaman website dari tag-tag HTML yang sudah dirancang. CSS itu ibaratkan desain bangunan yang bisa diperindah agar tampilan lebih profesional dan menarik.

CSS pasti digunakan bersama dengan HTML, HTML ibaratkan kerangka rumah dan CSS adalah desainnya untuk memperindah rumah tersebut. Saat ini CSS sangat penting bagi semua kalangan terutama pembuat website agar menarik pengunjungnya yang datang.

Semakin banyak tag pada CSS maka semakin bagus pula webnya. Nah jika sobat suka CSS yang tidak panjang kebawah atau lebih suka disingkat sobat bisa meminifynya yaitu agar terlihat lebih kecil atau mini. Sedangkan sobat yang CSS awalnya berbentuk minify bisa memperbagusnya dengan cara mem-beautynya menggunakan tools.

Kali ini saya akan membagikan tutorial Memasang Tools CSS Minifier & Beautifier di Blogger, bagaimana langkah-langkahnya? Yok simak dibawah ini.

Fitur

• CSS Minifier atau membentuk CSS lebih kecil
• CSS Beautifier atau mempercantik CSS agar rapih

Memasang CSS Minifier dan Beautifier

• Buka blogger.com > Halaman > Halaman baru
• Beri judul CSS Minifier Beautifier atau terserah sobat
• Pilih bagian HTML bukan Compose
• Copy dan Paste script dibawah ini 

 <div class="container">
  <div class="browser">
    <div class="browserHome">
      <div class="controls">
        <button class="btn close"></button>
        <button class="btn minimize"></button>
        <button class="btn fullscreen"> </button>
      </div>
    </div>
    <div class="viewport">
      <h3 class="h3-sbtmasbro">CSS Minifier</h3>
<textarea class="textarea-bro"  type="submit" id="boxminifysobatmasbro" placeholder="/** Input CSS yang akan diminifier *//"></textarea>
<br>
    <button class="btn-sobatmasbro" id="btnminifysobat">Minify CSS</button>
</div>
     <div class="viewport">
      <h3 class="h3-sbtmasbro">Output</h3>
<textarea class="textarea-bro" id="boxminoutsobat" placeholder="/** Output *//"></textarea>
<br>
      <button class="btn-sobatmasbro btnhapus"  type="submit" id="hapuskabeh">Clear All</button>
       </br>
    </div>
  </div>
</div>
<div class="container">
<div class="browser">
<div class="viewport">
      <h3 class="h3-sbtmasbro">CSS Beautifier</h3>
<textarea class="textarea-bro"  type="submit" id="boxbeautmasbro" placeholder="/** Input CSS yang akan dibeautifier *//"></textarea>
<br> 
    <button class="btn-sobatmasbro" id="btnbeautmasbro">Beauty CSS</button>
</div>
     <div class="viewport">
      <h3 class="h3-sbtmasbro">Output</h3>
<textarea class="textarea-bro" id="boxbeautoutmasbro" placeholder="/** Output *//"></textarea>
<br>
      <button class="btn-sobatmasbro btnhapus"  type="submit" id="hapuskabeh2">Clear All</button>
       </br>
    </div>
<style type="text/css">
.container{align-items:center;display:flex;justify-content:center}.browser{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.browser .atapsobat{background-color:#FAFAFA;border-radius:5px 5px 0 0;height:2.5em}.browser .atapsobat .controls{line-height:1.25em;padding:0.625em 0}.browser .atapsobat .controls .btn{border:medium none;border-radius:100%;display:block;float:left;height:auto;margin-left:0.5em;outline:medium none;width:0px;padding:7px}.browser .atapsobat .controls .btn.close{background-color:#e74c3c}.browser .atapsobat .controls .btn.minimize{background-color:#f1c40f}.browser .atapsobat .controls .btn.fullscreen{background-color:#2ecc71}.browser .viewport{background-color:#f5f5f5;border-radius:0 0 5px 5px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;text-align:center;float:left}.h3-sbtmasbro{margin:12px;font-family:'arial';font-size:18px}.textarea-bro{border:2px solid #3499dc;border-radius:5px;width:300px;height:250px;padding:10px;resize:none;outline:none}.btn-sobatmasbro{margin:12px;position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:12px;text-transform:uppercase;color:rgb(var(--pure-material-onprimary-rgb,255,255,255));background-color:rgb(var(--pure-material-primary-rgb,33,150,243));box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;outline:none;cursor:pointer;transition:box-shadow 0.2s}.btnhapus{background-color:#F44336}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.rawgit.com/senchalabs/cssbeautify/master/cssbeautify.js"></script>
<script type="text/javascript">
$(function() {
  /*
   * Jangan Edit! Nanti Error!
   */

  /*
   * JavaScript CSS Minifier & Beautifier by sobatmasbro.blogspot.com
   */
  $('#btnminifysobat').click(function() {
    var input = $('#boxminifysobatmasbro').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, ' !')
      .replace(/\s*\;\}\s*/g, '}');
    $('#boxminoutsobat').val(output);
  });
  $('#hapuskabeh').click(function() {
    $('#boxminifysobatmasbro').val('');
    $('#boxminoutsobat').val('');
  });
  $('#btnbeautmasbro').click(function() {
    var beaut_input = $('#boxbeautmasbro').val();
    var beaut_output = cssbeautify(beaut_input, {
      indent: '    ',
      openbrace: 'end-of-line',
      autosemicolon: true
    });
    $('#boxbeautoutmasbro').val(beaut_output);
  });
  $('#hapuskabeh2').click(function() {
    $('#boxbeautmasbro').val('');
    $('#boxbeautoutmasbro').val('');
  });
});
</script>

• Jika sudah, Publikasikan
• Penasaran tampilannya? Lihat demo dibawah ini.

• DEMO

Gimana sob? bisa digunakan? pasti bisa dong, cukup sekian tutorial yang saya bagikan kali ini semoga bermanfaat. Jika sobat masih bingung, ada yang error atau ada yang ditanyakan, silahkan berkomentar dibawah ini. Terimakasih.

SobatMasbro September 16, 2020