Panduan Cara Edit HTML Template Blog Terbaru

Tampilan Blogger pada bulan April ini sedikit dilakukan pembaharuan. Apabila kita masuk ke menu Edit HTML di Template Blogger, maka anda akan melihat tampilan pengeditan kode HTML,CSS, dan Javascript terbaru. Di dalam edit html kita akan melihat beberapa tombol tools baru seperti Back, Save Template, Jump To Widget, Edit Template, Preview Template, Format Template, Revert Change, Revert widget tempate to default, seperti pada gambar berikut :
tutorial template

Penjelasan mengenai masing-masing tools tersebut, mungkin telah anda ketahui.
Back                : berfungsi untuk kembali dan menutup halaman edit html.
Save Template : untuk melakukan penyimpanan editan template.
Jump to Widget : berfungsi untuk melihat sebuah widget yang berada pada header,sidebar,footer,atau post body.
Edit template   : akan selalu aktif apabila kita melakukan pengeditan.
Preview Template : Berfungsi untuk melihat hasil dari pengeditan langsung ke interface blog. Apabila pengeditan yang kita lakukan benar maka pada saat klik Preview tidak akan muncul pemberitahuan error.
Revert Changes      : Untuk memulihkan / mengembalikan / membersihkan pengeditan yang error kembali ke semula.
Revert Widget Template to Widget : Mengembalikan pengeditan template ke bentuk umum dari widget atau gadget blogger.

Di dalam menu edit html kita tidak melihat kode CSS tetapi hanya melihat kode HTML. Untuk melihat dan melkuakan pengeditan CSS maka kita harus melakukan klik tanda play button di kata <b:skin>. Maka anda akan melihat semua kode CSS yang anda gunakan.
edit kode css
data post body
Untuk menemukan data post body, kita juga harus mengklik tombol warna hitam seperti contoh pada gambar diatas. Atau anda juga bisa mengklik semua tombol tersebut, agar semua kode baik itu CSS, HTML, JQuery, Javascript dapat terlihat dan muncul semua.

Anda dapat melakukan pencarian kode dengan menekan tombol CTRL+F
Untuk mencari teks berdasarkan yang pernah diedit sebelumnya dapat menekan CTRL+SHIFT+F
Atau untuk mengganti, menemukan, dan mengganti semua kejadian sekaligus dapat menekan tombol CTRL+R

Template Blog pada menu EDIT HTML adalah sumber kode yang mengontrol tampilan blog anda. Semoga informasi tadi dapat bermanfaat dan membantu kamu dalam mengolah, melakukan design, memodifikasi tampilan blog menjadi lebih mudah. Dengan adanya baris nomor pada setiap elemen kode pada HTML akan sangat membantu kita apabila terjadi kesalahan sehingga mudah ditemukan.
Peningkatan template editor HTML sekarang telah mendukung penomoran baris, sintaks, auto-indentation dan kode folding untuk membuat dan mengedit template Anda jauh lebih mudah dari sebelumnya.

