Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman

Tips-trik edit template Blogger

Blogger adalah layanan blog gratis yang memberikan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.
Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.
Beberapa kasus saya temui dari pengunjung dan beberapa teman blogger (khususnya newbie) yang mengeluh karena gagal memasukkan hack/script tambahan, tidak menemukan kode tertentu seperti yang ada di tutorial, bahkan ada pula yang templatenya "kacau" karena salah mengedit template HTMLnya.

Tips ini saya buat untuk memberi masukan dan ide dalam melakukan editing Template HTML agar hasilnya sesuai dengan yang diinginkan. Semoga bermanfaat.

1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:
a. HTML/XML tag, yang menandakan bagian dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.
b. Head tag, merupakan bagian dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.
c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.
d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bagian head. Pada beberapa kasus kode CSS juga dimasukkan tepat di atas </head> sebagai aturan tambahan.
e. Javascript, merupakan elemen yang sebenarnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen tambahan seperti popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host langsung di Blogger, dan eksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.

2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan seperti semula.

3. Perhatikan benar-benar tutorial yang dibaca, jangan sampai ada yang terlewatkan. Sebagai contoh, jika harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut adalah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger karena memang ditujukan untuk keamanan.

4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bagian script sudah tercopy atau jangan ada bagian selain dari script yang ikut ter-copy.

5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melakukan pengubahan script dan memastikan semuanya beres, baru masukkan script tersebut ke template HTML.

6. Agar lebih mudah dan cepat mencari kode tertentu seperti yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan kode yang ingin dicari dan tekan next (enter).

7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, dia tetap dibaca dari kiri ke kanan. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jika harus memasukkan tag/kode baru <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya: 

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 
<data:adStart/>
atau,
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>
8. Jika memang masih belum yakin dan terbiasa, buatlah blog baru yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda bisa dengan bebas melakukan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar hasilnya akurat, gunakan jenis template yang sama seperti blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script baru sehingga bisa dengan bebas melakukan apapun tanpa rasa khawatir.

9. Khusus untuk hack/script tertentu di mana tampilannya bisa langsung dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan langsung di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, baru lah di-save.

10. Pada beberapa template, ada yang bagian tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga ketika bagian tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis seperti ini, jangan menyerah terlebih dahulu.
Contoh:
Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> ketika mencari (Ctrl + F), cukup gunakan data:post.body saja.

Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk agar lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat mengembangkan dan membiasakan diri dengan template dan template editor Blogger serta melakukan editing secara mandiri (Do It Yourself [DIY]). Keep on learning and learning.
Salam.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 83 Comment(s):

Afif Amrullah said...

Header-nya baru ya Bro :D
mantap!

Unknown said...

hehe, thanks bro...cuman cari gratisan aja nih :p

Chelonia said...

Kalau yg ga ngerti kaya saya nE mas, resikonya besar ya..
tp untungnya blogger punya fasilitas backup, kalau salah bisa di normalisasi kembali,

Terima kasih infonya mAS..

Unknown said...

yup, bener banget. nanti kalo udah terbiasa edit template and sudah paham html dan CSS, ga perlu backup-backup terus ko. tapi, dengan adanya fitur ini, siapapun jadi bisa edit HTML Blogger tanpa kawatir templatenya jadi kacau. :D

Musanif Efendi said...

wah saya sangat beruntung sekali bisa banyak belajar dari ente bro : terima kasih banyak ya. dari dulu saya nyari eeeeeeee, ketemuanya di blog ini, thanks bauanyak yaa

anyail dehbedeh beih said...

kalau download template biasanya kan ada gambarnya gan,sehingga tulisan "Entri Baru Desain Keluar" yg ada diatas itu tdak ada.
lalu bgimn caranya agar tulisan2 diatas ada gan?
terima kasih

Unknown said...

puas membacanya mas, dari awal hingga huruf terakhir :)
pembelajaran yang bagus untuk newbi..
makasih

Kang Dadan said...

makasih mas, saya jadi rada-rada ngerti sekarang..

segala info said...

wah mantap kang, sangat detail penjelasannya. makasih

Arifian Nurcahyono said...

mas Azmi,,,

saya nemuin blog yang hampir sama dengan blog ini...
coba buka http://bloggerstop.net

apakah emang pake template yang sama ???

Unknown said...

ya benar Pian, itu blog sobat saya Divya Sai. Kita emang pake template yg sama buatan Dicas Blogger :)

BsC ++ said...

I am very happy to see you here. Thanks for share your thought about blogging. And the best part of it, we all in the warmest community and find the greatest people like you, my friend. I am proud to be your friend here. God bless you.

Rachman Dano Mustafa said...

Mas, nama template ini apa

angga mardiansyah said...

