Cara Membuat Dan Memasang Tools CSS Minifier Keren Dihalaman Statis Blog

Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog. CSS Minifier atau Minify adalah alat yang biasa digunakan untuk mengkompres kode CSS agar
Gambar Cara Membuat Tools CSS Minifier Keren Dihalaman Statis Blog
Cara memasang CSS Minifier keren dihalaman statis blog - CSS Minifier atau Minify adalah alat yang biasa digunakan untuk mengkompres kode CSS agar ukurannya lebih kecil lagi. Alat ini biasa digunakan bertujuan untuk meringankan kode CSS yang digunakan pada blog agar loading blog bisa lebih cepat lagi. Tentu tools ini akan menjadi sangat penting dan berguna bagi blog yang memilki CSS yang banyak. Apalagi kalau kamu sangat mementingkan tampilan dan desain blog bagi para pembaca.

Ouh ya, sebelum menulis artikel ini saya juga sudah pernah membahas cara membuat dan memasang tools Parse HTML diblog. Barang kali kamu juga mau pasang tools ini diblog kamu supaya lebih komplit lagi kan. Cara Memasang Tools Parse HTML diblog dengan mudah.

Tool CSS Minifier ini dapat meningkatkan trafik blog kamu jika ada pengunjung seorang blogger yang sedang membutuhkan alat ini. Jadinya dia bakalan bolak-balik ke blog kamu untuk memanfaatkan tool yang kamu pasang ini. Selain itu juga akan berguna bagi kamu sendiri. Jadi gak perlu susah-susah pergi ke website tools CSS Minifier. Cukup buka halaman tool yang kamu punya. 


Cara pasang alat ini juga gampang banget kok. Gak nyampe 1 menit tool ini sudah terpasang diblog kamu dan sudah bisa digunakan dengan baik. Kamu bisa pasang alat ini dihalaman statis blog kamu atau kamu juga bisa pasang alat ini dibagian postingan kamu. Itu terserah kamu aja tapi umumnya orang yang memasang alat ini dihalaman statis bukan dipostingan blog. Tanpa lama-lama lagi langsung saja ke tutorial cara memasang tool CSS Minifier diblog. Simak caranya dibawah ini dengan baik.

Cara Memasang Tools CSS Minifier Keren Di Halaman Statis Blog Dengan Mudah 

Pertama-tama silahkan login terlebih dahulu ke akun blogger kamu. Setelah itu buat saja halaman atau postingan baru. Kemudian salin dan taruh kode dibawah ini dihalaman yang sudah kamu buat tadi. Taruh kodenya di mode HTML bukan Compose.

<div dir="ltr" style="text-align: left;" trbidi="on">
    <div id="cssminifier">
       <style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #cssminifier{background:#2d3158;} #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;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} #main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} #cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} #cssminifier .box p{margin:0 0 2px} #cssminifier button{cursor:pointer;} #cssminifier .col{width:48%;margin:0 auto 30px} #cssminifier .left{float:left;margin-left:1%} #cssminifier .right{float:right;margin-right:1%} #cssminifier .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px} #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:1em 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} #cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\2713';display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .flex{display: flex;display: -webkit-flex;display: -moz-flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;justify-content: space-around;-webkit-justify-content: space-around;-moz-justify-content: space-around;margin-bottom: 3em;flex-wrap: wrap;-webkit-flex-wrap: wrap }</style>
       <br />
       <span class="clear"></span><br />
       <textarea autofocus="" id="cssField"></textarea>
       <br />
       <div class="button-group">
          <div class="box">
             <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
             <label> Strip all comments</label><br />
             <input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
             <label> Super compact</label><br />
             <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
             <label> Keep indentation</label><br />
             <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
             <label> Remove the last semicolon</label>
          </div>
          <div class="flex">
          <button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />
          <button class="ripplelink" onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />
          <button class="ripplelink" onclick="selectAll(&quot;cssField&quot;);">Select All</button> <br />
          <button class="ripplelink" onclick="copyAll(&quot;cssField&quot;);">Copy All</button>
          </div>
       </div>
       <div class="clear">
       </div>
       <script type="text/javascript">function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];function copyAll(){var e=document.getElementById("cssField");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}</script><br />
    </div>

Kamu bisa ganti tulisannya susai dengan yang kamu suka. Contohnya seperti teks "Copy All" bisa kamu ganti menjadi bahasa indoneisa "Salin Semua" atau yang lainnya terserah kamu aja. Kalau sudah ditempel semuanya langsung aja klik simpan dan lihat hasilnya. Untuk hasil dari tool diatas bisa kamu lihat dihalaman CSS Minifier yang ada diblog ini.


Sampai disini alat CSS Minifier sudah berhasil terpasang diblog kamu. Tapi biasanya tool ini kurang bagus kalau tampilannya tidak full screen (layar penuh). Agar terlihat lebih bagus dan rapih sebaiknya disembunyikan saja widget-widget yang ada dibagian sidebar blog kamu. Masih belum tahu cara menyembunyikan wdiget-widgetnya? Sebagai bonus aja nih, Coba deh cara-cara dibawah ini.

Cara Menyembunyikan Widget Sidebar Blog Hanya Pada Halaman Statis Blog Tertentu (Bonus!)

Buka halaman yang ingin kamu sembunyikan widget sidebar blog. Kemudian taruh kode dibawah ini ke dalam halaman tersebut dibagian paling bawah.

