Blogger

Cara Minify CSS Manual dan Otomatis Blogger

0
Please log in or register to do it.

MedianWPCara Minify CSS Manual dan Otomatis Blogger — hai MedianWP lover, kali ini kita akan membahas tentang Cara Minify CSS Manual dan Otomatis Blogger. Apa itu Minify CSS? Secara gamblang minify css adalah tindakan mengompres css dari size asli ke size yang lebih kecil. Tetapi dalam praktik minify css yang sebenarnya minify css tidak hanya sekedar mengkonversi size asli file css ke ukuran yang lebih kecil saja melainkan minify css juga merupakan tindakan merubah pengaturan optional css beberapa objek (elemen individu) di situs web ke pengaturan css secara global atau group.

  1. Pengertian Minify CSS
  2. Cara Minify CSS Blog Terbaru
  3. Gabungkan Semua Kode CSS
  4. Hapus Semua Karakter Whitespase
  5. Simpan Semua Kode CSS Pada Head
  6. Non Aktifkan CSS Bawaan Blogger

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 notepad agar lebih mudah mengeditnya.

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 == &quot;error_page&quot;'><style>
......Kode CSS Blogger yang berfungsi pada halaman 404 atau error_page....
</style>
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<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.

Gabungkan Semua Kode CSS

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.

Hapus Semua Karakter Whitespase

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.

Simpan Semua Kode CSS Pada Head

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'>{ &quot;@context&quot;: &quot;https://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>

Jadi simpan kode CSS yang telah kamu minify tadi tepat dibawah kode json sitelink pada template kamu.

Non Aktifkan CSS Bawaan Blogger

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 sahabat MedianWP Lover itu lah tadi Cara Minify CSS Manual dan Otomatis Blogger versi MedianWP yang dapat Anda jadikan referensi pilihan buat teman teman, semoga Informasi Cara Minify CSS Manual dan Otomatis Blogger ini bermanfaat bagi Anda, Tekan CTRL + D untuk bookmark halaman ini. Silahkan tinggalkan komentar jika ada pertanyaan dan jangan lupa untuk membaca artikel menarik lainnya.

Cara Menggunakan Lazy Load Iklan Google Adsense
Cara Membuat Text Resize di Blogger
Ad Area

Reactions

0
0
0
0
0
0
Already reacted for this post.

Reactions

Your email address will not be published. Required fields are marked *