
Masalah umum yang selalu ada di sebagian besar template adalah tersisipnya Javascript, CSS, dan Widget Bundle bawaan Blogger. Sebagian besar pengguna malah nggak sadar ada script begituan. Nggak aneh, soalnya emang NGGAK ADA di pengaturan HTML. Mereka berdua nggak tertulis. Otomatis gitu lho dari Google sana. Script ini cuma bisa keliatan di source code. Buat liat source code ini, tinggal ketik di browser alamat sebagai berikut:
view-source:http://www.AlamatBlog.com
Ganti http://www.AlamatBlog.com
pake alamat blog kamu sendiri.Dan akan terdapat script yang kurang lebih kaya gini:
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>
<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>
Dimana 33xxxxxxxx
berupa angka yang berbeda-beda di setiap blog.Padahal sebenernya kita nggak butuh-butuh amat kok. Yang ada malah memperlambat loading & nurunin score page speed di GTMetrix, Google Page Speed Insight, dan web testing lainnya. Ya mending dihapus aja.
Kalo nggak tertulis di pengaturan HTML, trus gimana hapusnya?
A. Cara Hapus JS, CSS, dan Widget Bundle Blogger
Emang perlu sedikit trik. Perhatikan baik-baik cara menghapus JS, CSS, dan Widget bawaan Blogspot berikut agar bisa mempercepat loading halaman. Pastikan kamu udah login ke akun Blogger. Trus masuk ke "Theme" lalu pilih "Edit HTML".1. Langkah Pertama
- Cari kode sbb:
<body> ... ... ... </body>
- Yang ditandai kuning <body> ganti dengan:
<!--<body>--><body>
- Yang ditandai biru </body> ganti dengan:
<!--</body>--></body>
- Simpan template.
2. Langkah Kedua
- Cari kode sbb:
<head> ... ... ... </head>
- Yang ditandai kuning <head> ganti dengan:
<!--<head>--><head>
- Yang ditandai biru </head> ganti dengan:
<!--</head>--></head>
- Simpan template.
3. Langkah Ketiga
- Cari kode sbb:
<b:skin><![CDATA[ ... ... ... ]]></b:skin>
- Yang ditandai kuning <b:skin><![CDATA[ ganti dengan:
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin> <style type='text/css'>
- Yang ditandai biru ]]></b:skin> ganti dengan:
</style>
- Simpan template.
4. Cara Melihat Hasilnya
- Cek lagi source code blog dan perhatikan. Kode dari Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau. Artinya hanya dianggap sebagai HTML comment tag dan nggak bakal dieksekusi sebagai script.
- Lakukan page speed test. Entah itu di GTMetrix, Page Speed Insight, Think With Google, Pingdom, dan lain sebagainya. Bandingkan nilai sebelum dan sesudah mempraktekan tutorial ini. Dijamin deh nilainya bakal naik. Maka proses sembunyikan Javascript, CSS, dan Widget Bawaan Blogger ini sukses.
B. Efek Samping
Tampilan layout / tata letak bakal keliatan flat. Nggak bakal ngebentuk kaya aslinya. Biar gampang, dijelasin pake gambar aja.
SEBELUM. Posisi dan tampilan layout / tata letak sama dengan tampilan blog ketika live.

