Modifikasi Template Dengan Google Chrome


Sekarang akan saya bagikan beberapa trik dan tips bagi Anda yang gemar mengotak-atik tampilan template blog dengan menggunakan bantuan Google Chrome. Cara ini terbilang cukup rumit namun jika sudah menguasainya saya yakin Anda akan selalu gonta-ganti penampilan tanpa bongkar pasang template. Adapun beberapa item yang dapat Anda atur dan sesuaikan dengan selera Anda diantaranya adalah lebar body, sidebar, header , footer , warna, jenis font dan masih banyak lagi sampai tidak sabar saya ingin memulai membagi tips ini.

Persiapan pertama yang harus Anda lakukan adalah dengan mengatur posisi duduk dan sediakan makanan ringan jika ada. Setelah itu kalau belum punya browser Google Chrome silahkan download terlebih dahulu. Jika sudah silahkan ikuti langkah pokok dibawah ini :

#Login blogger.com menggunakan browser google chrome
#Klik menu Rancangan-->Edit HTML-->Ceklist kotak
#Klik Tulisan Download Template Lengkap mana tahu Anda menginginkan tampilan template seperti semula. Saya yakin Anda sudah mahir dalam hal ini.

Setelah itu buka blog Anda pada New Tab, biarkan proses loading sampai selesai.
Sekarang saya beri contoh bagaimana merubah warna tulisan pada sidebar

Perhatikan warna teks pada gambar disamping adalah warna sebelum saya modif.









Masih pada browser google chrome, klik kanan teks yang ingin dirubah warnanya,kemudian klik Inspect element, saya contohkan tampilannya seperti ini











Setelah itu akan muncul menu pop up Developer Tools, dan perhatikan dengan seksama bagian yang ada dalam kotak merah.
Pada kolom sebelah kiri Anda adalah bagian dari beberapa elemen yang menyusun template Anda. Sedangkan pada bagian dalam kotak merah sebelah kanan adalah elemen yang Anda klik kanan tadi, lihat gambar kedua dari atas.

Sekarang kebagian intinya.
Perhatikan Kotak merah sebelah kanan saja!

Jika Anda menginginkan warna teks sidebar tersebut diganti menjadi warna putih, silahkan cari tulisan (lihat dalam kotak sebelah kanan)  #sidebar-wrapper a { pada menu Edit html dan ganti kode #00f menjadi #fff, namun sebagai percobaan sementara bisa juga hilangkan ceklist tersebut dan lihat perubahan sementara pada blog. Jika sesuai dengan petunjuk maka hasilnya akan seperti ini :

Sebenarnya terlalu rumit bila dijelaskan dengan tulisan namun jika Anda sudah paham, akan sangat menyenangkan sekali dapat memodifikasi template blog sendiri. Sebab selain contoh diatas, cara meringankan beban blog sampai mencuri kode script blog lain juga bisa dengan cara ini dan akan saya bahas pada postingan berikutnya.

Semoga menambah wawasan kita, Salam..

18 komentar:

Belantara Indonesia mengatakan...

kalo anu mas...kalo di google chrome kan icon url address biar dah di ganti, tetep yg muncul icon B nya blogspot..ada gak cara agar icon tetep sama ..ga icon Blogspot?.

[Reply]
bugie mengatakan...

maaf mas adit telat balasnya, setahu saya kalau domain hasil custom domain dari blogger akan selalu muncul favicon bawaanya di google chrome, sebab kita hanya bisa menambah favicon / icon url yang kita kehendaki tanpa dapat menhapus favicon bawaannya. Kalau ga percaya coba mas cari favicon blogger di menu edit html, sampai pusernya bodong pasti ga bakalan ketemu hehehe..tapi lihat nanti mas mana tahu ada solusinya, suwun wis koment :)

[Reply]
Belantara Indonesia mengatakan...

jadilah yg pertama bikin solusi dan tutorial gtu mas bugie, di jamin hebat...ga kayak tetangga, artikel agama melulu dgn harapan visitor meningkat dan alexa surut...behahhahahhaha...

[Reply]
bugie mengatakan...

hahahaha...saya tahu siapa yang mas adit maksudkan, mudah2an mas, namun lagi-lagi dengan
Berbekal ilmu seadanya, mencoba menyajikan informasi ala kadarnya hakhakhak... tak usahain<span></span>

[Reply]
agoest mengatakan...

