Saturday, April 18, 2009

Panduan membuat Blog di Blogspot

Mungkin ada diantara anda-anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri.

1. Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.
Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.

2. Cara membuat blog
Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.
Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com, Silahkan anda klik gambar dibawah untuk mendaftar.



Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

  1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "

  1. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)

  1. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email

  1. Tuliskan password yang anda inginkan pada form Masukkan sebuah password

  1. Isikan kembali password anda tadi pada form Keyik ulang sandi (password)

  1. Isi Nama Tampilan dengan nama yang ingin anda tampilkan

  1. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.

  1. Klik gambar anak panah yang bertuliskan "LANJUTKAN"

  1. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog

  1. Tulis nama situs anda pada form Alamat Blog (URL)

  1. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".

  1. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"

  1. Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".



3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepadasi pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.

Cara Setting Blog

Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

  1. Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
  2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
  3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
  • Judul => isi dengan judul blog sobat. Contoh : Blogspot Tutorial
  • Uraian => isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog
  • Tambahkan blog Anda ke daftar kami? => pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.
  • Biarkan mesin pencari menemukan blog Anda? => pilih ya
  • Tampilkan Editing Cepat di Blog Anda? => pilih Ya
  • Tampilkan Link Posting Email? => Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa
  • Konten Dewasa? => Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
  • Tampilkan Mode Compose untuk semua blog Anda? => pilih Ya
  • Aktifkan transliterasi? => pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)
  • Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :

  • Alamat Blog*Spot => isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.
  • Klik tombol Simpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

  • Tampilkan => pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.
  • Format Header Tanggal => pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.
  • Format tanggal Index Arsip => pilih model untuk peng-arsip-an yang anda sukai.
  • Format Timestamp => Pilih bentuk waktu yang anda sukai.
  • Zona Waktu => Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.
  • Bahasa => Pilih bahasa yang di inginkan.
  • Tampilkan Field judul => Pilih ya

atau tidakpun tidak apa-apa

  • Tampilkan kolom link => pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.
  • Aktifkan perataan float => pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa
  • Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

  • Komentar => pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
  • Siapa yang Bisa Berkomentar ? => Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
  • Default Komentar untuk Posting => pilih Posting baru memiliki komentar.
  • Link balik => Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
  • Default Link Balik untuk Posting => pilih Posting baru Memiliki Link Balik.
  • Format Timestamp Komentar => pilih format jam yg singkat. Contoh: 8.00 PM.
  • Tampilkan komentar dalam sebuah window popup? => pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.
  • Aktifkan moderasi komentar? => pilih Tidak (sebaiknya).
  • Tampilkan verifikasi kata untuk komentar? => pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
  • Tampilkan gambar profil dalam komentar? => pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
  • Email Pemberitahuan Komentar => isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.
  • Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

  • Frekuensi Arsip => pilih Bulanan.
  • Aktifkan Halaman Posting? => pilih ya.
  • Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

  • Izinkan Feed Blog => pilih Penuh.
  • Posting URL Pengubahan Arah Feed => di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.
  • Footer Feed Posting => Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.
  • Klik tombol Simpan Perubahan. Selesai.

Selamat Mencoba!!!

Membuat Cursor Animasi

Hallo sobat.. jumpa lagi nih. Setelah beberapa hari absen karena datangnya bulan suci ramadhan dan tadinya saya berniat untuk undur diri selama satu bulan, eh akhirnya tidak tahan juga nih... Nge-log lagiiiii.... (sudah kecanduan kalee ye). Yupsss... kali ini saya mau membahas salah satu pertanyaan dari sobat alfath yang di ajukan melalui shoutbox. Kutipan pertanyaannya seperti ini :

"ASS.Gmana cara pasang kursor animasi,kan bagus klo kursornya antik... "

Sebuah keinginan yang datang akibat ingin membuat blognya tampak lebih menarik di mata pengunjung.... wajar kalau menurut saya..



Untuk membuat sebuah kursor animasi tidaklah sulit, karena tidak banyak kode yang harus dipakai, akan tetapi tentu saja sesuatu yang gampang akan menjadi sulit tatkala kita tidak tahu caranya, makanya disinilah indahnya berbagi, banyak berbagi akan banyak di bagi, banyak memberi akan banyak di beri. iya ngga? dan moto saya yang baru yaitu "banyak berbagi banyak sahabat".

Untuk membuat sebuah kursor animasi, langkah pertama yang harus di lakukan adalah membuat sebuah gambar animasi yang berukuran kecil, untuk yang ini terserah kepada keahlian sobat, banyak software pembuat animasi semisal macromedia flash dan kawan-kawannya. Sebuah pertanyaan baru mungkin muncul yaitu bagaimana apabila kita tidak menguasai program animasi, kan jadi ribet persolaannya. Jika sobat tidak bisa membuat sebuah gambar animasi untuk di pakai, jangan dulu putus harapan. Sobat bisa mencarinya di internet, ratusan atau bahkan ribuan situs menyediakan layanan ini. Caranya sangat mudah, sobat bisa mencarinya lewat search engine yang ada di sebelah kanan atas blog ini. Tuliskan keyword yang berhubungan, misal : Free cursor animated, cursor animation, Free cursor animated atau keyword lainnya yang di rasa berhubungan dengan yang namanya kursor animasi. Silahkan kunjungi situs yang muncul, barangkali sobat akan menemukan situs yang tepat.

