CARA MEMBUAT TEXT AREA

---

K

enapa disebut dengan text area,jika kita artikan secara sederhana kurang lebih adalah tempat atau area untuk meletakkan text.Text area ini berbentuk box atau kotak.Mungkin ada yang bertanya kenapa harus meletakkan text ke dalam area tersebut.

Jika sobat pernah menulis atau posting kode html tapi ketika sobat upload ternyata postingan tersebut tidak muncul sesuai dengan yang sobat inginkan. Nah..inilah fungsi dari text area tersebut,untuk memunculkan kode html yang memang tidak terbaca sewaktu kita upload. misal kode untuk tukar link atau apa saja yang menggunakan bahasa atau kode html agar mudah kita copy.

Pada dasarnya kita bisa meletakkan text apa saja ke dalam area tersebut.Mungkin ini gambaran secara sederhana mengenai text area. Dan untuk membuatnya sobat bisa lihat cara-cara di bawah ini:

<a href="http://www.activekita.blogspot.com" target="_blank">BELAJAR NGEBLOK YUK</a>

Text atau link di atas jika kita tulis apa adanya tidak akan muncul dalam postingan,untuk memunculkannya harus kita letakkan ke dalam text area tersebut. Cara membuatnya kita harus menulisnya seperti di bawah ini:

<p align="center"><textarea name="code" rows="2" cols="40"><a
href="http://www.activekita.blogspot.com"target="_blank">BELAJAR NGEBLOK YUK</a></textarea></p></textarea></p>

Contoh lain dari text area:

<p align="center"><textarea name="code" rows="4" cols="50" style="background-color:green; color:blue;">TEXT AREA INI POSISI DI TENGAH DENGAN TINGGI "4" DAN MEMPUNYAI LEBAR "50" BACKGROUND BERWARNA HIJAU DENGAN TEXT BIRU</textarea></p>

Di bawah ini adalah hasil dari kode di atas:

TEXT AREA INI POSISI DI TENGAH DENGAN TINGGI "5" DAN MEMPUNYAI LEBAR "50" BACKGROUND BERWARNA HIJAU DENGAN TEXT BIRU

SEMOGA BERMANFAAT

BEDA PPC DENGAN PTC

Kenapa masih banyak yang pada bingung untuk membedakan antara PPC dengan PTC,padahal cuma beda P sama T saja. Mungkin karena perbedaannya yang satu ini kita jadi sering ke bolak-balik arti. Sebanarnya ini sedikit berbahu pengalaman pribadi..he..he..he..jadi malu mengingatnya.Untuk mengingatkan lebih baik kita posting aja.

Nich..!! biar ingat!
PPC (Pey Per Clik) atau dibayar per kliknya. Pengiklan untuk jenis ini membutuhkan jasa website atau blog untuk memasarkan produk mereka. Apakah mereka menyewa blog kita...? jawabnya tidak,karena mereka tidak akan membayar kita jika tidak ada yang klik iklan mereka. Lantas siapa yang membayar kita...? Tentunya mereka,tapi dengan syarat ada pengunjung yang klik atau membeli produk iklan di blog kita. Lalu siapa yang di untungkan...? Jika blog kita ramai pengunjung dan banyak yang klik iklan berarti sama-sama di untungkan. Kalau tidak ada yang klik berarti buntung. Lebih buntung lagi kalau iklan kita klik sendiri,sudah tidak dapat untung malah account kita kena tendang alias di non aktifkan.

Lantas apa itu PTC (Pay To Clik)...? Kalau ini kita boleh klak-klik iklan sepuasnya,malahan dengan klik itu kita dibayar.Untuk ikut jenis ini tidak perlu punya website atau blog. Kita tinggal login ke situs penyedia layanan,klik semua iklan yang di sediakan. Biasanya agar valid untuk membuka halaman sampai selesai dibutuhkan waktu kurang lebih 30 detik. Semakin banyak iklan yang di klik semakin puas PTC menyiksa jari kita,dengan imbalannya pendapatan kitapun akan lebih juga.

INGAT....INGAT....TINGG..!!

CARA MENGGANTI FAVICON BLOGGER

S

eperti yang sering kita lihat,sudah banyak sobat blogger yang telah mengganti favicon pada blog mereka. Untuk saat ini tidak ada salahnya jika saya ingin sedikit berbagi sama sobat yang belum mengerti bagaimana cara mengganti icon tersebut. Icon ini letaknya berada di samping kiri pada alamat url milik sobat.

Di bawah ini adalah gambar favicon yang sudah diganti dan yang belum diganti:

Untuk membuatnya sobat harus siapkan dulu gambar iconnya,kemudian upload ke tempat hosting milik sobat dan ambil alamat url nya.Untuk upload file sobat bisa menggunakan layanan pada www.photobucket.com atauwww.geocities.com atau di mana saja,karena layanan ini banyak tersedia di internet.

