Design By Suhendra Anggota Crew Pakjo
By. Suhandro Tamaruz
Download File dalam Format Ms.Word: KLIK DI SINI
Umh…. Mungkin, ada banyak versi, tips dan trik penulisan kode html yang jauh lebih baik dari script yang saya tampilkan di posting ini.
Hanya saja, dengan maksud sekedar ingin ‘berbagi’, dan tidak bermaksud ‘menggurui’ atau men-dikte siapapun, di bagian petama ini (mudah2an saya bisa posting lagi kode html lainnya), saya berikan beberapa contoh kode html yang tentunya saya dapatkan dari beberapa sumber (blog dan situs) yang bannernya, saya link dib log ini (sebagai ucapan terimakasih, loh…)
Dan anda boleh modifikasi bahkan kembangkan seperlunya, sesuai selera dan kreativitas anda sendiri, OK?
Kita mulai….
Di sini, saya kebetulan, hanya contohkan untuk pengguna Blogger. Secara umum, caranya sebagai berikut:
- 1. Login ke control panel Blogger kita (Login)
- 2. Klik Layout
- 3. Klik Tambahkan Sebuah Elemen Halaman
- 4. Pilih atau klik tombol tambahkan ke blog pada pilihan Html/Java Script Di bagian Judul, boleh diisi atau tidak, dan kode html yang akan kita pasang harus diketik atau di paste di bagian konten.
- 5. Klik tombol Simpan Perubahan.
CONTOH-CONTOH KODE HTML:
Penjelasan:
Sebenarnya,
Menghubungkan teks atau image ke situs atau halaman lainnya.
Untuk posting kali ini, saya hanya ‘berani’ menampilkan script html di atas. Insya Allah kedepannya saya coba posting kode-kode html yang lebih lengkap lagi.
Umh... mohon maaf apabila posting kali ini masih 'acak-acakan, dan dengan 'terpaksa' beberapa bagian saya convert menjadi image. anda bisa meng-klik image tersebut untuk melihat tulisan yang 'agak jelas.
Terima kasih kepada:
- isnaini.com
- edittag.blogspot.com
Iseng-iseng liat extremetracking ternyata ada empat orang lebih yang nyasar ke blog ini nyari cara bikin atau nambah kolom template na menjadi ( 3 ) tiga kolom. Sebab itu sekalian saja saya bikin postingan tentang bagaimana caranya menambah kolom di template new blogger.
Baiklah untuk menambah layout menjadi ( 3 ) tiga kolom, saya lebih suka mengunakan sistem persen ( % )dari pada mengunakan sistem angka. Bukan apa-apa sih, kalau mengunakan angka terkadang menjadi ribet dalam menentukan margin-nya, lagi pula ketika saya buka di Template Tab Elemen Halaman posisinya sering berantakan seperti ini.
" Perlu di Ingat kunci perubahan lebar akibat penambahan kolom terletak pada nilai Outer-wrapper nya. "
Template yang saya pake template minima .- jadi yg ingin mengikuti tutor ini mesti di istallkan dulu template minima-nya , juga biar seragam kita merubah OUTER-WRAPPER-nya menjadi 80%.
1. MENAMBAH KOLOM POSISI MAIN CONTENYA DI TENGAH.
Seperti biasa untuk mengedit layout buka tulisan atau TAB EDIT HTML.
Dan untuk kasus ini biarkan saja Expand Template Widget dalam ke adaan kosong ( tidak di tandai ).
oke sekarang cari kode ini.
'main-wrapper'
Setelah itu masukan di atasnya kode berikut ini.
<div id="newsidebar-wrapper"><b:section class="sidebar" id="newsidebar" preferred="yes">/span>b:section>/span>div>
Sekarang scroll mouse ke atas ke bagian kode Css-nya. temukan kode ini.
#sidebar-wrapper {width: 220px;float: right;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
di bawah-nya masukan kode ini.
#newsidebar-wrapper {width: 220px;float: right;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Tugas kita sekarang merubah nilai lebar, margin dan float-nya.yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma.)
#outer-wrapper {width: 80%;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
Yang Kedua rubah nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left nilainya sekitar 2% cukup. yaitu : Margin-left: 2%; jadi bila di bandinghkan dengan kode asli-nya kode perubahannya seperti di bawah ini.
#main-wrapper {width: 55%;margin-left:2%;float: left;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
" Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya sekitar 20%. dan sisanya yang 5% untuk nilai margin"lanjutYang ketiga merubah nilai WIDHT dan menambah Margin left dari SIDEBAR-WRAPPER menjadi seperti di bawah ini.
#sidebar-wrapper {width: 20%;margin-left:2%;float: right;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini yang mesti dirubahnya adalah nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left; Seperti di bawah ini.
#newsidebar-wrapper {width: 20%;float: left;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;
#header-wrapper {width:100%;margin:0 auto 10px;border:1px solid $bordercolor;}
Dan begitu juga bagian FOOTER -nya sama WIDTH:100%.
#footer {width:100%;clear:both;margin:0 auto;padding-top:15px;line-height: 1.6em;text-transform:uppercase;letter-spacing:.1em;text-align: center;}
Kenapa mesti 100% ( seratus persen ) ? ... ingat ! Outer-Wrapper merupakann wadah atau bungkus dari header, content ( main dan sidebar ) juga Footer -nya. ( dan mengunakan 100 % untuk kasus Template Minima )
Setelah beres semuanya, jika kita tekan PRATINJAU ngga terjadi apa-apa ? .. tenang saja jangan panik !!! itu karena memang kita belum menambah widget apapun di sidebar barunya ( kamu harus percaya )... jadi kita tekan saja tulisan SIMPAN TEMPALTE dan buka tulisan atau TAB ELEMEN HALAMAN.bravo kita sukses sekarang menambah sebuah kolom baru !!.coba tambahkan di sidebar baru sebuah WIDGET POLLING , karena kita akan melanjutkan tentang menambah kolom di new blogger ini ,yaitu bagaimana menambah kolom kalau posisi kedua sidebarnya sisi kanan atau sisi kiri ( seperti layout blog ini ).- itu juga kalau ngga malas nulisnya .Yes jadi tambahkan sekarang widget polling.. ( hanya sebagai alat untuk acuan saja ).
tunggu saja sambungannya.