Langkah kedua yaitu menyimpan file animasi yang sudah sobat dapatkan ke hosting tempat menyimpan gambar, contoh : http://www.photobucket.com atau di blogger sendiri juga bisa. Untuk cara-cara mengupload gambar sudah saya terangkan, silahkan baca kembali di sini apabila sobat masih belum bingung mengenai cara upload gambar. Apabila gambar animasi sudah si upload, catat alamat gambar tersebut. Sebagai contoh, saya mempunyai gambar cursor berbentuk naga terbang dengan alamat sebagai berikut :

http://24rohman.googlepages.com/dragon3.ani


Langkah selanjutnya adalah menyisipkan kode untuk kursor. Kode untuk membentuk kursor adalah sebagai berikut :

cursor: url("alamat gambar kursor");

Sebagai contoh, jika saya menggunakan alamat kursor yang saya miliki, kode nya jadi seperti ini :

cursor: url("http://24rohman.googlepages.com/dragon3.ani");

Langkah selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template sobat, agar lebih mudah untuk di pahami, saya tuliskan langkah-langkahnya :

· Untuk template klasik

  1. Sign in di blogger.

  1. Klik menu Template

  1. Klik menu Edit HTML

  1. Copy seluruh kode template yang ada, lalu save untuk backup data

  1. Cari kode yang mirip dengan kode di bawah ini, biasanya di tulis dengan body :



body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

  1. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :



body{
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
cursor: url("http://24rohman.googlepages.com/dragon3.ani");
}

  1. Klik tombol Simpan Perubahan Template

  1. Selesai. Silahkan lihat hasilnya.

· Untuk template baru

  1. Sign in di blogger

  1. Klik menu Layout

  1. Klik menu Edit HTML

  1. Klik link Download template seluruhnya, save dulu untuk backup biar aman

  1. Cari kode yang mirip dengan kode dibawah, biasanya di tulis dengan body :



body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
}

  1. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :



body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
cursor: url("http://24rohman.googlepages.com/dragon3.ani");
}

  1. Klik tombol Simpan Template

  1. Selesai. Silahkan lihat hasilnya.



Atau ada juga cara lain, yaitu di tempatkan di dalam kode , sobat tinggal menyisipkannya sehingga kodenya jadi seperti ini :



Saya rasa cukup deh, selamat menikmati animasinya.



Mengatur Hurup dan Warna

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

  1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai

  1. Text Color --> pengaturan warna hurup dari posting-an

  1. Link Color --> pengaturan warna hurup yang di link

  1. Blog Title Color --> pengaturan warna hurup judul Blog

  1. Blog Description Color --> pengaturan warna hurup deskripsi blog

  1. Post Title Color --> pengaturan warna hurup judul posting-an

  1. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah

  1. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)

  1. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)

  1. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link

  1. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar

  1. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan

  1. Blog Title Font --> pengaturan jenis hurup Judul blog

  1. Blog Description Font --> Pengaturan jenis hurup dekripsi blog

  1. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )

  1. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.



Memilih Template

Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template. Sekilas tentang template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang. Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com :

  • Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya
  • Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic).
  • Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai.

Selamat Mencoba !



Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko jadi ngelantur nih, kembali ke judul posting ini ah.

Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :










Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.

Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

  1. Login ke blogger dengan ID anda tentunya.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini :

]]>

5. Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}

6. Klik tombol Simpan template.

7. Selesai.

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Pasang Buku Tamu di Sidebar

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

  1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
  2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
  3. Pada kolom yang berjudul Style, klik menu appearance.
  4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
  5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
  6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
  7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
  8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
  9. Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

  1. Log in terlebih dahulu ke blogger.com dengan id anda
  2. Klik menu Template
  3. Klik Edit HTML
  4. Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
  5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
  6. Klik tombol Preview untuk melihat perubahan yang kita buat.
  7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
  8. Selesai

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

  1. Silahkan Login dengan id anda
  2. Klik menu Layout
  3. Klik Page Element
  4. Klik Add a Page Element
  5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
  6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
  7. Copy paste kode HTML shoutbox anda di dalam form Content
  8. Klik tombol Save Changes
  9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
  10. Tekan tombol Save
  11. Selesai

Selamat mencoba !

Ubah Lebar Kolom Template

Lagi-lagi soal template nih. Mungkin ada beberapa dari sobat sekalian ada yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download
di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :



#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}



Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Agar lebih faham, kode-kode diatas saya uraikan :

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.



#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila sobat memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}


Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

#sidebar-wrapper {
width: 220px;
float: right;
}


Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#newsidebar-wrapper {
width: 200px;
float: left;
}



Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih

 
© free template by muchtar