Contonya sebagai berikut:
Misalnya kita punya alamat seperti ini:

http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif

Tambahkan sedikit kode hingga hasilnya seperti di bawah ini:

<link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
Selanjutnya:

• Login ke blog sobat.

• Klik tata letak.

• Edit HTML.

• Cari kode </head>
  Letakkan alamat favicon yang sobat punya di atasnya,hingga hasilnya sebagai berikut:
  
  <link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
  </head>
  

• Klik simpan template.

• Lihat hasilnya.

MENAMBAH SIDEBAR DI KANAN DAN KIRI

---

---

S

ebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

Outer-wrapper=660px;
Header-wrapper=660px;
Footer-wrapper=660px;

• Sekarang masuk ke blog sobat.
• Klik tata letak.
• Edit html.
• Jangan beri centang pada Expand widged template.

Cari kode seperti di bawah ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $startSide;
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 */

Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float:$endSide;
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 */
}

#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 */
padding:5px;

#sidebarbaru-wrapper {
width: 220px;
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 */
padding:5px

Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

Jangan lupa ganti juga nilai lebar dari:
header-wrapper= 880px;
footer-wrapper= 880px;

Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Letakkan kode dibawah ini tepat atasnya:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Hingga hasilnya sebagai berikut:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

• Klik pratinjau.
• Jika di rasa sudah sesuai klik simpan template.

KURANGI BLOG BERAT LOADING LAMBAT

---

---

S

ebenarnya apa maksud judul yang membingungkan ini....
Banyak para blogger yang suka menghias blognya dengan bermacam pernak-pernik dan accesoris.

Sebenarnya dengan accesoris dan pernak-pernik yang pas blog akan terlihat cantik dan menarik.Tetapi apa yang terjadi ketika blog kita buka,di situ akan terasa berat dan cukup lama waktu loadingnya,yang terkadang membuat kita sedikit jengkel. Apalagi yang kita buka blog milik orang lain,tahu sendiri...

Dari judul di atas maksudnya adalah bagaimana cara mengurangi berat pada blog kita.

Sebenarnya berat blog ini bisa juga terjadi karena penulisan kode css kita yang kurang pas,dalam artian bukan berarti salah.Untuk itu kita perlu mengeditnya.

Jika kode css sudah terlanjur banyak dan malas untuk mengedit tidak perlu khawatir,karena ada jasa yang suka rela dan senang hati bersedia membantunya. Masuk saja ke alamat http://www.csscompressor atau ke http://www.cssdrive.com di sini kode css kita akan di compress yang nantinya dapat mengurangi beban blog kita.

Caranya:

• Buka alamat: http://www.cssdrive.com
  Pada menu tool pilih css compressor.

• Kemudian masuk ke blog sobat.

• Pilih tata letak.

• Klik edit html.

• Kasih tanda centang pada Expand widget.

• Cari kode yang akan kita compress,letaknya antara </b:skin> dan ]]></b:skin>

• Untuk jaga-jaga copy kode yang akan kita kompress kemudian simpan di notepad.

• Paste juga pada tempat pengompressan pada alamat di atas.

• Untuk compressor mode pilih normal.

• Untuk comments handling pilih Don't strip any comments.

• Klik compress it.

• Ganti kode css sobat dengan kode yang sudah terkompres.

• Klik pratinjau.

• Jika sudah aman klik simpan.

Dari hasil compress tersebut kita bisa pelajari cara penulisan kode css yang pas.

Semoga bermanfaat.

MEMBUAT FOOTER MULTI KOLOM BLOGGER

---

---

D

engan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya

di sini akan kita bahas bersama.

Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.

Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

• Login ke blog sobat.

• Klik tata letak.

• Pilih edit HTML.

• Jangan kasih centang pada expand widget.

• Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:
  
  /* footer_wrapper
  ---------------------------- */
  #footer_wrapper{
  width: 100%;
  position: relative;
  float: left;
  background:#ff69b4;
  border: px solid #ff0000;
  padding:%;
  }
  
  #footer_wrapper1{
  float:left;
  width:30%;
  margin:1px;
  background:#7cfc00;
  padding:1%;
  }
  
  #footer_wrapper2{
  float:left;
  width:30%;
  margin-top:1%;
  margin-bottom:1%;
  background:#7cfc00;
  padding:1%;
  }
  
  #footer_wrapper3{
  float:left;
  width:30%;
  margin:1%;
  background:#7cfc00;
  padding:1%;
  }
  
  ]]></b:skin>
  

• Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:
  
  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'/>
  </div>
  

• Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :
  
  <div id='footer_wrapper'>
  <b:section class='footer' id='footer_wrapper1'/>
  <b:section class='footer' id='footer_wrapper2'/>
  <b:section class='footer' id='footer_wrapper3'/>
  </div>
  
  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'/>
  </div>
  
  

• Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.
  
  Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitam adalah kode yang ditambahkan.

Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

Semoga bermanfaat.