Pengertian Minify CSS
Pengertian Minify CSS adalah suatu istilah dalam pemrograman untuk menghapus karakter yang tidak diperlukan seperti karakter whitespase, dan komentar kode, dengan tujuan kode CSS menjadi lebih sederhana dan dapat dieksekusi dengan lebih cepat.
Penggunaan CSS yang berlebihan tidak baik untuk digunakan sekarang, karena sekarang Google mempunyai metrix atau tools untuk menguji kualitas blog kita, dan salah satu faktornya adalah CSS.
CSS yang terlalu banyak dan tidak tersusun rapi dalam satu style akan membuat loading blog sedikit terganggu.
Baiknya CSS ditempatkan pada bagian head blog dan dibuat menjadi satu sususan style, agar konten utama pada blog langsung muncul.
Kenapa harus seperti itu?, karena Google menilai bagaimana blog kamu menampilkan halamannya, apakah konten utama atau konten yang sourcenya paling besar diload (dimuat) pertama atau tidak.
Hal tersebut berdasarkan dari penelitian Google yang menganalisis user (visitor) mengunjungi suatu web atau blog.
Jadi intinya minify CSS sangat penting untuk web atau blog modern.
Sekarang mari kita kepembahasan utamanya yaitu cara minify CSS dengan mudah terbaru.
Cara Minify CSS Blog Terbaru
1. Buka Edit HTML Template Blogger
Pertama buka mode edit HTML template blogger kamu, selanjutnya salin semua kode template blog mu ke dalam kode editor agar lebih mudah mengeditnya.
Saya disini menggunakan kode editor Visual Studio Code, kenapa saya menggunakannya?
Karena banyak fitur yang tersedia sehingga membantu proses pengeditan template menjadi semakin mudah.
Namun kamu juga bisa menggunakan kode editor apa saja, contohnya kamu dapat menggunakan notepad, sublime text dan lain-lain.
2. Cari Semua Kode style Pada Template Blogger
Kedua yang harus kamu lakukan adalah cari semua kode <style> yang ada pada template blogmu.
Sudah ketemu?, jika sudah salin dulu semua kode CSS-nya mulai dari kode <style> sampai pada kode </style>, dan buat file baru pada kode editor kamu kemudian paste kode CSS tadi.
Karena pada template blogger pasti terdapat lebih dari satu kode <style> dan kode </style> maka salin semua kode CSS yang ada dan simpan terlebih dahulu ke file yang baru tadi.
Contoh seperti kode dibawah ini.
<style>
....Kode CSS Blogger....
</style>
<b:if cond='data:view.isMultipleItems'><style>
......Kode CSS Blogger yang berfungsi disemua halaman....
</style>
<noscript><style>
......Kode CSS Blogger untuk menampilkan halaman noscript....
</style></noscript>
<b:if cond='data:blog.pageType == "error_page"'><style>
......Kode CSS Blogger yang berfungsi pada halaman 404 atau error_page....
</style>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style>
.....Kode CSS Blogger yang berfungsi pada halaman static_page....
</style>
Nah coba kamu perhatikan contoh kode CSS diatas, terdapat beberapa kode CSS yang berfungsi pada halaman tertentu disuatu blog.
Pada umumnya semua kode CSS tersebut tersebar pada template mulai dari head, sampai ke body, jadi kode CSS tersebut tidak tersusun rapih.
3. Gabungkan Semua Kode CSS
Setelah semua kode CSS-nya ketemu selanjutnya gabungkan menjadi satu pada file baru di kode editor tadi, maka contohnya akan terlihat seperti gabungan kode CSS diatas.
4. Hapus Semua Karakter Whitespase
Kemudian hapus semua karakter whitespase-nya yaitu spasi, tab, garis baru dan kode komentarnya.
Dan berikut ini contoh kode CSS yang sudah dihapus semua karakter whitespase-nya.
<b:if cond='data:view.isMultipleItems'><style>
/*<![CDATA[*/.blog-posts.list .post-outer .post .post-bottom {margin-left: 40%;position: relative !important;}
.post-container{padding:0;background:0 0}.blog-posts{margin:0 -7px}.blog-posts .post-outer{width:50%;padding:0 10px 20px 10px;box-sizing:border-box}.blog-posts{display:flex;flex-wrap:wrap}.blog-posts .post-outer .post{width:100%;height:100%;background:#fff;overflow:hidden;position:relative;border:.5px solid #fff;border-radius:20px;box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2);}.img-thumbnail{position:relative;float:none;width:100%;height:0;overflow:hidden;padding-bottom:66.666666%}.img-thumbnail img{width:100%;height:auto;background-color:#dddfe2;border-radius:0;border:1px solid #fff;box-sizing:border-box}h2.post-title{margin:0;padding:14px 10px;font-size:16px;display:inline-block;width:100%;box-sizing:border-box;margin-bottom:30px}.post-outer .post .post-bottom{position:absolute;bottom:10px;width:100%;overflow:hidden;padding:10px;font-size:14px;box-sizing:border-box;}.post-outer .post span.post-comments{float:right}span.post-label{float:left}span.post-label a:nth-child(n+2){display:none}.post-bottom a{color:#fff;background:#1ca1f2;padding:5px 8px;border-radius:50px;font-size:14px}.taptgr a{background:0 0;color:#000;padding: 8px 0px;}.post-label a{background:0 0;color:#000;padding: 8px 0px;}.post-label a::before{content:"PC";margin-right:2px;text-rendering:auto;color:transparent;padding:5px;background:#1ca1f2;border-radius:30px;font-size:12px}.post-label a.labelpost::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUuNSw5QTEuNSwxLjUgMCAwLDAgNyw3LjVBMS41LDEuNSAwIDAsMCA1LjUsNkExLjUsMS41IDAgMCwwIDQsNy41QTEuNSwxLjUgMCAwLDAgNS41LDlNMTcuNDEsMTEuNThDMTcuNzcsMTEuOTQgMTgsMTIuNDQgMTgsMTNDMTgsMTMuNTUgMTcuNzgsMTQuMDUgMTcuNDEsMTQuNDFMMTIuNDEsMTkuNDFDMTIuMDUsMTkuNzcgMTEuNTUsMjAgMTEsMjBDMTAuNDUsMjAgOS45NSwxOS43OCA5LjU4LDE5LjQxTDIuNTksMTIuNDJDMi4yMiwxMi4wNSAyLDExLjU1IDIsMTFWNkMyLDQuODkgMi44OSw0IDQsNEg5QzkuNTUsNCAxMC4wNSw0LjIyIDEwLjQxLDQuNThMMTcuNDEsMTEuNThNMTMuNTQsNS43MUwxNC41NCw0LjcxTDIxLjQxLDExLjU4QzIxLjc4LDExLjk0IDIyLDEyLjQ1IDIyLDEzQzIyLDEzLjU1IDIxLjc4LDE0LjA1IDIxLjQyLDE0LjQxTDE2LjA0LDE5Ljc5TDE1LjA0LDE4Ljc5TDIwLjc1LDEzTDEzLjU0LDUuNzFaIiAvPjwvc3ZnPg==)}.post-container{padding-right:0;float:left;width:100%}.little-side-winder{float:left;width:24%;box-sizing:border-box;padding:0 0 0 14px}.little-side-winder .widget-content.popular-posts{background:#1ca1f2;border-radius:15px}.little-side-winder .item-thumbnail{width:100%;margin:0;float:none;height:0;overflow:hidden;padding-bottom:66.666%;box-sizing:border-box;border-radius:15px}.little-side-winder .item-thumbnail img{float:none!important;width:100%!important;height:auto!important;border-radius:0!important}.little-side-winder .PopularPosts .widget-content ul{padding:14px}.little-side-winder .PopularPosts .widget-content ul li{border-bottom:1px solid rgba(255,255,255,.5);color:#fff}.little-side-winder .PopularPosts .item-title{margin:0;padding:7px 0;font-size:14px;font-weight:400!important}.little-side-winder .PopularPosts .item-title a{font-weight:400;color:#fff}@media (max-width:640px){.post-container{width:100%}.little-side-winder{width:100%;padding:0}.little-side-winder .item-thumbnail{width:70px;float:left;padding-bottom:0;height:70px;margin-right:14px;margin-bottom:14px}.little-side-winder .PopularPosts .item-title{padding:0;font-size:14px}.post-outer .post .post-bottom{bottom:5px}}@media (max-width:480px){.blog-posts .post-outer{padding:0 4px 8px 4px}.img-thumbnail{margin:0}h2.post-title{margin-bottom:14px;font-size:14px}}.latest-post-title h2,.little-side-winder h2,.pinned-title{content:'';line-height:10px;height:0;position:relative;display:inline-block;border:none}.latest-post-title h2 span,.little-side-winder h2 span,.pinned-title span{position:relative;z-index:2;background:#dddfe2;padding-right:10px;top:-3px}.widget-pinned-post{position:relative;width:100%;box-sizing:border-box;padding:10px 10px 0 10px}.pinned-post.post-summary{width:100%;display:flex;flex-wrap:wrap;background:#fff;border-radius:15px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.2);box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2);}.pinned-post-thumb{width:40%;float:left;overflow:hidden}.pinned-post-body{width:60%;box-sizing:border-box;padding:14px}.pinned-post-thumb img:hover{transform:scale(1.1);filter:brightness(85%);-webkit-filter:brightness(85%)}.pinned-post-thumb img{width:100%;height:100%;display:block}h2.pinned-post-title{font-size:20px;font-weight:500}h2.pinned-post-title a{color:#000}p.pinned-post-snippet{font-size:14px;line-height:1.6;}@media (max-width:480px){.pinned-post-body,.pinned-post-thumb{width:100%}}.s-view{padding:10px 24px;background:#fff;border-radius:30px;margin-bottom:20px;font-size:14px;color:#000;box-sizing:border-box;box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2);}.s-view .s-btn{display:inline-block;margin-right:5px;padding:5px 10px 5px 28px;background-color:#dddfe2;color:#000;border-radius:3px;border:1px solid #fff;cursor:pointer;font-weight:500}.s-view #grid{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%231d2129'/%3E%3C/svg%3E");background-repeat:no-repeat}.s-view #list{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%231d2129'/%3E%3C/svg%3E");background-repeat:no-repeat}.s-view .s-btn.active{background:#1ca1f2;color:#fff}.s-view #grid.active{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%23fff'/%3E%3C/svg%3E")}.s-view #list.active{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%23fff'/%3E%3C/svg%3E")}.blog-posts.list .post-outer{width:100%;height:auto;padding-bottom:10px}.blog-posts.list .post-outer .post{height:auto;margin:0}.blog-posts.list .post-outer .img-thumbnail{float:left;width:40%;padding-bottom:0;height:auto;border-radius:20px 0 0 20px}.blog-posts.list h2.post-title{float:left;width:60%;margin-bottom:0}.blog-posts.list .post-outer .post .post-bottom{width:60%;right:0;bottom:5px}
/*]]>*/</style>
Perhatikan contoh kode CSS diatas tidak ada garis baru sama sekali, namun karena untuk mempermudah dapat tahap pengeditan CSS karakter spasi saya tidak hapus.
Dan jika kamu ingin yang lebih optimal lagi maka hapus karakter spasinya.
Tentunya kamu malaskan untuk menghapus karakter whitespase pada kode CSS-nya, nah oleh sebab itu Panduan Blogger mempunyai solusinya.
Solusi minify kode CSS dengan mudah adalah dengan menggunakan tools minify CSS online.
Disini Panduan Blogger sering menggunakan tools dari minify CSS dari website minifycode.com/css-minifier.
5. Simpan Semua Kode CSS Pada Head
Setelah semua kode CSS yang ada pada tag style diminify selanjutnya simpan kode CSS tersebut pada bagian head template blog.
Tepatnya setelah kode meta tag blog kamu, atau setelah kode json sitelink website kamu.
Apakah kamu belum tahu kode json website?
Jangan khawatir karena berikuti ini contoh kode json sitelink website yang ada pada template blogger custom.
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
Jadi simpan kode CSS yang telah kamu minify tadi tepat dibawah kode json sitelink pada template kamu.
6. Non Aktifkan CSS Bawaan Blogger
Cara menonaktifkan CSS bawaan Blogger sangat mudah, yaitu kamu hanya tinggal menambahkan kode b:css='false' pada tag html.
Berikut ini contoh penerapannya kodenya.
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' lang='id' xml:lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Nah sampai disini kamu sudah selesai belajar cara minify CSS blogger dengan mudah terbaru dari Panduan Blogger.
Semoga apa yang Panduan Blogger sampaikan ini dapat kamu pahami dengan baik dan bermanfaat untuk orang banyak aamiin.
Dan jika kamu ada pertanyaan seputar tutorial ini jangan ragu untuk menghubungi kami melalui widget WhatsApp, terima kasih.
0 Komentar