Sekolah Internet IndonesiaLazabot

Cara Edit Theme

Cara Edit Theme WordPress Dengan Firebug

cara edit themeAda banyak teman aku yang sangat ingin mengubah tampilan website atau blog miliknya dan bertanya bagaimana caranya mengedit theme wordpressnya.

Sebetulnya tampilan theme wordpress maupun website pada umumnya dapat diubah dari CSS style.
Pada WordPress cara edit theme adalah Login ke WP-admin lalu klik Appearance kemudian klik Editor. Selanjutnya cari file style.css dan buka file itu. Dari situ dapat dilakukan perubahan kode apa saja sesuai yang Anda inginkan.

Pertanyaannya: Bagaimana cara meng edit theme tanpa melakukan kesalahan? Jawabannya adalah: Menggunakan Firebug

Cara Edit Theme WordPress – Install Firebug

Firebug adalah sebuah tool untuk mengedit file CSS yang diintegrasikan sebagai Add-on pada browser Firefox. Firebug ini dapat Anda download FREE di: https://addons.mozilla.org/en-US/firefox/addon/firebug/

Setelah Firebug terinstall di browser Firefox, maka Anda akan melihat icon Kumbang (Firebug) pada toolbar seperti ini:
firebug

Yang aku perlu jelaskan disini adalah bahwa penggunaan Firebug hanyalah sebagai “percobaan” untuk melihat bagaimana hasilnya jika misalnya nanti kode di CSS sebuah website diubah. Jadi perubahannya dapat langsung tampak dihalaman yang sedang dilihat, sedangkan tampilan website aslinya sebetulnya tidak/belum berubah sama sekali. Untuk melakukan cara edit theme yang sesungguhnya tetap harus dikerjakan di Theme Editornya dengan mengedit file CSS Style.

Nah, sekarang kita coba berexperiment dengan website aku ini, yaitu: www.belajarinternetmarketings.com
Sengaja aku pakai websiteku sebagai “kelinci percobaan” agar supaya Anda tidak ragu untuk mencoba menggunakan Firebug ini.

Mengubah Tampilan Dengan Cara Edit Theme WordPress

1. Buka dulu website http://belajarinternetmarketings.com
2. Klik icon Firebug di toolbar disebelah kanan atas
Akan muncul box dibagian bawah halaman yang sedang Anda lihat.
Box ini berisi kode2 CSS yang ada di website www.belajarinternetmarketings.com
Bilamana kode CSS nya belum terlihat, klik CSS yang ada di toolbar Firebug ini.

Sekarang kita akan mulai ber eksperimen mengedit theme wordpress. Seperti yang tadi aku sarankan, maka didepan Anda sudah terpampang website belajarinternetmarketings.com yang indah sekali…. (caileeee…., NARSIS banget, hi, hi…..).

Pertama klik dulu icon Firebug di toolbar browser Anda. Setelah muncul kolom CSS dihalaman bawah, Anda akan melihat code seperti ini:

body {
background-color: #000066;
margin: 0 auto;
padding: 0;
}

Coba klik #000066 dan ganti code warnanya misalnya dengan #FF0000 maka warna backgroundnya yang tadinya biru akan berubah menjadi Merah. Atau ganti dengan #FFFFFF maka warna backgroundnya akan menjadi Putih.
Anda dapat memilih sendiri kode warna yang sesuai keinginan. Daftar code warna dapat dilihat di: http:html-color-codes.com

Kemudian misalnya Anda ingin mengganti ukuran dan warna judul website atau descriptionnya, maka cari code ini:

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover {
color: #FF0000 !important;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
text-decoration: none;
}

Silahkan ganti code warna #FF0000 (merah) dengan code warna lain, misalnya #0000FF (biru), maka warna text akan berubah menurut code warna yang diisikan.
Kalau ingin mengganti besar kecilnya hurufnya, ganti saja angka 36 dengan angka lainnya, maka ukuran huruf akan berubah menurut besar kecilnya angka yang dimasukkan.

Demikian juga Anda dapat mengganti ukuran dan warna text pada descriptionnya.
Caranya seperti diatas dan dapat Anda lakukan pada code ini:

.art-Logo-text, .art-Logo-text a {
color: #0000FF !important;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
margin: 50px 0 0;
padding: 0;
}

Dengan Cara Edit Theme WordPress ini Anda dapat melakukan experiment mengganti tampilan website Anda sendiri.
Setiap theme mempunyai code CSS sendiri dan mungkin berbeda dengan code yang Anda lihat di www.belajarinternetmarketings.com. Tapi pada dasarnya Cara Edit Theme ini dapat dipakai pada semua theme wordpress maupun theme lainnya seperti joomla, drupal bahkan pada website statis sekalipun.
Dan aku perlu ingatkan kembali bahwa perubahan yang Anda lakukan dengan Firebug ini sama sekali tidak mengubah website aslinya. Hanya untuk melihat bagaimana hasilnya jika misalnya code CSSnya diubah.

Oke. Anda catat dulu editing apa saja yang misalnya tadi sudah dilakukan pada website Anda sendiri, kemudian klik Refresh. Tampilan websitenya akan kembali seperti semula, 100% asli tanpa cela, tanpa noda.

Sekarang login ke Wp admin website Anda yang sudah diutak-atik tadi. Di dashboard wp admin buka Appearance, kemudian klik Editor. Setelah terbuka, cari dan buka file style.css.
Kemudian cari code2 yang sama dengan code yang tadi diedit dengan Firebug. Lakukan perubahan pada codenya sesuai dengan hasil percobaan tadi dan klik Update File.

Setelah filenya selesai di updated, buka kembali website Anda dan klik Refresh. Tunggu sampai proses refreshing selesai dan……. VOILA!
Website Anda sekarang sudah tampil dengan wajah baru.

Demikian cara edit theme yang dapat dilakukan dengan Firebug.

7 Responses to Cara Edit Theme

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Artikel Hari ini
Ebook Terlaris
Kaya Mendadak ala Master
 
Categories
Kaya Mendadak ala Master
 
AGCZON LUXURY - Profesional Amazon Script Machine  :
Keyword Research Tool