Cara Mengedit Template Blog

Cara merubah atau mengedit template Blog

Tips ini saya tuliskan dengan tujuan agar sahabat yang mengalami kesulitan dalam menata blog / web nya bisa ter atasi. Cara ini bisa pula dijadikan dasar untuk mulai membuat atau mendesain template sendiri.

Saya katakan aman , karena proses utak-atiknya tidak akan mengganggu web kita yg sedang online.

Dan saya katakan mudah karena kita cukup hanya “Mencontek” dari template yang sudah ada.

Cara pertama bisa dengan menggunakan tool “XAMPP” yg cara peng aktifan nya bisa lihat di Cara instal Xampp

Cara kedua : Kita hanya menggunakan tool seadanya ( Yg ada di komputer kita )
Yaitu :
1. Browser Mozilla Firefox
2. Microsoft Paint
3. Microsoft Office Picture Manager
4. Template Blog dengan CMS Blogspot/themes wordpress.org
5. Notepad/microsoft Frontpage

Nah..yg kita bahas adalah cara yg kedua ini ya

Langkah pertama :
1. Buka web/blog kita yang mau di edit tampilan Layout (Themes/template ) nya
2. Cari web lain yang menurut kita bagus, atau yg ingin kita tiru tampilannya . Atau bisa juga dengan mendownload nya

Langkah Kedua :
1. Di halaman website kita , klik Tab ” File” di browser mozilla ,

2. Klik “Save as” dan simpan dengan nama terserah anda misalnya kita simpan dengan nama “Webku-edit” . Lalu web orang lain juga disimpan (Save as) dengan nama misalnya “Webcontoh-edit” (tanpa tanda petik”)

3. Simpan di folder di hardisk kita,

Lakukan hal yg sama dengan halaman web yg akan ditiru

4. Setelah di save as , maka akan tersimpan satu file ber ekstensi HTML (file HTML) dan satu folder yang isinya adalah semua yang dibutuhkan oleh “layout bayangan” (Folder isi )web kita agar bisa dibuka di browser

5. Kemudian klik dua kali file ber ekstensi HTML agar bisa terbuka di browser . maka “layout bayangan” web kita akan tampil sama persis dengan web asli nya.

Jika kita sedang online , maka semua nya akan tampil sempurna. Tapi jika tidak online ,maka ada beberapa image yang tidak akan muncul.
Solusinya , coba kita copy image yang ada di themes kita ke dalam folder
(Folder isi ) .

6. Kemudian untuk memulai mengedit nya . Kita klik kanan “File HTML ” tadi lalu klik “edit” , atau bisa juga dengan Klik kanan + Open with : pilih dengan notepad atau dengan MS front page.

PS : jadi file HTML ini kita buka dua kali , yaitu dibuka dengan browser mozilla agar bisa terlihat tampilan aslinya , dan juga dibuka dengan Notepad /frontpage , agar bisa di edit.

Untuk merubah dan menggeser misalnya lebar sidebar ,lebar postingan , footer , header dll , maka kita buka file style.css yang ada di (Folder isi) , yg tadi ter download.

Bandingkan dengan tampilan yg ada di web yg ingin kita tiru , baik itu file HTML nya , dan juga file style.css nya.

Catatan : Jika dihalaman web kita ada iklan adsense nya , maka ubahlah dulu angka pub id nya dengan huruf xxxxxx
contoh : PUB -ID : xxxxxxxxxx

Nah… sekarang saat nya kita coba2 untuk merubah atau mengedit , plus sekalian belajar men desain web dengan cara yang sederhana.

Sacara umum , template/themes itu biasanya terbagi menjadi :
Bagian keseluruhan halaman
Bagian Header
Bagian Sidebar
Bagian Body artikel
Bagian Footer

Untuk keseluruhan halaman , pengaturannya akan ditandai dengan awalan :
body
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #body atau .body

Untuk Header , pengaturannya akan ditandai dengan awalan :
header
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #header atau .header

Untuk Sidebar pengaturannya akan ditandai dengan awalan :
sidebar
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #sidebar atau .sidebar

Untuk Body artikel pengaturannya akan ditandai dengan awalan :
post atau kadang content
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #post atau .post

Untuk Footer pengaturannya akan ditandai dengan awalan :
footer
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #footer atau .footer

