Home  ›  Desain Blog  ›  Tips SEO

Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog

Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog Contoh Blog
Your Blogging Inspiration

Cara Menghapus Widget Bundle CSS untuk Mempercepat Tampilan Blog Blogger.

Mempercepat Tampilan Blog

 JIKA kita "bedah" daleman template blog SEO Friendly & Fast Loading, maka umumnya menghapus kode bawaan blogger yang disebut  Widget Bundle CSS.

Diyakini, dan terbukti, dengan menghilangkan kode tersebut, tampilan blog akan kian kenceng & ringan alias mengurangi waktu tampilan (reduce blog load time).

Penghapusan Widget Bundle CSS memang tidak membuat tampilan blog jadi error, malah makin ringan, kecuali ada perubahan di blog pager dan kolom komentar. Error tampilan blog pager dan kolom komentar bisa diperbaiki dengan kode komentar blogger custom.

Kode Widget Bundle CSS 

Kode Widget Bundle CSS tersebut adalah kode yang berakhiran widget_css_bundle.css seperti berikut ini:

<link href='https://www.blogger.com/static/v1/widgets/2549344219-widget_css_bundle.css' rel='stylesheet' type='text/css'/>

Cek saja template Anda dengan cara Template > Edit HTML > Ctrl+F > masukkan kata bundle.css. Jika masih ada, Anda bisa menghapus atau men-disable-nya agar tampilan blog lebih ringan dan cepat.

Kode Widget Bundle CSS lengkapnya adalah:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1738504331-widget_css_bundle.css' />

#1. Cara Menghapus Widget Bundle CSS Blogger 

Dengan dirilisnya tema baru, yaitu tema Versi 3 (Contempo dkk), Blogger kini telah membuatnya lebih mudah untuk menghapus file CSS dan JS default yang disertakan dalam template bawaan Blogger.

Untuk menghapusnya, tambahkan atribut b:css='false' b:js='false' kedalam tag <html> di awal kode template.

<html b:css='false' b:js='false' ...

Keterangan:
  • Kode b:css='false' berfungsi menghapus default CSS Blogger di template.
  • Kode b:js='false' berfungsi  menghapus default JS Blogger di template.
  • Jika hanya menghapus CSS, aka cukup kode b:css='false' saja yang ditambahkan.

#2. Cara Lama Menghapus Widget Bundle CSS

Berikut ini cara lama menghapus Bundle CSS Blogger.

1. Klik "Template" > "Backup Template".

Backup dulu template Anda, jaga-jaga kalo error

2. Klik "Edit HTML"
3. Temukan kode ini di template Anda: 

<b:skin><![CDATA[

4. Select All alias SEMUA kode css yang ada di antara kode:

<b:skin><![CDATA[
........... kode css di sini  ............
 ]]></b:skin> 

5. Copas ke Notepad

6. Setelah dicopypaste ke notepad, hapus semua kode tersebut, sehingga yang tersisa hanya kode berikut ini:

<b:skin><![CDATA[
]]></b:skin>

7. Hapus kode tersebut dan ganti (replace) dengan kode berikut ini:

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
7. Copas kode berikut ini di bawahnya atau di bawah kode </b:skin>
<style type="text/css"> 
... kode CSS di sini... 
</style>

8. Copy & Paste kode CSS yang di langkah no. 4 disimpan di Notepad ke dalam kode di atas (di bagian yang ada tulisan ... kode CSS di sini...)

 9. Save Template!

Jika ada perubahan di bagian Blog Pager, yaitu navigasi Newer Post - Home - Older Post, menjadi menumpuk di tengah, maka tambahkan kode berikut ini di atas kode ]]></b:skin> atau </style>.

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}
Itu dia Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog. Silakan klik dua link sumber di bawah ini untuk lebih jelasnya.

Good Luck & Happy Blogging! (contohblog.com).*

 Sumber
Sumber

Thanks for reading Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog | Labels: Desain Blog, Tips SEO edit this post