mantap...jangan bosan bagi2in ilmunya mas...

airvan42 said...

blognya mantap mas bro..

Cara Aqiqah said...

belum kepikiran buat otak atik template. kayaknya pake bawaan blogspot juga udah bagus bagus

Anonymous said...

kasih tau dong cara a bikin "back to top" yang ad d kanan bawah ntu .... makasih.

mampir blog saya agan2 wa0n3izer.blogspot.com
>> minta kripik pedasnya... ":)

kemanten said...

ilmu yg sngat berguna,, thanks ya

Cijolang Mania said...

nice info mas, salam kenal ...

idcz123 said...

ternyata ada manfaat dari mencentang expand widget ya...
thx gan dah dikasih tau dari postingan

paimin222 said...

wee.... keren gan blog nya,
boleh minta spesifikasinya gak??
apaan aja komponen yang dipake??

btw template nya keren juga gan
ane minta dong gan :D

ARUL said...

alhmdllh aq dh tw tips mengedit html mskpn dikit-dikit
mkch ea..ats tutorialnya

Ahmad Fauzi said...

maz blog saya knpa y kok konten post di home page gak ada y http://fauzitutorial.blogspot.com/

faras k-rens said...

oyyy bagus kali kok ni blog kk kunjungi blog aku ya

farask-rens.blogspot.com

oke kk

Kabar Terbaru said...

wah tipsnya berguna banget nih. tengkyu mas..
btw, ada yang berubah nih wajah blognya :)

Joe said...

mantaps pak
artikel nya sangat bermanfaat sekali untuk saya

Pazzini said...

Hatur nuhun infona kang .

Kang Soegie said...

Mantap, Mas... :)

dangdut said...

mator nuwon mas atas infonya :-)

Unknown said...

Keren bang infonya, makasih...

saya banyak belajar dari blognya bang Ahmad Khoirul Azmi ini...

dani said...

belum kepikiran buat otak atik template,hehe
entar saya coba,maksih mas dah berbagi..

ilmuini said...

belajar ngedit dari dulu agak mumet, kadang sampe jenuh,
aku mending fokus di kontennya aja deh,hehe

ghielz said...

wah artikelnya lebi komplit. yang ane mohon di revisi sob

Unknown said...

Maaf..aku mah baru nih lihat kode-de spt itu jadi pusing tp lumayan nambah wawasan ttg blog, Makasih Bung!

multi-printer said...

wow,it's so easy and useful. nice tutorial

aldi said...

makasi banget masss..tutornya sangat bermamfaat

mochlas said...

maaf bos,,mau tanya kadang kalau pass edit kog error kenapa yahh???

Unknown said...

@Mochlas: Biasanya karena ada tag yang kurang lengkap, misalnya ada yang yang tidak tertutup atau karena mengkopi dari sebuah sumber tapi tidak tercopy keseluruhan. Selain itu ada beberapa tag yang harus di-parse dulu sebelum ditambahkan di template Blogger, misalnya kode adsense.

Galih-Achmad24 said...

thanks for info di nanti kunjugan baliknya ......

serba gratis said...

Yang Newbie sedang belajar HTML sama sang Mastah,makanya saya kemari juga,karena saya memang sangat OON dibagia HTML nya,sampai sekarang belum paham cara menegditnya,makanya masih morat marit juga tempalte saya sampai sekarang,mohon petunjuk mastah

Unknown said...

info yg bagus omm...

jangan lupa visit n follow blog saya http://yogablogerstempalte.blogspot.com

NEDI ARWANDI said...

mas Khoirul Azmi, ijin seluruh page blog antum, ana download semuanya tuk dipelajari, syukron sudah berbagi pengetahuan, sangat membantu ana dlam mempelajari serba serbi blogspot....

dherly said...

mantafs gan

Unknown said...

Bro, ada tutorial untuk edit template blogspot yg advanced g bro? Terutama yg deskripsikan tag/kode data blogspot yang banyak banget itu. Deskripsi tag/kode data dari Om Google masih pelit tuh bro, cuma ngasih setengah-setengah.

Muhammad Zulfi Rahmanzi said...

numpang share gan

Arimigayo said...

Duh, otakku mumet jadinya,
tapi bagaimanapun, tetap semangat untuk lanjut,.
thanks bejibun mas bro..

Unknown said...

ribet ye -_- tapi makasih buat tipsnya :D

Ramzi said...

Bagi yang sering utak - atik template blogger harus baca ini

yusuf said...

Bagus sekali gan terimaksih atas penjelasannya, salam kenal

randi said...

tips nya sangat membantu newbie ini om :) terimakasih sudah berkenan di share trik nya . nubie ini hanya bisa bilang terimakasih atas penjelasannya

laskar awan said...

saya praktekkan mas

Unknown said...