Untuk Tab Navigasi… ini optional , tapi kadang kita perlukan.
nah Untuk Navigasi , pengaturannya akan ditandai dengan awalan :
navigaton atau kadang menu
dan didepannya biasanya ada tanda ‘#’ atau . (titik)
contoh #navigaton atau .navigaton

Oke..itu dasar2 yg ada di themes/template kita…

Sekarang kita bahas struktur kode2 nya
Untuk Themes yg ada di wordpress.org (domain berbayar) sebenarnya lebih mudah , karena biasanya sruktur antara body, header,sidebar,post,dan footer , dan style.css semua nya dipisah

Yang agak sulit di blogspot , karena semua struktur file dijadikan satu halaman. yakni sbb :

<?xml version=”1.0″ encoding=”UTF-8″ ?>
………………………….dst..dst…
(disini tempat keterangan asal CMS)

<head>
……..disini berisi title blog dengan meta tag sllnya
<b:skin><![CDATA[/*

—————————-
Keterangan sipembuat template

______————————–

lalu dibawah nya ini terdapat STYLE.CSS
yang mengatur bagaiana tampilan halaman blog
s/d kode
</head>

nah..lalu isi dari halaman akan diberikan dengan diawali setelah tanda :
<body>

header
navigasi/menu
post
sidebar
footer
dll

dan diakhiri dengan tag
<body>
lalu ditutup halamannya dengan :
</html>

Itu gambaran sekilas struktur blogspot

Sedangkan di themes wordpress.org.
Semua nya dipisah di tiga bagian utama yaitu :
Header ,Sidebar , footer ,
dan semua nya akan di kumpulkan di page.php dan di indeks.php

sedangkan pengaturan layoutnya akan dikerjakan di style.css

Demikian cara sederhana yang dapat kita lakukan , dengan harapan jika ada yang ingin merubah tampilan dengan cepat dan mandiri bisa terlaksana dengan mudah.

PS : Saya bukan ahli di bidang ini , yg saya tuliskan diatas adalah cuma pengalaman saya saja dalam rangka mengedit tampilan web saya.

JIka ada yg ingin menambahakan atau ditanyakan silahkan di tempat ini ,

semoga bermanfaat

Update Cara Merubah Layout halaman web : 12 Agustus 2010
Atas pertanyaan dari mas wiradynamic di kolom komentar  , maka saya perlu memberikan rincian agar bisa dijadikan studi kasus bagi saya pribadi dan juga mungkin buat pengunjung yang mengalami hal serupa.
Hal pertama yang saya lakukan pada webnya mas wiradynamic, adalah men save Page as, dan menyimpan nya di hardisk komputer saya.
Lalu saya melihat hasil simpanan file web tsb, dan membuka file html,satu saya buka dengan notepad dan satu lagi dengan mozilla firefox. Di notepad saya melihat kalau style.css nya dipanggil dengan cara @import. Artinya saya harus mendownload lagi file style.css web nya wiradynamic, dan menyimpannya di folder download.Lalu merubah url importnya yg tadinya begini :

@import “http://wm-site.com/wp-content/themes/arclite/style.css”; @import “http://wm-site.com/wp-content/themes/arclite/options/side-green.css”;

menjadi begini :

<style type=”text/css”> @import “file:///G:/DesainwebAgustus2010/wm-site_files/style.css”; @import “file:///G:/DesainwebAgustus2010/wm-site_files/side-green.css”;

Setelah perubahan dilakukan, maka tahap pengeditan siap dilakukan. Karena mas wiradynamic ingin mengedit sidebar, maka saya mencari lewat source code html ( Klik kanan halaman web dan klik View Page Source). Pada salah satu sidebarnya ada judul widget “Feature post”, nah saya telusuri widget tsb dan mendapati bahwa Feature post ada didalam pengaturan <ul id=”sidebar”> dan juga didalam pengaturan pada <div class=”box”> Maka saya perlu merubah besaran pada pengaturan kedua hal tsb.

Dan inilah yang saya rubah : (buka style.css pada dashboard wp)

di bagian css sidebar yg awalnya begini :
#sidebar, #sidebar-secondary
{ padding: 2em 1em; margin: 0; }

menjadi seperti ini :
#sidebar, #sidebar-secondary

{ padding: 2em .1em; margin: 0; }

dan dibagian css box yg awalnya begini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 8px 12px;
margin: 2em 0 1em;
}

menjadi seperti ini :
.box{
background: transparent url(images/box-shadow.png) no-repeat bottom right;
padding: 2px 2px;
margin: .5em 0 .5em;
}

dan juga mnerubah pada bagian ini :

.box .the-content{
padding: .4em 1em .6em 1em;
min-height:92px;
height:auto !important;
height:64px; /* ie 6 fix */
min-width: 64px;
}
menjadi seperti ini :
.box .the-content{
padding: .4em 1em .6em .4em;
min-height:92px;
height:auto !important;
height:64px;            /* ie 6 fix */
min-width: 64px;
}

Catatan : Perubahan yang saya lakukan saya tandai dengan huruf merah pada kode2 diatas.

Nah silahkan untuk mas wiradynamic untuk mencoba nya sendiri yah..
Kemudian, yang perlu juga mungkin dilakukan, pada saat memasukkan kode2 html di widget, sebaiknya gunakan tag center diawal dan diakhir code, agar widget image bisa tampil ditengah2 kolom sidebar. Contoh penulisannya  seperti ini :

<center> kode2 html banner atau javascript disini </center>

Semoga membantu yah
Salam
Bahrul Ulum

Tagline :

• cara edit website
• contoh html yang sudah jadi
• cara menata blog
• cara mengedit halaman blog
• mengedit tampilan blogspot
• edit halaman blog
• contoh halaman web
• cara mengedit website
• cara edit web
• contoh halaman blog
• cara edit halaman web
• cara edit halaman blog
• edit tampilan blog
• membuat tampilan web dengan php
• cara mengedit halaman web
• cara merubah tampilan website
• cara mengedit blog yang bagus
• cara edit tampilan blog
• cara edit layout blog
• cara edit file html
• cara membuat tampilan web dengan php
• cara merubah website
• cara mengedit tampilan web
• cara merubah halaman blog
• cara mengedit web
• cara mengganti layout mozilla
• cara merubah tampilan web
• edit tampilan blogspot
• cara edit mozilla
• contoh halaman website
• cara mengedit tampilan blog
• cara ganti layout blog
• mengedit halaman blog
• contoh layout blog
• cara mengedit blog yang sudah jadi
• cara ngedit blog
• cara merubah web
• contoh header web
• cara merubah tampilan blog
• cara mengatur tampilan mozilla
• EDIT HALAMAN BLOGSPOT
• edit tampilan mozilla
• contoh web design yang sudah jadi
• membuat tampilan web dengan CSS
• ganti layout mozilla
• edit tampilan wordpress
• cara mengganti background website
• cara buat tampilan html
• Cara edit tampilan website
• cara membuat tampilan blog yang bagus
• mengatur tampilan mozilla
• cara mengubah halaman blog
• cara merubah isi website
• cara mengedit blog
• cara mengatur halaman blog
• contoh header website
• cara mengedit tampilan blogger
• contoh halaman web sederhana
• cara membuat web dengan notepad
• cara edit tampilan web
• cara edit blog yang bagus
• edit halaman web
• merubah halaman blog
• merubah tampilan web
• contoh sidebar
• cara mengubah tampilan website
• cara mengubah tampilan web
• cara mengganti background web
• cara edit halaman blogger
• CARA DESAIN WEB DENGAN PHP
• cara edit halaman wordpress
• cara edit laman blogger
• mengedit mozilla
• edit tampilan website
• membuka file html
• cara penataan webs yang bagus
• cara mengganti tampilan web
• cara mengedit halaman wordpress
• cara merubah background web
• cara mengedit css
• cara menata blogspot
• layout halaman web
• edit tampilan web
• membuat halaman web dengan php
• menata tampilan blog
• mengedit tampilan website
• cara merubah css
• cara penataan website yang bagus
• contoh coding html
• cara edit laman blog
• cara ganti background web
• cara membuat layout web
• cara membuat halaman web dengan css
• CARA MENATA LAYOUT BLOG
• cara edit tampilan wordpress
• cara edit halaman blogspot
• edit halaman blogger
• mengedit halaman di blog
• cara mengedit web yang sudah jadi
• cara mengubah ukuran blog

 

Technorati Tags: Template,CMS,Blogger