22 komentar on Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog

  1. ArifJuly 02, 2015

    Patut untuk di coba.

    ReplyDelete
  2. AnonymousJuly 03, 2015

    CB, apakah cara ini sudah diterapkan pada Genesisseo?

    ReplyDelete
    Replies
    1. CB BloggerJuly 03, 2015

      Untuk genesis seo tidak diterapkan, karena sudah cukup Fast Loads... Silakan kalau mau diterapkan, tapi risikonya layout jadi agak acak-acakan.... (gak masalah sih, toh layout cuma admin yang lihat:) )

      Delete
    2. AnonymousJuly 03, 2015

      Siap mas. Untuk mengatasi layout acak-acakan saya ngerti mas.
      Dicoba dulu orisinil premiumnya, tanpa perlu edit sana-sini. Ntar kalo kurang, baru di oprek habis-habisan Genesisseo-nya.. Thanks CB!

      Delete
    3. CB BloggerJuly 03, 2015

      Siiiippp....! Good Luck....!

      Delete
  3. FileJuly 16, 2015

    Dah di coba belum ini trik kang?

    Keraguan saya berawal dari sini:

    1. Kode ini ga ada tag penutupnya : "<style type="text/css"> <!-- /* <b:skin><![CDATA[ */]]></b:skin>"

    2. Trus knapa tag komentar html dimasukin ke CSS "

    ReplyDelete
    Replies
    1. CB BloggerJuly 17, 2015

      1. gak usah ragu, coba saja, tidak akan error...
      2. semua kode CSS bisa masuk ke < style > itu....

      Delete
  4. Samuel GunawanOctober 05, 2015

    Thanks infonya... Berguna sekali... Gak salah saya kunjungi nih blog... Good Job

    ReplyDelete
  5. Dani GunturOctober 26, 2016

    Dah di coba sampai di ulang 2X GagalManing-GagalManing. Sebelum di coba page speed score sudah 96% tadinya mau sampai 100% Eeeeeee masih tetap. Kalau Pendapat Aa CB 96% sudah bagus belum ya ?

    ReplyDelete
  6. Admin Halal PentingJanuary 13, 2017

    untuk Template NJW Update apakah sdh terhapus dari sananya mas?

    ReplyDelete
  7. UnknownJanuary 29, 2017

    Fungsi widget css bundle itu apaan sih gan??
    Kok disetiap template ada semua??

    ReplyDelete
    Replies
    1. CB BloggerFebruary 15, 2017

      Itu untuk menampilkan widget bawaan blogger

      Delete
  8. UnknownFebruary 15, 2017

    ketika saya test speed blog saya di pagespeed insight ada peringatan seperti ini "Hapus JavaScript yang memblokir render: https://www.blogger.com/static/v1/widgets/127631110-widgets.js"
    saya saya praktekkan tutorial abang CB sedetail mungkin dari a-z dan seharusnya work tapi kenapa tidak ada perubahan sama sekali ya? mohon pencerahanya mastah

    ReplyDelete
    Replies
    1. CB BloggerFebruary 15, 2017

      Itu bukan widget bundle_css, lain lagi. Silakan buka linknya

      Delete
  9. SerizawaMarch 11, 2017

    apakah ngaruh ke seo? tapi skor blog CB ini dapat skor 57 dan 59/100

    ReplyDelete
    Replies
    1. CB BloggerMarch 13, 2017

      ngaruh, tapi skor seo chkme bukan ukuran, buktinya ya blog CB ini tetap "jaya" :)

      Delete
  10. ClemensMarch 14, 2017

    gimana gan kalau di template ga ada bundle.css tapi di pagespeed insight tools masih ada

    ReplyDelete
    Replies
    1. CB BloggerMarch 14, 2017

      itu artinya masih ada di template, ngumpet, takut dihapus :)

      Delete
    2. RUMAH MAKAN APUY PURWAKARTAJune 23, 2017

      Seperti blog saya gan, saat halaman depan dilakukan control+U maka tepat di bawah head ada tercantum :

      58827200-widget_css_bundle.css

      NAMUN di dalam template html nya tidak ada alias ngumpet. Apakah ada solusi untuk menampilkannya gan? Soalnya oleh PageSpeed Insights masih terdeteksi.

      Delete
    3. CB BloggerJuly 08, 2017

      Silakan ke UPDATE hapus css bundle:
      http://www.contohblog.com/2017/07/hapus-widget-bundle-css-kecepatan-blog.html

      Delete
  11. UnknownMay 30, 2017

    saya coba dulu mas,, nanti kalo ga berhasil saya balik ke sini

    ReplyDelete
    Replies
    1. CB BloggerJuly 08, 2017

      Silakan.... cek juga updetannnya:
      http://www.contohblog.com/2017/07/hapus-widget-bundle-css-kecepatan-blog.html

      Delete

Contact Form

Name

Email *

Message *

Back To Top