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 merapihka...
https://tutorialcarapintar.blogspot.com/2019/02/cara-memasang-css-minifier-dan.html
Cara Memasang Tools Css Compresor Dan Beautifer Di Blog
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>
<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 :)