2 Cara Mengatasi Widget Bundle CSS Error - Mempercepat Loading Blog
Tutorial: Tips & Trik Mempercepat Loading Blog, - Cara Menghapus, Menghilangkan, Mengatasi dan Memperbaiki Widget Bundle CSS File di Blogger
Suatu tema blogger di bangun atas dasar dari beberapa elemen penting seperti HTML, CSS, dan JavaScript (Js). Template blogger yang baik dan berkualitas adalah template yang terbuka secara penuh 100% dengan cepat (Fast Loading) ketika dikunjungi.
Salah satu upaya yang bisa dilakukan untuk mempercepat loading blog adalah dengan cara menghapus elemen widget_css_bundle.css.
Nyatanya, elemen widget_css_bundle.css ini memperberat kecepatan loading situs web.
Untuk mengetahui ada atau tidaknya widget_css_bundle.css di template blogger yang kamu gunakan, kamu bisa cek di beberapa tools SEO dan Fast Loading, seperti PageSpeed Insight Google atau Varvy PageSpeed misalnya.
Kode widget widget_css_bundle.css lengkapnya seperti ini:
Kamu bisa langsung menghapus kode tersebut (Jika Ada). Jika tidak ada, dan ternyata kode widget_css_bundle.css masih terdeteksi; memang kodratnya sudah demikian -- kodenya tersembunyi (tidak kelihatan).
Pertanyaan, apa itu Bundle CSS? Pengertian Widget Bundle CSS File, -- disebut juga Render-Blocking CSS adalah ditemukannya sebuah script eksternal yang di load secara Synchronous di dalam template blogger.
Adanya Bundle CSS ini menyebabkan tampilan situs web menjadi bermasalah ketika dikunjungi oleh pembaca dengan jaringan internet yang buruk.
Ada 2 cara yang bisa kamu terapkan; tapi sebelum melakukan (implementasi) tutorial ini; alangkah baiknya baca terlebih dahulu dampak, efek, dan bahaya buruk dari menghapus Bundle CSS di Blogger yang ada di bawah Content ini.
Ubah kode di bawah ini:
...dengan kode ini:
Selanjutnya ubah kode yang ada di bawah ini:
...dengan kode ini:
Tutorial di atas merupakan langkah pertama. Selanjutnya, kamu harus berhati-hati dalam mempraktekkannya. Baiknya, silakan backup template blogger terlebih dahulu.
Cari kode ini:
Jika sudah, kamu akan melihat kode-kode CSS yang sangat banyak dan memanjang ke bawah. Salin (Copy) semua kode CSS ini, pindahkan ke Notepad.
Nantinya, yang tersisa hanyalah 2 buah kode yang saling berhubungan, antara kode b:skin awal dan b:skin akhir seperti ini:
Ubah 2 kode tersebut (diatas) dengan 2 buah kode di bawah ini:
...atau boleh juga di ganti (ubah) dengan kode di bawah ini:
Masih ingat dengan kode CSS yang sudah di simpan di Notepad tadi? Nah, kode CSS yang sudah di Copas ke Notepad tadi, digabungkan dengan kode di atas. Prakteknya begini:
Kemudian simpan template blogger seperti biasanya.
Jika diteliti lebih dalam, mengimplementasikan tutorial di atas tergolong mudah. Memang sih kecepatan loading blog akan bertambah, sayangnya beberapa widget bawaan Blogger/Blogspot tidak akan berfungsi.
Pernah meng-install tema blogger, lalu ketika ditambahkan widget formulir kontak ternyata widget tersebut tidak bekerja sebagaimana mestinya? Dipastikan, Bundle CSS File dari tema blogger tersebut sudah di hapus oleh desainer template-nya.
Itu baru satu contoh, dan masalahnya di widget Form Contact. Beberapa widget lain yang bakal bermasalah seperti Recent Posts, Recent Post per Labels, Recent Comments, dan lainnya.
Untuk mengatasi masalah beberapa widget yang tidak berfungsi, mau tidak mau kamu harus menggunakan JavaScript (Js) khusus yang disediakan oleh desainer blogger theme tersebut. Itu pun jika ada, jika tidak ada ya sudah :)
Updated!!! Cara Mengatasi Render Blocking JavaScript (JS) di Template Blogger.
Source:
http://www.bloggerdiy.com/2013/10/disable-widget-css-bundle.html
http://www.contohblog.com/2017/07/hapus-widget-bundle-css-kecepatan-blog.html
http://www.bwidgets.com/2013/11/remove-default-widget-bundle-css-from.html
http://www.contohblog.com/2015/07/menghapus-bundle-css-untuk-percepat-loading-blog.html
https://blog.kodejarwo.com/2017/09/mengatasi-render-blocking-css-delivery.html
Suatu tema blogger di bangun atas dasar dari beberapa elemen penting seperti HTML, CSS, dan JavaScript (Js). Template blogger yang baik dan berkualitas adalah template yang terbuka secara penuh 100% dengan cepat (Fast Loading) ketika dikunjungi.
Salah satu upaya yang bisa dilakukan untuk mempercepat loading blog adalah dengan cara menghapus elemen widget_css_bundle.css.
Nyatanya, elemen widget_css_bundle.css ini memperberat kecepatan loading situs web.
Untuk mengetahui ada atau tidaknya widget_css_bundle.css di template blogger yang kamu gunakan, kamu bisa cek di beberapa tools SEO dan Fast Loading, seperti PageSpeed Insight Google atau Varvy PageSpeed misalnya.
 |
