Cara Compress CSS,HTML dan JavaScript di Template Blogger

Kode CSS, HTML dan JavaScript adalah kode yang pasti ada didalam setiap template blogger. Selain itu juga, kode CSS dan HTML itu ada yang masih belum di maksimalkan contohnya tidak dilakukan pengkompresan ukuran CSS dan HTML. Tapi tidak semua template yang disediakan di blogspot menggunakan CSS dan HTML nya di kompres, ada sebagian yang biasanya diabaikan sang pembuatan template dalam masalah ukuran size HTML ini.

Padahal fungsi dari mengkompres CSS,HTML dan JavaScript ini sendiri lebih memaksimalkan kecepatan loading blog yang kamu kelola, sebab semakin rendah garis angka yang ada dalam template blog, maka semakin ringan juga loading halaman yang di muat orang lain saat mengunjungi blog kamu.

Melakukan pengkompresan CSS tidak akan menyebabkan eror pada template, sebab fungsi CSS di kompres ini hanya mengurangi garis spasi yang banyak memakan line garis di template blog. Sederhananya untuk mudah kita pahami mari kita lihat 2 kode CSS dibawah ini.

Kode CSS yang belum di kompres atau di perkecil

#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 9999;
}
#searchfs input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 5px;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}

Kode CSS yang sudah di kompres / perkecil ukurannya

#searchfs.open{-webkit-transform:translate(0px,0px) scale(1,1);-moz-transform:translate(0px,0px) scale(1,1);-o-transform:translate(0px,0px) scale(1,1);-ms-transform:translate(0px,0px) scale(1,1);transform:translate(0px,0px) scale(1,1);opacity:1;z-index:9999}#searchfs input[type="search"]{position:absolute;top:50%;left:0;margin-top:-51px;width:70%;margin-left:15%;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.8);border-radius:5px;font-size:40px;text-align:center;outline:0;padding:10px}

Baca juga : Cara Membuat Tombol Pencarian Menggunakan CSS

Begitu banyak bukan perbedaannya? yaitu singkatnya garis text CSS jika sudah di lakukan pengecilakan ukuran, dimana kode CSS sebelumnya terlihat panjang kebawah kini menjadi singkat dengan hanya sekitar 1 paragrap saja.

Begitu juga kode HTML, kode HTML yang panjang akan sangat banyak memakan ruang area dalam file template blog yang kamu gunakan, maka dari itu, langkah memperkecil ukuran kode template ini perlu kamu lakukan untuk memaksimalkan hasil kecepatan loading blog yang kamu gunakan.

Dalam halaman ini, kami akan menjelaskan langkah mengkompres CSS, HTML dan JavaScript secara benar dan pastinya sangat mudah kamu praktekan.

Mengkompres Kode CSS, HTML dan JavaScript

Ada banyak alat yang bisa kamu gunakan untuk mengkompres CSS ini, dan semua itu tidak perlu kita lakukan dengan cara menginstal aplikasi, Jadi kita hanya perlu mengunjungi situs online yang bisa kita gunakan untuk mengkompres CSS.

Salah satu situs yang kami rekomendasikan untuk memperkecil CSS adalah HTML Compressor, sebab situs ini begitu user frendly digunakan dan sangat mudah dipahami bagi orang gaptek sekalipun pasti bisa memahaminya sendiri.

Memperkecil ukuran CSS

Langkah pertama, jika kamu ingin memperkecil ukuran CSS di template blogspot, maka kamu harus menyalin kode CSS yang biasanya terletak dibagian atas kode </style> atau ]]></b:skin>

Buka > Blogger > Theme > Edit HTML

Salin kode CSS yang ada di template blog kamu.

Buka halaman HTML Compressor dan letakan kode CSS di kolom " Source "

Atur " Code type " dan ubah menjadi CSS, sebab kita ingin mengkompres kode CSS bukan!

Klik " Compress " untuk memperkecil ukuran CSS.

Lihat kode yang sudah di perkecil di kolom " Compress " dan klik " Select All " untuk menyalin semua kode CSS yang sudah di perkecil tadi.

Buka Blogger > Theme > Edit HTML > Timpa kode CSS sebelumnya yang belum di kompres dengan kode CSS baru yang sudah terkompres.

Memperkecil ukuran HTML

Untuk kode HTML, biasanya terletak dibagian kode dibawah </head> dan juga </body>

Usahakan, untuk mengkompres kode HTML ini, jangan langsung semua kode nya di kompres, jadi seleksi kode HTML perbagian mulai dari kepala, navigasi dan body untuk menjaga agar tidak terjadi eror.

Buka Blogger > Theme > Edit HTML > cari kode </head> dengan cara mengklik CTR+F dan enter.

Salin kode HTML bagian pertama, yaitu seluruh kode HTML wrapper

Buka lagi HTML Compressor dan pastekan kode seperti langkah pertama.

Ubah lagi " Code type " menjadi " Blogger "

Memperkecil ukuran kode JavaScript

Biasanya kode JavaScript ini terletak dibagian atas </head> dan </body> dan bertulisan <script>coding</script>

Ini contoh kode Script biar mudah kamu pahami.

<script rel='stylesheet' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/>

Buka Blogger > Theme > Edit HTML cari kode dibagian bawah <./head> dan </body>

Buka lagi HTML Compressor dan pastekan di kolom Source.

Ubah lagi " Code type " Menjadi " JavaScript " dan klik Compress

Akhir Kata

Demikian informasi yang dapat kami sampaikan dihalaman artikel ini tentang terkait mengkompres kode CSS,HTML dan JavaScript kusus template blogger, Jika ada pertanyaan atau juga masalah dalam menjalankan tutorial diatas jangan ragu untuk menulis komentar di blog ini.

Berbagi :