103 comments:

  1. wah ini gan..yang saya cari2....tadi pas mau ngerobah template kaget lah kog gini....kok beda.... :)

    ijinkan saya kopas yah mas...dengan sumber terlampir...

    ReplyDelete
    Replies
    1. wah bermanfaat banged gan...tampilan postingan blog ane dah ane rubah...maksih atas infonya gan ....

      Delete
    2. wah bermanfaat banged gan..tapilan postingan ane dah ane rubah...makasih gan....

      Delete
    3. ok gan, gapapa kalau mau copas asal jgn lebih dari 70%.
      :D

      Delete
  2. gan gimana cara menghapus icon obeng dan tang pada tampilan template baru ini saya bingung gan brubah kodenya

    ReplyDelete
    Replies
    1. caranya sama, klik tanda panah pada bagian < b: skin >
      terus cari kode ini ]] >

      nah letakkan kode menghilangkan obeng tang seperti biasa yg quickedit itu diatasnya..

      Delete
  3. gan gimana cara menghilangkan ico tang dan obeng di tmpilan baru ini,,,

    ReplyDelete
  4. gan gimana cra ngilangin icon obeng dan tang di tampilan blog baru ini...

    ReplyDelete
    Replies
    1. cari di kotak pencarian diatas mas, nanti anda akan menemukan artikelnya di dalam blog ini.

      Delete
  5. susah gan...

    benerin html.. gk tau codenya...

    salam : alungtoys.com

    ReplyDelete
    Replies
    1. semangat sobat.

      pertama kali saya msk ke dunia blogger, juga tidak bisa edit apapun dan kalau error saya panik. alhamdulilah setelah belajar memahaminya terus dalam stngh tahun saya sudah bisa.

      Delete
  6. met sore gan,kenapa edit HTML blog saya tidak muncul,kenapa ya?

    ReplyDelete
    Replies
    1. kok bisa tidak muncul ya mas. pas klik edit HTML isinya kosong gitu?
      mungkin koneksi mas lagi turun.

      ada kode errornya ga mas?

      Delete
    2. betul gan pas klik edit HTML isinya kosong,posisi kode erorrnya di mana ya?. tq ya gan

      Delete
    3. biasanya ada popup error muncul ga seperti bX_89107636 atau yg lainnya.

      kalau isinya kosong sama sekali, coba mas backup dulu templatenya nah terus mas ganti templatenya. lakukan cek apakah masih ilang juga atau tidak.

      Delete
  7. Replies
    1. tp yg baru juga lebih baik di security.. kalau yg lama enak pada saat ngeditnya.
      :)

      Delete
  8. Oh tadinya saya bingung mengeluarkan CSS-nya, ternyata b:skin-nya di klik dulu toh, makasih ya atas infonya mas:)

    ReplyDelete
    Replies
    1. oke deh mas farhan.
      semoga makin mudah yah dalam edit template. :)

      Delete
  9. mesti pelajari dan pahami lagi gan.. istilahnya move on la gitu.. but artikelnya nice gan..

    ReplyDelete
  10. Harus membiasakan diri dengan tampilan baru ini, He...
    Artikel yg bagus sob ! salam kenal buat semuanya.

    ReplyDelete
    Replies
    1. oke deh mas. agak ribet sedikit sih memang.
      hahahaha.

      Delete
  11. bagi saya ini malah makin membingungkan karena ctrl+F tidak berfungsi di sini

    ReplyDelete
    Replies
    1. berfungsi kok sob, gini kamu harus klik CTRL + F di dalam kotak pengeditan template. Nah, apabila muncul kotak pencarian didalamnya maka itu bisa digunakan.

      sedangkan kalau diluar kotak tersebut, itu tdk dapat digunakan.
      jadi sekrng apabla menekan ctrl + f akan muncul 2 kotak pencarian.
      selamat mencoba :)

      Delete
  12. Hay mas....gimana cara ngebuat link ke dalam sebuah halaman sih..q orang baru di sini..baru juga gabung tadi...jdi bingung...

    ReplyDelete
    Replies
    1. nih misalnya contohnya link yang ada di dlm postingan.
      Masuk ke bagian posting, nah disana kan ada toolbar gambar,dsb.
      blok dulu tulisan yang ingin diberi link terus
      klik yg gambar warna putih, namanya link.

      trus masukkan link yang dituju di tempat tersebut.

      Delete
  13. Thanks gan buat infonya numpang promote ya gan :)
    http://onlyreadourblog.blogspot.com/

    ReplyDelete
  14. waahhhh,ane juga bingung banget nih gan,,,,,

    ReplyDelete
  15. kalo mau hide css nya gimana gan?
    masi bingung sama yg baru :3

    starledge.blogspot.com
    numpang salam ya :)

    ReplyDelete
    Replies
    1. kalo dihide ya , tinggal keluar edit html terus masuk ladgi aja sob.
      hahahaha.

      Delete
  16. masih kagak ngerti saya dengan template terbaru ini..
    1. bayangin aja, masa kode umum saja yaitu : b:skin, head, body
    kagak nemu di kolom ctrl+f saya (terpaksa saya hapus kodenya yang lengkap, sebab tidak mendukung 'HTML Anda tidak bisa diterima : Tag tidak dibelohekan : HEAD).
    kagak mungkinkan template saya tidak mempunyai itu. dimana - mana setiap template paste punya kode itu,.
    trus sudah saya klik tanda panah hitamnya. masih tetap saja kagak nemu itu kode.
    2. bisa kagak mengembalikan template lama. ribet pake yang ini?

    mohon infonya :)

    ReplyDelete
    Replies
    1. waduhh permasalahan baru lagi nih sobat.
      maaf nih baru bls, soalnya banyak sekali permintaan pengeditan template.

      gini aja mas, mas klik tombol hitam semuanya, terus mas download lalu kirim ke email saya di mediashare8@gmail.com

      nanti akan saya periksa
      :)

      Delete
  17. kalo menurut Saya gampangan sebelumnya Mas.
    salam kenal Masbro dari Sidoarjo
    Jatim

    ReplyDelete
    Replies
    1. hahaha, mungkin belum terbiasa aja mas :D

      Delete
  18. udah membantu nih... makasih. sempat bungung...

    ReplyDelete
  19. Akhirnya Ketemu Juga Caranya. Trima Kasih Gan Atas Informasinya...

    Kunjungi Juga Blog Saya Gan : <a href='http://www.rumahherbal-pasutri.com/2013/03/obat-pembesar-penis-permanen-herbal-vimax-original-canada-male-virility-enhancement-dietary-suplement-alami.html

    ReplyDelete
  20. hem, mau nanya mas, kalau cara menemukan element outer wrapper gimana, soalnya sudah di cari menggunkan Ctrl+F gak ketemu juga!
    mahon bantunnya!

    ReplyDelete
    Replies
    1. diklik dulu sob tombol kecil warna hitamnya, biar semua kode terlihat baru dh dicari.

      terus tekan ctrl + f nya setelah klik elemen di dalam kotak edit html.

      Delete
  21. Gan kunjungin blog ane nih tkjlampung.blogspot.com

    ReplyDelete
  22. gan gimana caranya membuat atau menambahkan animasi pada blog saya biar terlihat keren
    mohon bantuanya

    ReplyDelete
    Replies
    1. memang animasinya mau ditaruh dimana sob?
      terus animasinya seperti apa, apa kartun atau banner.

      Delete
  23. Kunjungan perdama mas...
    Tampilan edit blog versi baru
    Tambah sulit, bingung sekali saya ... Hehehehee

    ReplyDelete
  24. mau tanya mas...:::
    Klo mau mengganti warna comentar Sosial Facebook
    bagaimana ya???

    ReplyDelete
    Replies
    1. kalau mengganti warna tulisannya, itu mungkin tidak bisa mas karena default dari facebook.
      mungkin kalau background dll baru bisa.

      Delete
  25. wah wah, ini nih yg sedang surya cari , Gan boleh saya Ctrl+C , trus di edit dan saya Ctrl+v di postingan saya dengan sumber ga?

    ReplyDelete
    Replies
    1. iya gan, makasih ya
      http://suryanjawa.blogspot.com/

      Delete
  26. kalo mau upload skin template gimana? dulu kan ada.. tinggal upload ya..?

    ReplyDelete
  27. Replies
    1. oke mas, segeera meluncur untuk melihat-lihat.
      ^^

      Delete
  28. Finally ketauan juga caranya,, thanks ya broo. :D
    kemaren kaya orang gaptek liat tampilan barunya hehe..

    Jgn lupa mampir juga ke blog ane :D

    ReplyDelete
    Replies
    1. iya semoga panduannya cukup bremanfaat.
      terimakasih telah berkunjung dan berkomentar.

      Delete
  29. boleh nanya? kalau mau masukin widget nah itu suruh ngeklik expand template widget, nah trus diklik yg mana dong ?

    ReplyDelete
    Replies
    1. boleh. Ohh kalau xpand widget template utk saat ini dan mungkin seterusnya itu sudah tidak ada.

      Jadi lebih mudah dan simple.

      Delete
  30. nice info gan
    http://mulitania.blogspot.com/

    ReplyDelete
  31. waduhhh rumitnyeeeeeeeeeeeeeeeeeeee

    ReplyDelete
  32. Matur Thank you Gan..
    Karena yang ane cari ketemu disini.
    Manfaat sekali.

    ReplyDelete
  33. Tengkyu mantap infonya.
    Saya sempat stress dengan model edit template yg baru ini. Akhirnya ketemu jawabannya di sini.
    Sebagai balasannya, saya sudah klik iklannya.

    ReplyDelete
    Replies
    1. Terimakasih banyak mas.
      Saya doakan semoga blog/website yang anda punya semakin sukses dan dimudahkan. :)

      Delete
  34. mas mau tanya , setelah mencopy tulisan kode,lalu saya klik mouse di kotak edit html kok gak ada pastenya
    minta pencerahannya?

    ReplyDelete
    Replies
    1. biar bisa mengedit template, klik EDIT TEMPLATE dulu mas.
      Baru deh bisa memasukkan kode apapun di dalam kotak edit html.

      Delete
  35. Thanks infonya gan, saya jadi gak bingung lagi deh :)
    (http://kbsdrama.blogspot.com/2013/05/fx-sajikan-musik-versi-aksutik-nu-abo.html)

    ReplyDelete
    Replies
    1. iya gan, semoga membantu yang sedang belajar membuat blog di blogspot.
      #CMIW!

      Delete
  36. wah terima kasih mas bro salam knl
    http://curahantangan.blogspot.com/

    ReplyDelete
  37. Replies
    1. jgn lupa pakai link sumber sob, kalau tidak saya akan laporkan ke google langsung.

      Delete
  38. mas tolong dong aku buat blog dgn html/ xml dari pihak ketiga. Masalahnya aku edit tuh url html setelah diedit terus aku cek url tersebut misal http://dta-alfurqon.blogspot.com/p/profil_27.html setelah masuk ke halaman url tersebut eh alamatnya berubah jadi http://dta-alfurqon.blogspot.com/p/p/profil_27.html timbul huruf p begitupun dengan halaman lain http://dta-alfurqon.blogspot.com/p/profil_27.html timbul lagi tuh huruf p nya jadi http://dta-alfurqon.blogspot.com/p/p/profil_27.html mohon pencerahannya dan tolong email ke karel_karela@yahoo.com

    ReplyDelete
    Replies
    1. setelah saya tinjau, tetapi saya tidak menemukan link dengan page tersebut.

      mungkin belum pasang dimenunya yah.

      Delete
  39. makasih gan, salam kenal ya and followback please..... :)
    aaw71.blogspot.com

    ReplyDelete
  40. ya ampun, ngepas banget sama situasi ane yg masih newbie.
    susahnya nyari kode ini .
    ada hal yg buat gw heran gan, pas ane mau nyari kode lg, kadang ketemu pas di reload browser ane, terus ga ketemu, eh ketemu lg. aneh dah.
    makasih gan infonya.

    blueisjack.blogspot.com
    mampir ke blog newbie ane :D

    ReplyDelete
    Replies
    1. ohh pas click edit html terkadang kodenya muncul kadang tidak yaa.

      Memang terkadang sperti itu sih mas.
      ^^

      Delete
  41. cara edit html gmn??

    biar menu blog saya g gitu2 aja,,biar bisa ada menu tab lain gitu
    mohon bimbinganya makasih sudtil.blogspot.com

    ReplyDelete
    Replies
    1. biar ada submenu lain, coba deh baca artikel Cara Membuat Menu Dropdown.
      cukup cari dan ketik di kotak search diatas.

      Delete
  42. thanks gan atas tambahan ilmu dri ente , sukses slalu gan

    ReplyDelete
  43. infonya sangat menarik gan,.. ane tunggu kunballnya yha gan
    Agen Bola
    jangan lupa mampir gan :D thank you.

    ReplyDelete
  44. Waduh pusing gan gk ngrti2 jg, q otak atik bolak balik edit tamplate
    gk bsa jg, pdhal q cma pngen ngrubah menunya dikit tp gk bisa2, gmna gan cranya yang lbh juelas lg maklum masih belajar....

    ReplyDelete
  45. jNGn lupA it-andiichwan.blogspot.com

    ReplyDelete
  46. nyimak aja gan,,, yang mau liat joged bayi lucu bang jali di sini http://www.youtube.com/watch?v=KkWdx4HZyRA

    ReplyDelete
  47. Gan Saya ada masalah ama post nya nih,jadi ketika nge-post,judul post nya itu kegedean jadi judul post nya gak keliatan semua,cara memperkecil nya gimana ya gan ?

    ReplyDelete
  48. kita juga punya nih artikel mengenai 'Editor', silahkan dikunjungi dan dibaca , berikut linknya
    http://repository.gunadarma.ac.id/bitstream/123456789/2339/1/02-01-013.pdf
    trimakasih
    semoga bermanfaat

    ReplyDelete
  49. lebih susah drpd yg dolo dah,, hihi,, karna udah lama gx edit2 sichh,,

    ReplyDelete
  50. gan kalo saya ganti template kok masih ada jejak dari template sebelum nya ya.. cara bersihinnya gmn ya gan?

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template