mas mau tanya..jujur kalau soal kode-kode template aku nggak ngerti apa-apa...
jadi yang selama ini aku lakukkan cuman melihat-lihat dan copypaste ke template sekiranya ada elemen yang belum ada di tempatku....
karena aku belajar blog juga autodidak,seng penting iso ngono wae..maklum wong ndeso mas...

yang amu aku tanyakan sebenarnya sudah jamak terdapat di html para master,cuman fungsi dan kegunaannnya aku belum faham,..kebetulan ini saya ambil dari blog sampean..:

[Reply]
agoest mengatakan...

yo anggak usah mendetail bangetlah mas.minimal aku ada penjelasan tentang fungsi meta tag tersebut,matursuwun atas bantuannya...mau tanya ke orang lain malu...takut keliahatan goblognya..ha..tapi lek ambek bolo dewe kan gak isin...

[Reply]
Belantara Indonesia mengatakan...

yo gak nyinggung banget2 sih mas..mung ga pas aja buat agama ku, Islam...tar mlh ikut debat kan ga etis aku...kwkwkwkwk...makanya yg adem2 aja ku liat ..kayak mas bugie sama mas aRiA...halah...

[Reply]
bugie mengatakan...

Saya coba jawab semampunya mas, sebenarnya tidak semua yang mas lihat dengan menggunakan tombol CTRL+U itu ada pada menu edit html blog bersangkutan, ada beberapa yang dilebihkan ada juga yg dikurangi sebab itu menyangkut hak cipta blogger itu sendiri. Mengenai fungsi dan kegunaan tag meta yg sampyan tulis ning nduwur kae aku ndisit oleh wejangan karo guruku mas. Dadi jare guruku mau fungsine koyo ngene..

<span></span>  : gunane ben google ngerti nek blog mau kuwi asal blogger bkn wordpress atau dll
: search engine ning jagad maya ki okeh mas, dadi mung ora google tok sing dinggo, dadi ben ke indeks kabeh ning berbagai SE yo pasang tag iki

[Reply]
bugie mengatakan...

  : nek iki tag khusu kanggo google ben mlebu ning SERP hihihi
  : iki khusus ben mlebu SE Bing
: iki khusus ben mlebu SE Yahoo
  : nek sing siji iki ben laba-laba perayap google moco isi tulisan blog kabeh, dadi mung ora judule tok nanging tembolok utowo sak liya-liyane melu ke woco
: nah iki sing nggawe postingan anyar cepet kewoco google.
Kurang lebih begitu mas, kalau ada yg kurang dimengerti jangan kasih tahu saya mas sebab itu memang konsumsi pribadi, tapi nek wonge dewe ga oleh podo2 njajah tapi rangkulan ae yo.suwun..

[Reply]
bugie mengatakan...

bravo buat mas adit, aku setuju :)

[Reply]
Hendri mengatakan...

Bermanfaat sekali artikelnya..

Makasih dah berbagi

http://www.bloghendri.com

[Reply]
s2self mengatakan...

assalammualaikum, saya udah dapat caranya mas,  
gini.  
pake ini aja mas.

tepat di atas kode tambahkan 2 bari kode ini ...

  
 


tepatnya jadi seperti ini ...


  
 




saya udah coba, di google chrome maupun di mozilla firefox berfungsi.  
moga bisa membantu. salam kenal.

wassalam ...

[Reply]
Frogyfurnetal mengatakan...

tip menarik gan,....banner dan link dan dipajang diblog saya, mohon dicek. terima kasih atas kerjasamanya!

http://www.frogyfurnetal.co.cc/p/tukar-link.html

[Reply]
SuryaPost.com mengatakan...

saya dah follow gan, follow back ya..thx

[Reply]
chukie_chukie mengatakan...

klo sudah kita EDIT cara nge-SAVEnya gmn kang bro??

[Reply]
Mas Bugie mengatakan...

@chukie_chukie : fasilitas ini hanya digunakan sebagai pratayang apabila kita hendak mengedit sebuah template, apabila ingin merubah beberapa kode pada template tetap masuk pada menu edit html mas bro, suwun

Hendra Thea mengatakan...

pake opera juga bisa mas... apalagi untuk mengatur ukuran margin dan padding, mudah banget. (JUST ANOTHER BLOGWALKER)http://www.hends25.blogspot.com#link

[Reply]
Mas Bugie mengatakan...

@Hendra Thea : info yang sangat berguna untuk saya, makasih masbro sudah berkunjung



 

Mas Bugie [dot] com Copyright © 2010-2013 All Rights Reserved

Powered by Blogger