| Pic: MyBloggerLab |
Kode widget widget_css_bundle.css lengkapnya seperti ini:
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/454518911-widget_css_bundle.css' />
Kamu bisa langsung menghapus kode tersebut (Jika Ada). Jika tidak ada, dan ternyata kode widget_css_bundle.css masih terdeteksi; memang kodratnya sudah demikian -- kodenya tersembunyi (tidak kelihatan).
Memahami Masalah (Error) Widget Bundle CSS File di Blogger
Pertanyaan, apa itu Bundle CSS? Pengertian Widget Bundle CSS File, -- disebut juga Render-Blocking CSS adalah ditemukannya sebuah script eksternal yang di load secara Synchronous di dalam template blogger.
Widget Bundle CSS ini memiliki istilah yang beragam; bisa di sebut juga dengan istilah CSS bawaan Blogger Theme. Jika bermasalah, istilahnya berubah menjadi Render-Blocking CSS Delivery Widget Bundle Blogger.
Adanya Bundle CSS ini menyebabkan tampilan situs web menjadi bermasalah ketika dikunjungi oleh pembaca dengan jaringan internet yang buruk.
2 Cara Mengatasi Widget Bundle CSS File - Mempercepat Loading Blog
Ada 2 cara yang bisa kamu terapkan; tapi sebelum melakukan (implementasi) tutorial ini; alangkah baiknya baca terlebih dahulu dampak, efek, dan bahaya buruk dari menghapus Bundle CSS di Blogger yang ada di bawah Content ini.
Ubah kode di bawah ini:
<head>
...dengan kode ini:
<head>
Selanjutnya ubah kode yang ada di bawah ini:
</head>
...dengan kode ini:
</head><!--<head/>-->
Tutorial di atas merupakan langkah pertama. Selanjutnya, kamu harus berhati-hati dalam mempraktekkannya. Baiknya, silakan backup template blogger terlebih dahulu.
Cari kode ini:
<b:skin><![CDATA[
Jika sudah, kamu akan melihat kode-kode CSS yang sangat banyak dan memanjang ke bawah. Salin (Copy) semua kode CSS ini, pindahkan ke Notepad.
Nantinya, yang tersisa hanyalah 2 buah kode yang saling berhubungan, antara kode b:skin awal dan b:skin akhir seperti ini:
<b:skin><![CDATA[ ]]></b:skin>
Ubah 2 kode tersebut (diatas) dengan 2 buah kode di bawah ini:
<style type="text/css"> <!-- /* <b:skin><![CDATA[ */]]></b:skin>
...atau boleh juga di ganti (ubah) dengan kode di bawah ini:
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin>
Masih ingat dengan kode CSS yang sudah di simpan di Notepad tadi? Nah, kode CSS yang sudah di Copas ke Notepad tadi, digabungkan dengan kode di atas. Prakteknya begini:
<style type="text/css">
#outer-wrapper{width:1100px}#header-wrapper{width:100%;margin-top:0}#header1{float:left;width:20%}#header2{float:left;width:40%}#content-wrapper{width:100%}#ads-banner{width:64%}#ads-banner2{width:64%}#main-wrapper{float:left;width:50%}#sidebar-wrapper{float:left;width:28%}#post-left{float:left;width:33%}#post-right{float:left;width:33%}#footer{width:100%}body#layout ul {display: none}#layout ul{display:none}
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type="text/css">
...Paste (Tempel) kode CSS tersebut di sini...
</style>
#outer-wrapper{width:1100px}#header-wrapper{width:100%;margin-top:0}#header1{float:left;width:20%}#header2{float:left;width:40%}#content-wrapper{width:100%}#ads-banner{width:64%}#ads-banner2{width:64%}#main-wrapper{float:left;width:50%}#sidebar-wrapper{float:left;width:28%}#post-left{float:left;width:33%}#post-right{float:left;width:33%}#footer{width:100%}body#layout ul {display: none}#layout ul{display:none}
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type="text/css">
...Paste (Tempel) kode CSS tersebut di sini...
</style>
Kemudian simpan template blogger seperti biasanya.
Dampak dan Efek Buruk dari Menghapusnya Bundle CSS di Blogger
Jika diteliti lebih dalam, mengimplementasikan tutorial di atas tergolong mudah. Memang sih kecepatan loading blog akan bertambah, sayangnya beberapa widget bawaan Blogger/Blogspot tidak akan berfungsi.
Pernah meng-install tema blogger, lalu ketika ditambahkan widget formulir kontak ternyata widget tersebut tidak bekerja sebagaimana mestinya? Dipastikan, Bundle CSS File dari tema blogger tersebut sudah di hapus oleh desainer template-nya.
Itu baru satu contoh, dan masalahnya di widget Form Contact. Beberapa widget lain yang bakal bermasalah seperti Recent Posts, Recent Post per Labels, Recent Comments, dan lainnya.
Untuk mengatasi masalah beberapa widget yang tidak berfungsi, mau tidak mau kamu harus menggunakan JavaScript (Js) khusus yang disediakan oleh desainer blogger theme tersebut. Itu pun jika ada, jika tidak ada ya sudah :)
Updated!!! Cara Mengatasi Render Blocking JavaScript (JS) di Template Blogger.
Source:
http://www.bloggerdiy.com/2013/10/disable-widget-css-bundle.html
http://www.contohblog.com/2017/07/hapus-widget-bundle-css-kecepatan-blog.html
http://www.bwidgets.com/2013/11/remove-default-widget-bundle-css-from.html
http://www.contohblog.com/2015/07/menghapus-bundle-css-untuk-percepat-loading-blog.html
https://blog.kodejarwo.com/2017/09/mengatasi-render-blocking-css-delivery.html
Labels: Tutorial Blogger
Thanks for reading 2 Cara Mengatasi Widget Bundle CSS Error - Mempercepat Loading Blog. Please share this article.
Pada paragraph terakhir, itulah yang saya alami dimana setelah mennghapus bundle css, sisi sidebar yang berisi popular post berpindah ke bagian bawah. Apakah bisa diperbaiki jika tidak memiliki javasicript untuk memperbaikinya
ReplyDeleteBisa mas, biasanya ada penambahan JavaScript (Js) di dalam template blogger yang sudah dipasangkan oleh desainer tema blogger tsb.
DeleteKalau tidak ada, silakan tanyakan sama yang bersangkutan.