SESUDAH. Semua akan berubah menjadi memanjang kebawah tapi nggak menghilangkan nama dari setiap id widget. Masih sangat mudah dibaca.
Buat saya pribadi sih bener-bener bukan masalah. Toh layout asli ketika blog diakses nggak berubah sama sekali. Yang penting disana masih ada nama dari setiap id widget. Jadi nggak bakal ketuker. Aman kok.
C. Solusi Untuk Halaman / Widget Contact Form
Biasanya halaman yang mengandung widget contact jadi nggak berfungsi. Ini disebabkan karena menyembunyikan widget bundle Blogger tadi. Kamu bisa pake widget contact ala Igniel yang udah pasti work.- Tambahkan CSS berikut ke pengaturan HTML.
/* Contact Form */ #comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;max-width:640px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
- Buat satu page / halaman baru. Kalau udah ada tinggal edit aja.
- Paste semua kode dibawah ke halaman tersebut.
<form id="kontak" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"></div> <div id="ContactForm1_contact-form-success-message"></div> </div> </form> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'ID_BLOG_DISINI';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dID_BLOG_DISINI','//www.igniel.com/','ID_BLOG_DISINI'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'ID_BLOG_DISINI', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>
ID_BLOG_DISINI
ganti dengan ID blog kamu.
www.igniel.com
ganti dengan alamat blog kamu. - Lalu publish halamannya.
Mantap om... Tutorialnya... Saya akan coba praktekkan...
BalasHapusKalau membuat kotak script yg om bagikan sama kotak peringatan pemberitahuan itu menggunakan apa om?
Cuma CSS aja mas.
HapusHello igniel, bisa bagi gak template blog nya yang ini kereng banget...
Hapusjadi berubah tampilan di template brosense, tolong diperbaiki
BalasHapusSetau saya template BroSense masih pake format penulisan lama. Nggak bisa pake cara ini.
Hapuskalau template hasil download bisa gak pake cara ini ?
BalasHapushttps://hiddentricksfl.blogspot.co.id/
Bisa, kalo maksudnya template dari link yang kamu tulis.
HapusMantap. Tp, apakah ini berlaku unt template lainnya?
BalasHapusIya dong. Bisa di semua template yang pake format penulisan baru.
HapusDan 99% template yang beredar di kita emang udah pake format tsb.
Terima Kasih
BalasHapussudah di terapkan di blog saya dan berhasil, yang mau saya tanyakan apakah bisa benar2 dihilangkan CSS dan JS bawaan blogger ini? sehingga tidak ada koment/kode yang warnanya hijau *lihat di di source code. terimakasih kak igniel :)
BalasHapusNggak bisa bener-bener ilang karena bawaan dari Bloggernya. Yang penting udah nggak bakal tereksekusi sebagai script lagi.
HapusKeren nih,,bisa bikin blog jadi wuz wuz
BalasHapusKapan ni mba igniel launching theme buatan sendiri ^-^
BalasHapusUdah ada mas, template premium.
HapusTapi belum terlalu dipublikasiin jualannya.
https://igniplex.blogspot.com
Maaf Kak Gagal paham untuk yang ini
BalasHapusTambahkan CSS berikut ke pengaturan HTML.
ini diletakan bagian HTML yg mna ya?
Kode CSSnya simpen sebelum < /style >
HapusSaat diupload templatenya error ?
BalasHapusKalo semua langkahnya bener, nggak bakal error.
HapusDi blog ini sampai kode:
BalasHapus<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
biasanya sebelum </body> juga ilang, gimana itu caranya mbak? maksud ilangnya bukan sebagai HTML comments yang biasanya warna ijo, tapi ilang gak muncul beneran.
Terimakasih mbak, sukses saya terapkan.
BalasHapusPada Tata Letak itu ada menu navbar, cara menghapusnya gimana ya?
Pake css display:none mas
Hapuslebih tepatnya begini
body#layout .navbar{display:none}
dengan asumsi navbar nya memiliki class parent dengan nama 'navbar'
< /style > yg mana? banyak kode < /style >nya
BalasHapus<style> yang ada di dalam tag kondisional halaman statis.
Hapus<b:if cond='data:blog.pageType == "static_page"'>
tampilanya jd berantakan gini http://prntscr.com/iepx49
Hapusjuga ada banyak
BalasHapusIni ceritanya masnya mau masukin kode CSS apa?
HapusKalo yang beantakan form kontak, di poin "C. Solusi Untuk Halaman / Widget Contact Form" udah dibahas. Udah dikasih CSS yang nggak berantakan juga.
Hapuskalau begini bagaimana cara menggantinya mba igniel?
BalasHapuskalau < body > tidak ada gmn mbak?
BalasHapusNggak mungkin template Blogger nggak ada tag BODY. Coba dicek lagi mas. Carinya cukup <body (tanpa kurung tutup).
Hapus< body expr:class='data:blog.pageType' >
Hapusadanya ini mbak igniel... gimana cara replace gantinya?
Ganti menjadi <!--<body>--><body expr:class='data:blog.pageType'>
Hapuskalo misalkan ada eror gini "Kesalahan saat mengurai XML, baris 734, kolom 3: The element type "Variable" must be terminated by the matching end-tag ""."
BalasHapusitu pas saya memasang
"<style type="text/css">
<!-- /*
"
nah yang ditandai eror katanya blogger pada bagian <"disininya"/s.tyle> nya
itu kenapa yah??
style saya diberi . krna komen ini ga bisa menerima tag style :)
Apa pakai template format lama? Nama templatenya apa? Biar saya cek.
HapusKomentar ini telah dihapus oleh administrator blog.
HapusHapus semua isi dari /* Variable definitions
HapusSemua yang berawalan <Variable
Kalo nggak mau dihapus, tutup tagnya dengan menambahkan </Variable> di setiap akhir tag variable tadi.
Lhoalahh. .. Jadi, kode widget bundle nggak tertulis di HTML toh? Pantesan aku nyari di html template blogku sampai mumet nggak ketemuketemu. Akhirnya googling dan terdampar di sini. Hehe
BalasHapusOke, makasih, nanti coba aku praktekan tutorialnya.
Yeess ... Sukses dengan mengganti yg bagian <*head> dan <*/head>
HapusThank's ...
Klo di pakek di Template Glooger rensponsive bisa gak ya mbak?
BalasHapusIya bisa. Coba aja.
HapusNggak work kalau pake template dr Evo Magz mbak.
BalasHapusIya karena CSS Evo masih ada di dalem b:skin.
HapusJadi kalo b:skinnya disembunyiin, CSSnya bakal kehapus juga.
Solusinya pindahin dulu semua CSS di dalam b:skin ke dalam <style>
Mantap mbak artikel yang sangat bermanfaat tutorialnya work cuma pas saya ganti kode pada langkah ketiga itu tampilan template jadi ancur berubah mbak.
BalasHapusTpi kecepatan udah naik dari 73% jdi 87%
Template BroSense kan? Itu karena semua CSS di template tsb disimpan di dalam tag b:skin. Sementara disini kita harus menyembunyikan b:skin. Jadi CSSnya dianggap terhapus, dan template jadi berantakan.
HapusSOLUSINYA:
1. Pindahkan semua isi CSS di b:skin ke tag style. Contoh:
<style>
.....isi CSS disini.....
</style>
2. Setelah dipindahkan, baru praktekan lagi langkah ketiga.
kalo codenya seperti <body expr:class='"loading" + data:blog.mobileClass'> itu mau di apakan yah?
BalasHapusyang bagian A, sudah dilakukan, terima kasih tutorialnya. page speed jadi 94. Yang bagian B dan C belum dilakukan, masih belum mengerti.
BalasHapuskalau seperti di bawah ini, bagaimana cara menghilangkannya ?.
Hindari pengalihan halaman landas untuk rantai URL yang dialihkan berikut :
http://erwinedwar.com/
http://www.erwinedwar.com/
http://www.erwinedwar.com/?m=1
Link internalnya punya 3 tujuan yang berbeda (seperti yang disebutkan diatas).
HapusSamakan semua link internal. Lebih baik pakai URL yang kedua >> http://www.erwinedwar.com
Tinggal diedit di HTMLnya.
caranya gimana ?. buat tutorialnya di blog ini. bagi yg gaptek seperti saya akan sangat membantu, walaupun bagi agan yg ahli, itu persoalan kecil dan sederhana.
Hapusletak ketiga url diatas, di edit HTML nya sebelah mana ?. sudah dicari satu - persatu tapi gak ketemu
Hapussetelah menghilangkan tanda ]]> di blog banyak tanda tang dan obeng. bagaimana menghapusnya sedangkan tanda ]]> sudah tidak ada. dimana menempatkan tanda .quickedit{display:none;} supaya tanda obengnya hilang.
BalasHapusTempatkan semua CSS sebelum kode </style> yang baru dibuat sebagai pengganti ]]>
Hapusbuat tutorialnya supaya mengerti
HapusMantap artikel nya, mudah dipahami dan sedikit agak sulit sy praktekkan
BalasHapusgak work kalau pakai themes bawaan blogger. Saya coba terapkan di themes Emporio tapi malah terbongkar.
BalasHapusIni test pake Contempo work. Coba ganti bagian <body> doang.
Hapussudah coba yang di ganti cuma body tapi tetap ga work di Emporio.
HapusSebenarnya themes Emporio ini sudah cukup bagus sih di GTmetrix, hanya saja plusone.js nya masih di anggap mengganggu krn tdk 'async'. Solusinya sy cuma tambahin 'async'...
Tapi....
masih penasaran, gimana cara sembunyiin plusone. js dan kawan-kawannya yang tidak berguna itu. XD
Tambahkan b:js='false' dalam tag html. Cek hasilnya.
Hapus<html b:css='false' b:js='false' blablablabla>
tetap Not Work.
Hapussaya simulasikan 3 cara...
1. cuma tambahin b:js='false', head dan body ga' di ubah. Not Work
2. tambahin b:js='false', head dan body di ubah. Not Work
3. tambahin b:js='false', cuma body yang diubah, head tidak (dan sebaliknya). Not Work.
menurut Igniel, template Emporio itu sdh bagus tanpa di ubah2?, karena sy liat semua .js nya sdh async. dan satu2nya pengganggu menurut GTmetrix cuma plusone.js.
Saya menyarankan begitu karena udah dicoba sendiri dan work di Emporio. Keep trying.
HapusKeren om. Thanks infonya
BalasHapuskalau untuk mengatasi "Hindari pengalihan halaman landas untuk rantai URL yang dialihkan berikut." Gimana ya?
Jadi kalau di penulisan blog seperti '< body schema bla bla bla>'
BalasHapusgimana menggantinya mba?
<!--<body>--><body schema bla bla>
Hapusini bikin mati tombol delete dan reply ga gan(gan apa sis sih?)?
BalasHapusbtw halaman form nya kok aku test gk ngirim email/pesan apa2 y?
HapusIya bikin mati reply.
HapusHalaman form mana yang dimaksud? Kalau maksudnya yang ada di blog ini, saya cek normal kok.
kalau bkin mati reply tapi kok punya mbak bisa sih? caranya gmana mba?
HapusMbak adakah cara untuk mengatasi render blocking Jquery?
BalasHapusCeritanya saya sudah coba pakai async='async'.. Masalah render blocknya hilang, tapi fitur situs yang perlu Jquery jadi nggak berfungsi.
Setelah asynchronousnya dihapus baru normal (Tapi render blocknya balik lagi).
Terima kasih
Tetap pakai async. Lalu buat agar script terpanggil setelah library jQuery termuat. Lanjut Googling aja ya buat cari tau gimana cara manggil fungsi script setelah library jQuery termuat. Di blog ini belum bikin tutornya soalnya.
HapusKok pas saya terapkan di blog saya, malah menurun yah daru 47 jadi 26 versi mobile di pagespeed taugakini.com
BalasHapusKolom komentar punya saya malah eror
BalasHapusMantaapppp berguna ilmunya
BalasHapusmampir bro di blog ane : https://tentangprodukgoogle.blogspot.com/
Masalah Kadang Pada Banyak " CDN Banner " itu apanya berarti ya mbg yg perlu di perbaiki ?
BalasHapuskalo yang diganti hanya head sama body apa sudah meningkatkan pagespeed mbak?
BalasHapusDear mbak Igniel,
BalasHapuspada template terbaru hanya terdapat ini:
<b:skin version='1.3.0'><![CDATA[
dan atau yang ini:
</b:skin>
<b:template-skin>
<![CDATA[
Jika diganti dengan:
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Akan muncul pesan: Tidak dapat di urai
Jika di ganti dengan:
Mantul mba Igniel 😁
BalasHapusMbak itu fungsi < buat apa ya
BalasHapussetelah lakukan hal tsb tombol balas di komentar tdk berfungsi, gimana solusinya ya?
BalasHapusTks.
permisi mbak, gimanayah supaya "The Chrome User Experience Report" di google pagespeed insight aktif?
BalasHapusmakasih gan infonya hehehehe mantap langsung naik kecepatannya nggak nyangka
BalasHapuskalo begini gimana cara gantinya <![CDATA[
BalasHapuskalo begini gimana cara gantinya
BalasHapus<![CDATA[
<![CDATA[
BalasHapusMim saya mau tanya ni, muter" gk nemu, saya kan pengen buat blog yg kyak komik gitu, nah pengennya di bawah postinganya, misal saya baca episode 5, nah di bawah post epispde 5 ada kotak yang berisi
BalasHapusEpisode 7
Episode 6
Episode 5
Episode 4
Episode 3
Semua episode
Itu gimana cara buatnya min???
bukan form kontak saja yg harus d rubah, tombol balas pada komentar juga.. karena jadi tidak berfungsi
BalasHapusGawat
BalasHapusBlog saya jadi brantakan wkwkwk
Betul, blog saya jg berantakan. Jd saya kembalikan saja ke tema bawaan google. Direfresh 2x. Sdh 2 tahun jd tak ada masalah.
Hapus