Memanfaatkan Google Chrome Untuk Desain Blog
Sunday, March 18, 2012 9:27 PM
Posted by Unknown
Ketika ngedesain tema-tema, biasanya aku ditemanin sama software Notepad++ dan Google Chrome. Notepad++ buat kodingnya dan Google chrome buat preview dan ngecek detail-detail kesalahan pada theme. Loh kok bisa? Emang, mungkin blum banyak orang yang tau kalo di Google Chrome ada fitur yang namanya "Inspect Element" atau kalo pake Chrome bahasa Indonesia nama fiturnya "Periksa Elemen". Kegunaannya bisa buat ngecek apakah koding css kita udah benar? mulai dari ngecek margin, padding dll. Dan yang bikin aku seneng pake fitur ini adalah melalui chrome kita bisa mengubah kesalahan tersebut dan langsung bisa di preview. Asik kan? Fitur satu ini bisa diakses dengan cara klik kanan di halaman sebuah website, trus pilih "Periksa Elemen". Untuk lebih jelasnya bakal aku share dibawah ini
Misal kasusnya aku lagi ngedesain tema yang aku pake ini. Tapi logonya ternyata terlalu ke tengah. Aku pengennya agak ke samping kiri, biar di tengah bisa ku isi sama yang lainnya. Nah gimana caranya?
Untuk memudahkan kita, mari gunakan fitur "Inspect Element" di Google Chrome. Seperti yang udah aku bilang tadi, cara pake nya dengan klik kanan trus pilih menu Inspect Element ato Periksa Element. Untuk kasus ini, karena yang bakal kita edit itu adalah gambarnya, maka pas klik kanan pointer mouse diarahkan ke gambar. Setelah itu tampilannya bakal jadi kayak gini:
Perhatikan tabel yang disebelah kanan, di bagian style. Nah, keliatan kan kalo ternyata margin-left buat gambar logo tadi ternyata 250px, pantesan jadi agak ke tengah. Buat ngeditnya tinggal klik dua kali pada tulisan 250px, abis itu kamu bisa ubah sesuai keinginan kamu, misalnya 0px biar logonya jadi kesamping banget. Harus diingat bahwa ketika mengedit elemen di Google Chrome, tampilannya cuma buat preview saat itu aja. Kalo mau perubahan yang permanen, ubah template blogger mu sesuai koding di Google Chrome tadi. Hasilnya kalo udah di ubah bakal kayak gini:
Simpel kan? buat kamu yang lagi belajar koding dan css, cara ini sangat direkomendasikan karena dengan ini kamu bakal tau gimana sebuah elemen pada halaman web itu ditampilkan browser dan apa aja kegunaan-kegunaan elemen tersebut. Tetep berkreasi ya!
This entry was posted on 9:27 PM, and is filed under
Blog,
Desain,
Google Chrome,
Template,
Zuzu
. Follow any responses to this post through RSS. You can leave a response, or trackback from your own site.
Subscribe to:
Post Comments (Atom)
-
Info Kontes Desain BlogKontes sekarang sudah memasuki sesi voting. Mohon partisipasi teman-teman buat ikutan vote blog yang menurut kamu punya desain bagus.
Silahkan vote disiniBeberapa nominasi
http://urangkurai.blogspot.com/
http://omague.com/
http://blogazinan.tkPopular Posts:
- Download Novel-Novel Indonesia Lama
- Mad Dog is Now a Mortal Kombat Character
- Tema Wordpress Kloningan Vecteezy.com
- 5 Game Keren yang Bakal Dirilis Tahun Ini
- Ulasan Game Dota 2
- Bikin Teks Mirip Lambang Kaskus
- Punya Blog, Sekian.
- Ulasan Game Kinect: Star Wars
- Apakah Twitter Melegalkan Format RT?
- Memanfaatkan Google Chrome Untuk Desain Blog
Tulisan Terbaru
March 18, 2012 at 11:06 PM
Untuk ngedit coding blogspot memang lebih simpel karena ngumpul jadi satu, tapi kalau platformnya wordpress pasti lebih ribet dikit karena letak kodenya terpisah2
Kalau ngedit blogspot saya seringnya mengandalkan perasaan saja...
March 18, 2012 at 11:10 PM
@marsudiyanto: iya, benar mas. Aku pernah dulu ngedit tema wordpress, emang lumayan ribet. Tapi tertata, gak kayak blogger, ngumpul jd satu tapi jadi susah dibedakan. hehehe
March 19, 2012 at 1:09 AM
kalau buat wp'ku aku bikin themanya sendiri atau thema buatan sendiri., jadi peletakan posisinya bisa di pas-pasin waktu membuatnya hehe,.
March 19, 2012 at 1:12 AM
oia lupa., kalau boleh saran penempatan link GA di bawah wenu tu rawan banned lho., mending di hapus aja., lagian Link tersebut kurang kliknya, soalnya harus dua kali klik baru ada earningnya., :D
March 19, 2012 at 3:42 AM
Saya sudah lama menggunakan Inspect Element pada google chrome untuk urusan desain blog, tapi terkadang saya juga memanfaatkan add on pada firefox yaitu firebug yg fungsinya hampir sama dengan Inspect Element,
March 19, 2012 at 5:50 AM
Wah jadi tambah ilmu ngedit template dengan google chrome dan notepad ++. Kalau dilihat dengan browser lain gimana sob? Apa juga terlihat indah. Percuma dong bagus di google chrome tapi acak2an di mozilla.
March 19, 2012 at 8:22 AM
Saya jarang mengedit CSS atau koding, sukanya pakai bawaan, karena memang kemampuan untuk edit koding atau CSS masih minim hehe
Terimakasih
March 19, 2012 at 8:49 AM
Selamat nduk, anda mendapatkan tali asih berupa sebuah buku dari Komandan BlogCamp Group.
Silahkan simak pengumumannya.
Salam hangat dari Surabaya
March 19, 2012 at 10:52 AM
your post is nice.. :)
keep share yaa, ^^
di tunggu postingan-postingan yang lainnya..
jangan lupa juga kunjungi website dunia bola kami..
terima kasih.. :)
March 19, 2012 at 11:37 AM
postingan yang sangat menarik :)
sangat bermanfaat.. ^_^
keep posting yaa..
ingin barang bekas lebih bermanfaat ?
kunjungi website kami, dan mari kita beramal bersama.. :)
March 19, 2012 at 1:18 PM
saya juga sering menggunakan fitur dari google chrome ini mas, sangat membantu sekali
March 19, 2012 at 5:02 PM
@djawa: Terimakasih sarannya mas. Kyaknya gak menyalahi peraturan Adsense, soalnya pada tempat yang berbeda backgroundnya. Tapi saya hapus aja, was-was sari sekarang. Hehehe
@Pakde Cholik: Terimakasih banyak pakde
March 19, 2012 at 10:07 PM
hehe tampilannya baru ya? tapi saya lebih senang pake notepad++ :D
March 20, 2012 at 7:08 AM
Di firefox juga ada inspect element-nya.
March 24, 2012 at 10:35 PM
Fungsinya sama seperti firebug di FF?