Belajar membuat template akan kita lanjutkan setelah saya istirahat beberapa lamanya hehe… , maklum…masih ada yang diurus agar “Dapur” ngebullll . :D .
Baiklah sekarang mari kita lanjutkan dengan terlebih dulu baca doa agar diberi kemudahan dalam memahami ilmu . Untuk sekedar mengingat , di pelajaran membuat template bagian pertama , terakhir kita sudah sampai pada pembuatan template ke empat yang kita kasih nama : template-pertamaSTEP4.html
Di situ kita sudah mulai menambahkan pengaturan posisi dengan tag kode float:left
Sebagai pembanding , anda bisa membuka kode-kode template hasil praktek anda , dengan yang saya buat disini sebagai berikut :
template-pertamaSTEP1
template-pertamaSTEP2
template-pertamaSTEP3
template-pertamaSTEP4
template-pertamaSTEP5
Catatan : Saya sengaja membuat template-pertamaSTEP5 , setelah ada perubahan pada panambahan kode float:left yang ada di template-pertamaSTEP4 . Ini sengaja saya buat satu file baru untuk memudahkan saya dalam memahami pembuatan template.
Catatan 2 : Sebaiknya buka masing-masing file di tab jendela baru , agar kita bisa melihat perbedaan dari setiap tahapan pembuatan template.
Catatan 3 : Anda bisa menyimpan kode yang ada dihalaman yang anda buka , dengan cara : klik File pada tab mozila, lalu klik save page as,simpan di komputer anda. Nanti hasil download file tersebut buka dengan cara klik kanan pada file hasil download, lalu klik open with mozilla .
Oke ya kita Lanjuuuttttt…..
Di file template-pertamaSTEP5 , jika anda buka di browser , posisi sidebar sudah bergeser kekanan , sesuai dengan yang kita inginkan. (dari rencana layout blog )
Tapi Sidebar-kanan dan sidebar kiri masih numpuk atas bawah. Nah …, mari buka lagi notepad baru , dan copas semua kode yang ada di template-pertamaSTEP5 , dan coba tambahkan lagi kode float:left di bagian CSS pengaturan sidebar , tepatnya di #ruang-Sidebar-kanan dan #ruang-Sidebar-kiri
Sehingga setelah ditambahkan akan menjadi seperti ini :
#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;
background:#bbc;
padding:3px;
float:left
}
#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;
background:#ccd;
padding:3px;
float:left
}
Save as lagi dengan nama template-pertamaSTEP6.html
Kemudian buka template-pertamaSTEP6 di browser , bagaimana hasilnya ???
Sudah pindah mas..tapi kok ya Sidebar-kanan adanya di kiri dan Sidebar kiri adanya di kanan? :D
Nahhh…. Mari kita bahas masalah ini …
Sebenarnya kita bisa saja merubah #ruang-Sidebar-kanan dengan memberikan kode float nya : float:right
Tapi karena saya ingin supaya kita lebih memahami struktur template , maka sengaja saya kasih kode dengan float:left
Ketika kita mengatur semua posisi dengan float left , maka secara otomatis layout yang ada di bagian teratas akan lebih dulu menempati posisi di sebelah kiri . Mari kita melihat lagi struktur pada bagian ISI ( kalau saya bilang isi, berarti itu adalah yang ada di bagian setelah tag <body”> dengan </body”> ) khususnya sidebar sebagai berikut : :
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>
Disitu kita lihat bahwa saya menempatkan sidebar kanan berada diatas sidebar kiri . Jadi jelas si CSS akan mengutamakan sidebar kanan agar menempati posisi kiri . Begitu juga sebaliknya Jikalau kita mengatur kedua nya dengan float:right , maka sidebar kanan pun akan langsung menempati posisi ke kanan. Untuk saya, saya lebih suka merubah posisi ISI sidebar kiri diatas sidebar kanan .
Anda bisa melihat contoh nya disini : template-pertamaSTEP6.html
Sampai disini mudah-mudah anda kita bisa memahami soal floating ini ya …? . Jika sudah paham ,nantinya anda bisa saja misalnya menempatkan Kotak posting disebelah kanan, dan Kotak sidebar disebelah kiri halaman….. di coba2 aja dahhhhh
Catatan : di template-pertamaSTEP6 ini saya sudah menambahkan pengaturan margin:2px; , agar masing-masing bagian sedikit agak terpisah.
Di templatetahap6 ini, kalau kita perhatikan , bagian footernya ,seperti menghilang dilindas oleh sidebar, untuk itu saya menambahkan kode : Overflow:hidden; pada css :
#tembok-utama ,
#kotak-posting dan dibagian
#ruang-Sidebar
Contoh realnya bisa anda lihat disini : template-pertamaSTEP7.html . Silahkan dibandingkan perbedaanya dengan template6.
Sedangkan di template-pertamaSTEP8.html , saya mengatur lebar Kotak posting dan kotak sidebar agar terlihat rapih, yaitu :
memperkecil lebar #kotakblog menjadi: 930px
memperbesar #ruang-Sidebar menjadi 395px
Memperlebar #ruang-Sidebar-top-besar menjadi 385px
Memperlebar #ruang-Sidebar-kanan menjadi 185px
Memperlebar #ruang-Sidebar-kiri menjadi 186px
Memperlebar #isi-Posting menjadi 485px
Di template tahap8 ini saya juga membuat posisi body template menjadi center dengan merubah pengaturan margin dibagian CSS #kotakblog menjadi margin:0 auto;
Contoh realnya bisa anda lihat disini : template-pertamaSTEP8.html
Nahhhh…kini template kita sudah mulai terbentuk dengan teratur dan sudah enak dilihat.
Catatan : Perubahan(Penambahan ) kode di bagian CSS letaknya ada didalam kurung besar { } , contoh :
#ruang-Sidebar { disini tempat penambahan kode }
Setiap kode yang ada di dalam kurung CSS mempunyai ciri sbb :
Keterangan benda – titik dua – nilai - titik koma , contoh :
width:485px;
width –> keterangan yang menerangkan benda/objek yang akan diatur besaran atau nilainya
titik dua –> pengganti samadengan (=)
485px –> nilai dari si benda(objek)
titik koma –> akhir dari nilai objek
Baiklah teman saya kira saya cukupkan dulu uraian pengalaman saya dalam membuat template ,karena sudah terlalu panjang halaman nya , silahkan dibandingkan setiap perubahan yang telah kita lakukan mulai dari template-pertamaSTEP1 sampai dengan template-pertamaSTEP8
Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata. Dan pada sesi membuat template tahap empat , Inysa Allah kita baru akan memasukkan kode-kode blogspot yang merupakan kode-kode database tempat penyimpanan konten blog kita .
Semoga bermanfaat
PS : Karena ada yang nanya saya : ” mas Bahrul belajar bikin template dimana ? ”
Silahkan yang mau belajar membuat template yg lebih detail ,dengan tutorial bahasa Indonesia , disini aja ya : Kursus HTML dan PHP utk belajar bikin template
Dari : http://www.bahrul-ulum.com/
Read More..
Information Plus
Minggu, 29 Mei 2011
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><
<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti""> <img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=54"></a>
<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti">
<img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=1"></a>
ket :
ganti ID YM saya/tulisan berwarna merah dengan ID YM yg anda miliki.
5. Simpan
Dari : http://infoneka.blogspot.com/

caranya..
1. Log in blogger.com
2. Dasbor > tata letak > elemen laman
3. Tambah gadget > HTML/javascript
4. Copas kode di bawah ini
<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti"> <img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=54"></a>

<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti""> <img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=54"></a>
<a target="_blank" href="http://ymgen.com/chat.php?idne=ganti">
<img border="0" src="http://ymgen.com/ym.php?id2=ganti&s2=1"></a>
ket :
ganti ID YM saya/tulisan berwarna merah dengan ID YM yg anda miliki.
5. Simpan
Dari : http://infoneka.blogspot.com/
Label:
Blogger
Langganan:
Postingan (Atom)