terima kasih gan ini sangat membantu saya...

Yanti oktaviani said...

thanks mas infonya menarik...titip link ya mas
www.indotourists.blogspot.com

Unknown said...

Infonya sangat membantu sekali mas azmi terima kasih mas

Anonymous said...

mau bertanya lagi mas ahmad khoirul, di sebelah kanan tempat posting kan ada yang namanya deskripsi penelusuran.nah itu apa manfaatnya mas? mohon bantuannya mas.

lowongan kerja said...

makasih infonya gan tapi masih kurang paham bagaimana cara untuk edit semuanya.....

Ida Susiana said...

duh kenapa aku masih bingung yaa..

Basrie Mr said...

setelah klik edit HTML ada tampilan lanjutkan,pakai template, dan batal pilih yang mana sob

Unknown said...

@BAsri: Klik Lanjutkan

Rio said...

terimakasih bantuannya saya sudah hampir putus asa ketika find (< data : post . body / >) ternyata setelah mendapatkan saran dari anda sudah dapat ditemukan. http://mypatriotmuslim.blogspot.com/

Sivir suwunk said...

Blognya Cakep,,,,,,,,,,
kapan yah aq bisa bikin blog kaya gini,,
heheheehe,,,

Unknown said...

Mantap Infonya Kak !!

Terima kasih

Visit Back:
http://cyber-syndicate.blogspot.com

Trisna Amanah said...

terima kaisih infonya

Unknown said...

mantab nih share ilmu nya..
jangan lupa mampir tempat ku ya..

http://zakirbawono.blogspot.com

Anonymous said...

Mau tanya pak,saya pasang css untuk tread coment,saya cek berulang kali dikode normal saja, tetapi kenapa dihalaman home maupun posting selalu ada tanda --> dipojok kiri atas yang menganggu penampilan.kalau saya hapus css nya tanda --> hilang,tapi saya butuh kode itu untuk komen.Mohon bantuannya pak.Terima kasih

Unknown said...

wah edit template cukup ribet juga ya...
saya menggeser laman aja susahnya minta ampun nyari kodenya

Anonymous said...

Selama ini sering ngoprek html ternyata baru tau tentang bagian bagiannya seperti diterangkan diatas.
saat ini saya sedang bingung dengan jumlah tampilan label kategori, jumlah yang tampil tidak sama dengan jumlah yang semestinya, jd harus klik previous / older post. sudah saya set jumlah posting yg harusnya muncul tp tidak juga berhasil. mungkin perlu edit html untuk pengaturan jumlah posting yg tampil tp saya gag ngerti di sebelah mana. jd kadang jumlah posting yg muncul gag mesti sama, kadang byk kadang sedikit. mohon senior disini bisa bantu. terimakasih

Herlan Hamdan said...

Halo sobat, saya punya malasah di blog saya http://maccini2012.blogspot.com/ gambar dan judul blog di header tidak sejajar. Saya minta bantuannya ini. Terima kasih

Unknown said...

cakep nih tips edit template html seoga blogspot say tampilannya baik.

mbogo.net said...

Informasinya sangat bermanfaat sobat.Terima kasih ya.

Unknown said...

nambah pengetahuan gan terima kasih

ionebacero said...

template agan, banyak banget aksesorisnya, tapi tetap ringan, bisa minta tolong resepnya ? blog saya pake template standard blog, jika ditambahin sedikitt widget saja, ukurannya langsung lebih dari 100k, padahal file js sudah disimpan di google code, tetep saja berat.

Unknown said...

@Iwan: Oke, masuk list posting2 yang akan saya tulis. Akan segera saya share tips nya.

Saepul H said...

kak bisa minta copy edit htmlnya gx ?,ke shkoesplus@gmail.com

Unknown said...

Maksudnya bagaimana ya?

hidup bermanfaat said...

aswb. mas kok ketika saya nge-klik edit html, loading terus. saya tunggu-tunggu, dan masih loading, akhirnya saya tutup. apa penyebabnya ya? trimakasih infonya.

Unknown said...

Mas mohon maaf klo komentar sy berbeda dgn konteks yg dibahas. Bagaimana caranya membuat komentar facebook di blogger. Tks ( mohon dibalas ya mas )

Unknown said...

Halo, saya belum punya tutorialnya. tapi ke depan akan saya bahas.

jail said...

om azmi bisa tolong ajarin pendalaman!!!!!!!!!!!
minta fbnya

Unknown said...

@jail: https://www.facebook.com/azmi.survivor

Unknown said...

Terima kasih ya Pak saya lagi belajar nih manfaat banget.

Anonymous said...

Panduannya singkat, padat dan mantap! Thanks gan...

maxcorps.space said...

Salam kenal saya nubie abizz.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap