Panduan cara membuat blog

Cara modifikasi tampilan blogdetik

27 Oct 2014 - 20:24 WIB

Cara mudah memodifikasi theme atau tampilan blogdetik jadi lebih cantik.

Suka ngeblog di blog gratisan? Haha.. Sama! Ngeblog gratisan itu seru, ngga ribet and ngga keluar duit. Tul kan? Khusus buat temen-temen and adik-adik yang punya blog di blogdetik, pasti suka pusing pilih-pilih theme ya? Pasti banyak yang angkat tangan.. iyaaa…”

Memang ada cukup lumayan banyak sih pilihan theme blogdetik, cuma dari dulu itu- ituuuuu terus ngga nambah-nambah hehe.. (buat admin blogdetik, jangan di banned yah.. xixi). Itu dia yang suka bikin bingung karena ngga sreg dengan pilihan theme. Theme yang ini font nya cocok, tapi sidebarnya kurang lebar. Theme yang itu ada slidernya, suka banget, eh tapi kok warna backgroundnya terlalu rame.. wah-wah piye iki..”

Nah kalau temen-temen ada yang ngerasain hal-hal seperti itu, dont worry! Saya mau bagi-bagi pengalaman mengutak atik tampilan theme di blogdetik. Mau? Tapi ada syaratnya, apa itu.., ya kita musti tahu sedikit-sedikit lah tentang CSS. Ngga usah khawatir, gampang koq.

OK deh kalau begitu. Nda usah banyak cerita, Begini caranya :

INSTALL DULU FIREBUG di BROWSER MOZILLA (Kalau browser lain, barangkali ada juga tools untuk “inspect element”. Coba saja klik kanan dan lihat menu yang ada tulisan inspect element)

  1. Pilih theme di blogdetik yang kamu paling suka. Kalau masih ada bagian-bagian yang kurang sreg di hati, ya nggak papa, justru itu yang mau kita obrak abrik.. haha. Maksudnya mau diutak atik ya.
  2. Kalau udah dapet theme favoritnya. Perhatikan apa yang mau diubah.
  3. Ambil file CSS dari theme favorit kamu. Caranya gunakan adds-on mozilla “firebug”.
  4. Cara install firebug : buka browser Mozilla -> Pilih menu Tools -> Pilih Submenu Ads-on, akan terbuka jendela baru mozilla, gunakan kolom search disitu, ketikkan “firebug”. Kalau sudah muncul, klik install.

AMBIL FILE CSS THEME FAVORIT KAMU.

  1. Klik kanan browser Mozilla, pilih menu “view page source”. Maka akan terbuka halaman baru dengan barisan kode-kode HTML. Cari dan klik file CSS nya, seperti ini image dibawah ini. File CSS utamanya “style.css”. Klik link warna biru yang menunjuk file “style.css”. Akan terbuka jendela baru yang memperlihatkan susunan kode-kode CSS.
    cara-modifikasi-theme-blogdetik-2
  2. Select All kode-kode CSS lalu copy, dan paste di notepad. Kalau bisa pakai notepad++. Download dan install notepad++ DISINI. Pakai notepad++ pengeditan jadi lebih mudah dan tampilannya lebih jelas dan rapi dibanding notepad biasa.
  3. Setelah kode CSS di paste di notepad++, simpan filenya dengan ekstensi .css yah.

PILIH BAGIAN MANA DARI THEME KAMU YANG MAU DIEDIT.

  1. Klik kanan di browser mozilla, pilih menu paling bawah yaitu “inspect element with firebug“.
  2. cara-modifikasi-theme-blogdetik-1

  3. Klik tanda panah di ujung kiri jendela firebug untuk menunjuk bagian yang ingin dirubah/diedit CSSnya.
  4. cara-modifikasi-theme-blogdetik-3
  5. Lihat image diatas. Nomor 1 di klik, lalu klik bagian yang mau diedit. Pada ilustrasi di atas saya mau mengganti ukuran dan warna judul artikel, jadi saya klik judul artikel (nomor 2). Sesaat setelah judul di klik, akan muncul di sisi sebelah kanan kode CSS yang mengatur segala hal tentang judul artikel itu (lihat nomor 3). Color bisa diganti dengan kode warna lain yang kita inginkan. begitu juga font-size (ukuran huruf).
  6. Untuk mendapatkan kode warna, bisa search di google. Kalau kamu ada photoshop, buka saja dan cari kode warna disitu.
  7. Sesaat setelah kode disamping kanan, bagian yang kita edit akan berubah. Jika sudah sesuai, perhatikan baris dari kode-kode itu pada baris berapa, Perhatikan image dibawah ini ya :
  8. cara-modifikasi-theme-blogdetik-4Kode CSS yang kita tuju ada di baris 547 ya..
  9. Nah, tadi kan kita sudah simpan semua kode CSS nya. Buka file CSS dengan Notepad++.
  10. Tekan CTRL+G, ketikkan nomor barisnya 547. Disitulah letak kode-kode CSS aslinya, sesuaikan dengan perubahan tadi. lalu simpan.
  11. Upload file style.CSS yang telah diedit tadi ke layanan penyimpanan online gratis. lalu copy URL file style.css nya.
  12. Atau

Aduh capek sekali nih, sorry sob… ternyata rieweh juga jelasinnya mengantuk berat nih, terusin besok yah..

Bersambung….


TAGS   edit theme blogdetik /


Comment

Author

Recent Post

Recent Comments

Archive