><script>
//<![CDATA[
function loadCSS(e,t,n){"use strict";var i = window.document.createElement("link");var o = t || window.document.getElementsByTagName("script")[0];i.rel = "stylesheet";i.href = e;i.media = "only x";o.parentNode.insertBefore(i,o);setTimeout(function (){i.media = n || "all"}
)}
loadCSS("https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.css");//]]>
</script>
<script src="https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.js" type="text/javascript"></script>  
<style>
/*=Remove Item=*/
#sidebar-wrapper{display:none}
h1.post-title.entry-title{display:none}
/*=ADD Item=*/
#post-wrapper{background:transparent;float:left;width:100%;max-width:1020px;margin:0 0 10px}
.C-Pelajar-author-box{padding:57px 50px 15px 50px;box-sizing:border-box;overflow:hidden}
.C-Pelajar-author-box-image{width:40%;float:left;margin-right:5%;margin-bottom:10px}
C-Pelajar-author-box-image img{height:385px;object-fit:cover}
img{max-width:100%;vertical-align:middle;border:0}
.C-Pelajar-author-box-text{padding:0;overflow:hidden;text-align:left}
.C-Pelajar-author-box-text-head{color:#3d4451;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #dedede}
.C-Pelajar-author-box-text .hello-txt{background-color:#1976D2;color:#fff;font-size:14px;font-weight:700;line-height:1.1;display:inline-block;padding:7px 12px;text-transform:uppercase;position:relative;margin-bottom:28px}
.C-Pelajar-author-box-text .hello-txt:before{border-left-color:#1976D2;content:'';width:0;height:0;top:100%;left:5px;display:block;position:absolute;border-style:solid;border-width:0 0 8px 8px}
.C-Pelajar-author-box-text .profile-title{font-size:36px;line-height:1.1;font-weight:700;margin-bottom:5px;color:#3d4451}
.C-Pelajar-author-box-text .profile-title span{font-weight:300}
.C-Pelajar-author-box-text .profile-position{font-size:18px;font-weight:400;line-height:1.1;margin-bottom:0}
.C-Pelajar-author-box-text-details ul{margin:0;padding:0;list-style:none}
.C-Pelajar-author-box-text-details .profile-list li{margin-bottom:13px;list-style:none;padding:0}
.C-Pelajar-author-box-text-details .profile-list li .list-title{display:block;width:120px;float:left;color:#333333;font-size:12px;font-weight:700;line-height:20px;text-transform:uppercase}
.C-Pelajar-author-box-text-details .profile-list li .cont{display:block;margin-left:125px;font-size:15px;font-weight:400;line-height:20px;color:#9da0a7}
.C-Pelajar-author-box-text-details .profile-list li .list-button{color:#fff;font-size:12px;font-weight:700;line-height:1;text-transform:none;padding:5px 8px;display:inline-block;position:relative;top:-2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#1976D2}
.C-Pelajar-author-box-text-details .profile-list li .fa{margin-right:10px;vertical-align:baseline}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fenix-sub-head .social-head{padding:15px 0;background:#1976D2;box-sizing:border-box}
.top-bar-social{padding:0}
.section:last-child .widget:last-child{margin-bottom:0}
.section:first-child .widget:first-child{margin-top:0}
.top-bar-social .LinkList ul{text-align:center;margin:0 0 0 0}
.top-bar-social .widget ul{padding:0}
.top-bar-social li{display:inline-block;float:none;padding:0;margin-right:5px}
.top-bar-social #social a{display:block;width:40px;height:40px;line-height:40px;font-size:18px;color:#1976D2;background:#fff;border:1px solid #e4e4e4;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear}
/*=Responsive*/
@media (max-width:640px){.C-Pelajar-author-box{padding:10px}.C-Pelajar-author-box-text-head{margin-bottom:14px;padding-bottom:14px}}
@media (max-width:480px){.C-Pelajar-author-box-image{width:100%;float:left;margin-right:0}.C-Pelajar-author-box-image img{width:100%}.C-Pelajar-author-box-text{width:100%;float:left;margin-top:14px}}
.ArticleTeaser-date{padding:10px;box-sizing:border-box;border:3px solid #2c3e50;border-radius:10px;color:#2c3e50}
.ArticleTeaser a{color:#2c3e50;font-size:18px;font-weight:600}
.BlogList:after{background:#2c3e50}
.ArticleTeaser:last-child:after,.BlogList:before{background:#2c3e50}
.ArticleTeaser-bubble{border:2px solid #2c3e50}
h2.exp-title{text-align:center;font-weight:bold;color:#2c3e50}
.Buka{padding:0}
.ArticleTeaser:hover .ArticleTeaser-bubble:before{background:#2c3e50}
.ArticleTeaser-bubble:after{display:none;}
@media (max-width:768px){.ArticleTeaser-date{border:none}.ArticleTeaser{border:2px solid #2c3e50;border-radius:10px}}
</style>
<b><span style="font-size: large;"><br /></span></b>
<b><span style="font-size: large;"><br /></span></b>

Setelah itu klik simpan. Selesai.

Mungkin sekian dulu tutorial cara memasang tool CSS Minifier dihalaman statis blog yang bisa saya sampaikan di artikel kali ini. Semoga bisa bermanfaat buat kamu yang butuh sama tool ini. 

There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!