Cara Membuat Form CSS Beautify Manifier di Blogger

CSS Beautify Manifier adalah merupakan salah satu website tools yang digunakan untuk meng-kompres kode CSS dan juga untuk mempercantik atau merapihkan kode CSS. Dengan mengkompres kode CSS yang ada pada template Anda, secara otomatis bisa mempercepat loading blog anda. Apabila Anda ingin merapihkan kode CSS secara teratur, form ini sangat bisa di andalkan. Ribuan hingga Raturan kode bisa dirapihkan dalam 1-2 detik gak perlu memakan waktu lama. Cara penggunaanya juga mudah, anda tinggal copy&paste kode CSS dan masukan kode ke form CSS Beautify Manifier dan tekan tombol "Manify CSS" atau "Beautify CSS"

Sebelumnya saya pernah juga membuat Form CSS Manifier, Anda bisa melihat postingan saya sebelumnya.

Baca Juga : 

Screenshoot:
Untuk postingan kali ini saya tidak memberikan example atau demo, silakan anda copy & paste semua kode dibawah ini dan buatlah sebuah halaman baru. Sedikit memberikan info pada form CSS Beautify Manifier ini terdapat 2 Text Area (Input, Result) dan terdapat 4 tombol yang saya berikan, yaitu tombol "Manify CSS" dan "Beautify CSS" tombol ini berguna untuk konversi. Lalu saya tambahkan tombol "Clear All" dan juga "Reload" tombol ini berguna untuk apabila Anda ingin me-reset form tanpa perlu menghapus secara manual. Ok, saya rasa cukup, langsung saja ke proses pembuatan.


Cara Membuat Form CSS Beautify Manifier di Blogger


Cara Pertama : 

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, letakkan pada bagian HTML bukan pada bagian COMPOSE.
<html>
 <head>
  <title></title>
<style>
#outer-wrapper {
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    float: none;
    background-position: center!important;
}

.post-body,.post {
    background-position: center!important;
}

h2.post-title a,h1.post-title a,h2.post-title,h1.post-title {
    display: none;
    margin-top: 0;
    margin: 0;
}

#blog1,#artikel,.blog-posts {
    background-position: center!important;
}

.breadcrumbs {
    display: none;
    margin-top: 0;
    margin: 0;
}

#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap {
    display: none;
    margin-top: 0;
    margin: 0;
}

.post-inner {
    padding: 0 0 0 0;
    margin: 20px auto;
}

.post-body ul#wrapin {
    display: block;
    position: relative;
    margin: 30px auto 0 auto;
}

.post-body ul#wrapin li {
    display: block;
    margin: 0 auto;
    text-align: left;
}

.post-body ul#wrapin br {
    display: none;
}
.daerah-tombol-2 {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 10px;
    border-radius: 4px;
    font-weight: bold;
}

button {
    color: #fff !important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}

#belakang {
    height: 770px;
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.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: 85%;
    height: 75% !important;
    margin-top: 20px;
}

.cssmin-out {
    width: 85%;
    height: 75% !important;
    margin-top: 20px;
}

textarea {
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 4px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius: 8px;
    resize: none;
}

.cssmin-btn {
    width: 100%;
    border-radius: 8px;
    background: #2980b9;
    margin: 15px auto !important;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120% !important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

.minify {
    width: 15%;
    margin: 2%;
}

.beautify {
    width: 15%;
}

.btn {
    width: 22%;
    border: 0px;
    background: #07ACEC;
    padding: 12px;
    color: white;
    cursor: pointer;
    border-radius: 6px;
}

.btn:hover {
    background: #0569ab;
}


</style> 
 </head>
 <body>
 
<script type="text/javascript" src="https://cdn.staticaly.com/gh/mayhilmay619/form-tools/0221d936/css-manifier.js"></script>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">CSS MANIFIER & BEAUTIFY</strong>
</h1>
</div>

        <div id="belakang">
  <div class="isinya">
      <textarea placeholder="Paste your CSS code here..." class="cssmin-out cssbeaut-in col-sm-5 "></textarea>
    <textarea placeholder="Paste your CSS Beautify code here..." class="cssmin-in cssbeaut-out col-sm-5"></textarea>


  <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" onclick="window.location.reload()">RELOAD</button>
      <button class="btn btn-primary beautify" type="submit">Beautify CSS</button>
      </div>
</div>
  </div>
<script type="text/javascript">
$(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>
     
 </body>
</html>
3. Publikasikan.


Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form CSS Beautify Manifier di Blogger

0 Response to "Cara Membuat Form CSS Beautify Manifier di Blogger"

Post a Comment

Iklan Bawah Artikel