BEBERAPA MACAM CSS BORDER

---

---

Css border atau biasa disebut Css border properties ini bisa memungkinkan kita untuk menentukan gaya dan warna border suatu elemen. Di sini akan saya berikan beberapa contoh yang biasa di gunakan dan mungkin saja bisa berguna.

BEBERAPA MACAM CSS BORDER

1. none 2. dotted 3. dashed 4. solid 5. double 6. groove 7. ridge 8. inset 9. outset

: Tidak mendefinisikan garis perbatasan : Mendefinisikan perbatasan garis titik-titik. : Mendefinisikan perbatasan garis putus-putus. : Mendefinisikan perbatasan garis penuh. : Mendefinisikan perbatasan garis ganda. : Mendefinisikan perbatasan garis berlekuk 3D. : Mendefinisikan perbatasan garis bergerigi 3D. : Mendefinisikan perbatasan garis inset 3D. : Mendefinisikan perbatasan garis outset 3D.

Cara menggunakannya:

1. none
<p style="border: 3px none; #000000; padding: 20px;">Tidak mendefinisikan garis perbatasan</p>

Tidak mendefinisikan garis perbatasan

2. dotted
<p style="border: 3px dotted; #000000; padding: 20px; align: center;"> Mendefinisikan perbatasan garis titik-titik.</p>

Mendefinisikan perbatasan garis titik-titik.

3. dashed
<p style="border:3px dashed; #000000; padding: 20px;"> Mendefinisikan perbatasan garis putus-putus.</p>

Mendefinisikan perbatasan garis putus-putus.

4. solid
<p style="border:3px solid; #000000; padding: 20px;"> Mendefinisikan perbatasan garis penuh.</p>

Mendefinisikan perbatasan garis penuh.

5. double
<p style="border: 5px double; #000000;padding: 20px;"> Mendefinisikan perbatasan garis ganda.</p>

Mendefinisikan perbatasan garis ganda.

6. groove
<p style="border: 10px groove; #000000; padding: 20px;"> Mendefinisikan perbatasan garis berlekuk 3D.</p>

Mendefinisikan perbatasan garis berlekuk 3D.

7. ridge
<p style="border: 10px ridge; #000000; padding: 20px;"> Mendefinisikan perbatasan garis bergerigi 3D.</p>

Mendefinisikan perbatasan garis bergerigi 3D.

8. inset
<p style="border: 10px inset; #000000; padding: 20px;"> Mendefinisikan perbatasan garis inset 3D.</p>

Mendefinisikan perbatasan garis inset 3D.

9. outset
<p style="border: 10px outset; #FF3300; padding: 20px;"> Mendefinisikan perbatasan garis outset 3D.</p>

Mendefinisikan perbatasan garis outset 3D.

SEMOGA BERMANFAAT

Jasa Tukang Ledeng Surabaya-Ahli Sumur Bor Harga Murah

Jasa Tukang Ledeng Surabaya - Ahli Sumur Bor Harga Murah Surabaya, Sidoarjo, Gresik, Mojokerto menerima Panggilan 085100459732
Salam bahagia buat Bapak dan Ibu sekeluarga telah hadir di tutor26 dengan segala kepenatan aktifitas dan bingung mencari Jasa Tukang Ledeng Surabaya murah tetapi bukan yang murahan atau bisa disebut sebagai Jasa Pipa Ledeng Surabaya karena memang domisili Bapak yang

Paket Wisata Bandung Murah 2016 | Globaltransholiday.com

Paket wisata bandung 2016 bersama Gobaltransholiday.com memberikan harga murah, nyaman dan profesional












Haloloo Mas Bos semuanya yang suka berlibur di pantai dengan acara berjemur ria di terik matahari maupun yang suka dengan udara fresh dinginnya alam di area pegunungan. Kali ini saya coba sedikit mengulas tentang wisata di kota kembang...iya pastinya kalian semua tahu bahwa kota

MEMBUAT MENU NAVIGASI HORIZONTAL

---

---

Mungkin sobat sudah tidak asing lagi dengan yang namanya menu horizontal. Di sini saya akan membuat sebuah menu navigasi horizontal secara sederhana yang tentunya lebih mudah di terapkan pada sebuah template. Menu ini biasanya terletak di bawah header.
Di bawah ini adalah gambar menu navigasi horizontal yang akan kita buat.

Kita langsung saja menuju bagaimana cara membuatnya.

• Masuk ke blog sobat
• Pilih tata letak atau rancangan.
• Klik tambah gadget.
• Pilih HTML/Java Script.
• Kemudian masukkan kode di bawah ini.
  <style type="text/css">
  /*----------------------------------*/
  .Nav a { width: auto; height: auto; text-decoration: none; }
  .Nav a { text-align: center; text-decoration:none;color:#ffffcc; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
  .Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#000033; font-weight:bold; border:3px; background-color: #000000;}
  </style>
  <div style="border: 3px solid #ffcc99; height:px;background-color:#FF3366;">
  <div style="width: auto; padding: 10px;" class="Nav" align="left">
  <a href="http://activekita.blogspot.com"target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME</span></a>
  <a href="http://activekita.blogspot.com/2010/01/kode- warna.html"target="_blank"><span style="font-weight:bold;color:#FFff00;">JUDUL1 </span></a>
  <a href="http://activekita.blogspot.com/2010/08/menambah-satu-kolom-di-bawah-header.html"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 2</span></a>
  <a href="http://activekita.blogspot.com/2010/10/membuat-menu-navigasi-horizontal.html"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 3</span></a>
  <form action="http://activekita.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." type="text" /> <input class="btn" name="" " value="search" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
  </form>
  </div></div>
  
• Ganti yang warna hijau dengan alamat link milik sobat. Bila perlu sobat bisa tambah dengan link sobat yang lain.
  Jangan lupa isi juga keterangan yang sesuai pada judul.
• Klik simpan.

Dan sobat bisa lihat hasilnya.

MELIHAT POSISI BLOG PADA SEARCH ENGINE

---

---

Ada salah satu sobat blogger pada komentar yang menanyakan tentang bagaimana agar blog dapat di search di google.
Sebenarnya setiap kita posting artikel baru atau setiap kita update google sudah langsung mengindex postingan kita. Mungkin ada sebagian harus menunggu beberapa jam, tapi biasanya tidak lebih dari 24 jam.
Selanjutnya bagaimana agar kita bisa melihat posisi blog atau postingan kita pada search engine milik google. Kalau posisi berada di bawah seratus mungkin tidak jadi masalah untuk menemukan. Tapi yang jadi masalah bagaimana jika berada di atas seratus bahkan beberapa ratus, tentu kita agak kesulitan untuk mencarinya.

Di sini ada sebuah layanan yang mungkin bisa sobat coba. Kita bisa memanfaatkan layanan ini untuk mengetahui pada posisi keberapa kata kunci yang kita gunakan pada blog.
Biasanya pertama kali google akan mengindex kata kunci pada judul artikel yang kita buat,makanya kita harus memanfaatkan dengan baik dalam membuat judul.
Pada layanana ini sobat tinggal memasukkan alamat blog dan kata kunci yg sobat gunakan.

Untuk mulai memanfaatkan layanan ini sobat bisa masuk ke: http://www.seoserp.com/google.page.rank.checker/

• Pilih negara atau tetap pada www.google.com
• Masukkan keywords yang sobat gunakan misal judul halaman atau judul artikel.
  Misal di sini saya memasukkan kata kunci dengan judul MELIHAT POSISI BLOG PADA SEARCH ENGINE
• Masukkan alamat domain milik sobat misal: http://activekita.blogspot.com
• Kemudian klik GO FOR SERP
• Tunggu sampai proses selesai, kemudian bisa dilihat pada posisi berapa blog milik sobat.

SEMOGA BERMANFAAT !

MENAMBAH SATU KOLOM DI BAWAH HEADER

---

---

Untuk menambahkan gadget di bawah header kita memelukan satu kolom di bawahnya. Untuk itu kita harus menambahkannya, karena template bawaan blogger ada yang belum ditambahkan untuk kolom ini. Jika sobat ingin menambahkan bisa ikuti cara dibawah ini:

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html.
• Cari kode yang seperti ini: ]]></b:skin>
  Kemudian tambahkan kode yang berwarna merah ini di atasnya,hingga hasilnya sbb:
  #under_header{
  float:left;
  width:100%;
  }
  ]]></b:skin>
  
• Kemudian cari kode seperti ini:
  <div id='header-wrapper'>
  <b:section class='header'id='header'maxwidget="1'showaddelement="no">
  <b:widget id='header1'locked='true'title='nama blog sobat(header)'
  type='header'/>
  </b:section>
  </div>
  Kemudian tambahkan kode di bawahnya hingga hasilnya sbb:
  <div id='header-wrapper'>
  <b:section class='header'id='header'maxwidget="1'showaddelement="no">
  <b:widget id='header1'locked='true'title='nama blog sobat(header)'
  type='header'/>
  </b:section>
  </div>
  <div id='under_header'>
  <b:section class='header' id='underheader' preferred='yes'/>
  </div>
  
• Warna merah adalah kode yang harus sobat tambahkan.
• Klik simpan

Semoga bermanfaat !

CARA UPLOAD FILE DI ZIDDU

---

---

Sobat pasti sudah tidak asing dengan file hosting yang bernama ziddu, karena sudah banyak yang menggunakan layanan ini. Kenapa banyak yang menggunakan layanan ini karena selain gratis caranyapun cukup mudah. Sobat tinggal registrasi setelah itu sudah langsung bisa upload file yang sobat inginkan. Bisa berupa gambar,video maupun lagu. Ambil link downlodnya dan bisa langsung dipasang pada blog milik sobat. Per upload bisa sampai 200 MB. Lumayan..!!
Sebenarnya caranya memang cukup mudah, tapi tidak ada salahnya untuk berbagi akan saya tunjukkan caranya di sini.
Untuk menuju TKP dan langsung register bisa klik linknya di sini tentunya sambil terus baca postingan ini. Jangan ditinggal ya ! he..he.he..!

Untuk register seperti biasa harus memasukan:
• Nama: tulis nama.
• Email: Masukkan email (untuk login selanjutnya).
• Password: masukkan password.
• Confirmasi Password: ulangi masukkan password.
• Verification Code: Masukkan kode yang tertera.
• Beri tanda centang pada I Agree Terms and Conditions.
• Klik submit.

Di sini sobat sudah otomatis login jadi tidak perlu login lagi. Tapi jika sewaktu-waktu ingin upload file lagi sobat di haruskan login. Untuk itu Email id dan password harus sobat ingat bila perlu disimpan.
Setelah masuk pada pojok kanan atas sobat klik upload, maka akan terlihat tampilan sepeti ini:

• Kemudian klik Browse.
• Cari file dari komputer milik sobat yang ingin sobat upload.
• Jika sudah ketemu Klik dua kali.
• Kemudian baru klik upload.
  Maka sobat akan melihat tampilan seperti gambar dibawah.

• Tunggu sampai proses upload selesai.
• Jika proses upload selesai sobat langsung dibawa pada link file hasil dari upload tadi.

• Agar orang lain bisa ikutan download,copy linknya dan bisa dipasang pada blog milik sobat.
  Cara memasangnya:
  
• Misal sobat mendapatkan link seperti ini:
  http://www.ziddu.com/download/11290312/cara-upload-file-di-ziddu.jpg.html
  
• Tambahkan kode hingga hasilnya sepeti ini:
  <a href=" http://www.ziddu.com/download/11290312/cara-upload-file-di-ziddu.jpg.html">download</a>
  Maka hasilnya akan seperti ini--> download
• Ganti yang warna merah dengan link file download milik sobat.
• Tulisan download bisa diganti dengan tulisan apa saja.
  

Enaknya lagi upload file pada ziddu jika ada yang download file milik sobat maka sobat akan mendapatkan dolar.
Siapa yang mau menolak, sudah gratis dapat dollar lagi.
Untuk mendaftar bisa langsung klik linknya di sini.
SEMOGA BERMANFAAT !

CARA MENGGANTI DOMAIN BLOGSPOT KE CO.CC

---

---

Ada sebagian sobat yang merasa domain blogspot dirasa terlalu panjang dan ingin beralih menggunakan domain yang lebih pendek. Sehingga mereka harus membeli domain dan menyewa tempat hosting yang kadang ini cukup membingungkan bagi blogger pemula. Walau sebenarnya banyak penjual domain dan tempat hosting yang bersaing dengan harga yang mungkin cukup terjangkau. Tapi bagaimana jika ada domain gratis dan hostingnyapun tetap gratis? Tentunya tetap menggunakan layanan milik blogger. Jika sobat tertarik di sini kita akan mengganti domain gratis blogspot dengan co.cc.
Untuk mengganti domain blogspot ke co.cc saya sarankan sobat membuat blog baru. Karena sayang jika mengganti blog yang sudah mempunyai traffik.
Di bawah ini adalah cara mengganti domain blogspot ke co.cc

• Buat blog di blogspot yang nanti ingin sobat ganti namanya dengan co.cc.
• Kemudian masuk ke www.co.cc
• Di sini sobat harus registrasi terlebih dahulu.
  Klik Create an account now
  Isi formulir pendaftaran.
  Beri tanda pada I accept the Terms of Service.
  Kemudian klik Create an account now.
  Jika sudah terbuka halaman baru klik pada Getting A New Domain
  
  Maka akan terbuka halaman baru lagi Masukan alamat blog yang ingin di ganti nama domainnya. Kemudian klik check availability.
  Seperti gambar yang terlihat di bawah ini.
  
  
• Jika alamat yang sobat inginkan tersedia maka akan muncul keterangan seperti berikut.
  
  
• Kemudian klik continue to registration.
  Maka akan muncul keterangan Your new domain has been successfully registered.
  
• Klik Setup.
  Maka akan terbuka halaman baru.
  
• Klik pada Please domain setup now
  
• Pada halaman selanjutnya pilih 2. Zone Records
  Maka sobat akan melihat tampilan seperti gambar di bawah ini.
  
  Isi Zone Records dengan :
  Host : nama domain yang di daftarkan misal www.activekita.co.cc
  TTL : tetap pada ID
  Type : CNAME
  Value : ghs.google.com
  Kemudian beri tanda pada Apply this setting to all the domains registered in the future.
  
• Klik setup.

Pada tahap ini kita telah selesai setting pada co.cc,selanjutnya kita tinggal setting pada blogspotnya.

• Masuk keblog sobat.
  
• Pilih settings ( pengaturan )
  
• Klik publishing (Publikasikan)
  
• Klik Domain Ubahsuaian ( Costom Domain )
  
• Klik beralih ke pengaturan lanjut ( Switch to advanced settings ).
  
• Pada kolom Your domain masukan doman co.cc yang telah sobat buat.
  Misal: www.activekita.co.cc
  
• Use a missing files host? pilih no.
  
• Masukkan Word Verification
  
• Simpan.

Dari sini sobat sudah mengganti domain blogspot dengan co.cc.
Biasanya beberapa saat sudah bisa di akses, paling lama menunggu 24 jam.
Untuk memulai bisa klik di sini atau melalui banner di bawah.

Selamat menggunakan domain baru.

DISABLE KLIK KANAN PADA BLOG

---

---

Sobat pernah menemukan sebuah blog yang disable klik kanan atau kita tidak bisa melakukan klik kanan pada blog yang kita kunjungi. Ini dikarenakan blog tersebut menggunakan sebuah script yang telah disembunyikan.

Kenapa ada sebagian pemilik blog menginginkan blognya tidak bisa diklik kanan,ini mungkin saja si pemilik blog ingin menyembunyikan sesuatu, karena beranggapan hanya sebagian orang saja yang bisa melihatnya.
Tapi di sini saya tidak akan membahas panjang, pasti sudah banyak yang tahu kenapa ada beberapa blog atau situs yang dipasang script ini.

Dulu ada salah satu blog saya yang memakai script ini, tapi tidak lama sudah saya lepas.
Jika blog sobat ingin anti klik kanan langsung saja kita menuju bagaimana cara membuat dan memasangnya.

• Seperti biasa login dulu ke blog sobat.
• Klik tata letak (layout) atau rancangan.
• Klik tambah gadget.
• Pilih HTML/JavaScript.
• Masukkan script di bawah ini pada konten.

<SCRIPT language=JavaScript>
var message="Function Disabled!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</SCRIPT>

• Klik simpan.
• Jangan lupa lihat hasilnya.

SEMOGA BERMANFAAT !

MEMBUAT POSTINGAN HOMEPAGE

---

Biasanya ketika kita posting artikel baru akan selalu berada pada halaman homepage atau halaman depan. Begitu pula ketika kita posting artkel baru lagi halaman depan akan bergeser pada halaman selanjutnya. Padahal dari sebagian sobat ada yang menginginkan ketika posting artikel baru,halaman muka tidak bergeser atau tetap pada posisi homepage. Mungkin ini karena kita menginginkan halaman muka hanya berisikan tentang keterangan isi blog atau keterangan tentang si pembuat blog.

Jadi maksudnya di sini adalah bagaimana membuat halaman muka tidak akan berubah ( statik ) meskipun kita posting artikel baru, sedangkan artikel baru akan berada pada halaman selanjutnya.

Sebenarnya blogger sendiri telah mengeluarkan fitur baru untuk membuat halaman static ini, tapi banyak dari sobat blogger yang bermasalah ketika menggunakannya. Mungkin ini dikarenakan ada kode yang bentrok yang telah di pasang, terutama pada kode read more.

Di bawah ini adalah beda homepage dan halaman selanjutnya.

• Homepage : Tanpa judul di belakangnya.
  http://activekita.blogspot.com/
  
• Halaman selanjutnya : Dengan keterangan judul di belakangnya.
  http://activekita.blogspot.com/2010/7/membuat-postingan-homepage.html
  

Mungkin ini cara alternatif saja, jika sobat blogger ada cara yang lebih cantik saya mohon masukannya.

Pertama yang harus kita lakukan setting posting blog terlebih dahulu.
Masuk ke blog sobat
Klik tata letak atau rancangan.
Pada posting blog klik edit, seperti gambar di bawah ini.

Maka akan muncul jendela pop up untuk mengkonfigurasi posting blog. Seperti gambar di bawah .

Atur jumlah posting yang ingin sobat munculkan pada halaman utama atau halaman muka. Jika ingin di halaman muka berisi keterangan saja bisa pilih satu.
Atur juga tanggal bulan dan tahun,bisa tahun saja atau tangggal dan bulan saja, bahkan bisa di sembunyikan atau di munculkan terserah sobat.

Sekarang tinggal bagaimana mengatur postingan yang kita pilih selalu berada di homepage.
Ketika akan posting artikel yang ingin kita letakkan pada halaman homepage sebelum diterbitkan klik post option. Seperti gambar di bawah.
Maka akan muncul keterangan label seperti gambar di sebalah kanan.
    
Sekarang yang harus sobat lakukan adalah mengatur tanggal dan waktu.
Pilih Setel tanggal dan waktu.
Majukan ke depan tanggal waktu yang sekarang.
Misal:

Sekarang tahun 2010 bisa sobat majukan menjadi 2011. Begitu pula tanggal dan bulan bisa juga sobat majukan.
Dengan cara ini maka homepage tidak akan bergeser sebelum melampoi tanggal dan waktu yang telah sobat tentukan.

Jika postingan yang ingin dijadikan homepage ternyata sudah terposting sebelumnya maka sobat bisa edit entri dan menerbitkannya kembali.

SEMOGA BERMANFAAT..!

CARA DAFTAR ALERTPAY

---

---

Jika sobat berencana menggeluti bisnis internet akan sering menjumpai di beberapa program bisnis yang kita dianjurkan mencantumkan alat pembayaran yang berupa alertpay. Jadi tidak ada salahnya jika sobat membuat alat transaksi yang bernama alertpay ini. Cara membuatnyapun gratis dan cara verifikasinyapun cukup mudah.
Bila sobat berkeinginan membuat dan belum tahu cara daftar alertpay bisa ikuti caranya di sini. Untuk menuju tempat pendaftaran klik saja link di bawah ini.
ALERTPAY

Jika sobat klik link di atas maka akan melihat tampilan seperti pada GBR 1.
Klik signup.
Kemudian sobat akan melihat tampilan seperti pada GBR 2.
Untuk awal daftar pilih saja yang personal. Jika di kemudian hari ingin meningkatkan statusnya bisa beralih ke yang pro atau bisnis.
Jika sudah baru klik next.

GBR 1	GBR 2

Maka sobat akan di bawa pada halaman seperti yang nampak pada GBR 3.

GBR 3

Ketika memasukkan Home Phone dan Mobile Phone harus benar-benar memasukkan nomor yang masih aktif karena ini sangat penting.

Juga perhatikan cara penulisan nomornya tidak perlu menggunakan kode negara.
Misal:
021678xxxxx
031678xxxxx
081xxxx
085xxxx

Jika sudah selesai baru klik next.
Maka akan terbuka halaman baru seperti yang terlihat pada GBR 4.

GBR 4

• Masukkan email.
• Buat password
• Buat pin (antara 4 sampai 6 angka )
• Buat dua pertanyaan dan jawaban.
• Masukkan huruf dan angka verifikasi yang tertera.
• Beri tanda pada I agree to alertpays
• Jika sudah baru klik register.

Maka akan terbuka halaman seperti pada GMR 5.

GBR 5	GBR 6

Setelah terbuka halaman seperti GBR 5 maka sobat akan mendapat kiriman email dari pihak alertpay. Buka alamat email sobat dan lihat email yang diberikan oleh pihak alertpay.

Tinggal Satu langkah lagi alertpay sobat sudah jadi.
Klik link yang telah dikirimkan.
Maka akan terbuka halaman baru seperti yang terlihat pada GBR 6.
Masukkan password yang sobat buat ketika membuat account login tadi.
Kemudian klik login.
Jika yang terlihat seperti pada GBR 7 berarti alertpay sobat sudah jadi.
Coba dilihat ada berapa dollar, siapa tahu alertpay baik hati.

GBR 7

Semoga bermanfaat !
alertpay

CARA MENGGUNAKAN BLOGGER IN DRAFT

---

---

Untuk membangun sebuah blog tentunya kita memerlukan sebuah template. Saat ini blogger ingin memudahkan penggunanya dengan mengeluarkan fitur baru THE BLOGGER TEMPLATE DESIGNER.

Entah kenapa ada yang kurang suka menggunakan fitur ini. Padahal menurut saya pribadi ini sangat bermanfaat guna mengawali membangun sebuah blog.

Untuk sobat yang baru membuat blog saya sarankan menggunakan fitur ini. Mungkin ada sobat blogger yang bertanya-tanya,kenapa waktu login ke blogger link untuk fitur ini tidak muncul ?? Ini karena kita login melalui www.blogger.com.
Agar link untuk fitur ini muncul sobat harus login melalui http://draft.blogger.com.

Di bawah ini adalah gambar perbedaan antara login lewat www.blogger.com dan lewat http://draft.blogger.com.

Tampilan ketika kita login lewat www.blogger.com
Tampilan ketika kita login lewat http://draft.blogger.com

Jika sudah login lewat http://draft.blogger.com sobat klik saja pada Rancangan.
Maka sobat akan melihat keterangan gambar seperti di bawah ini.

Kemudian klik pada perancang template, maka sobat akan di arahkan di mana sobat bisa memilih template dan dengan mudah mendesainnya.

Untuk lebih jelasnya sobat bisa langsung menuju ke tkp untuk memulai mengotak-atik template yang sobat pilih.

Selamat berjuang !!

MENULIS KODE HTML AGAR TAMPIL DI POSTINGAN

---

---

Pada posting terdahulu saya pernah menulis bagaimana menampilkan kode html pada postingan dengan menggunakan text area. Untuk posting kali ini mungkin caranya agak berbeda.
Jika dulu untuk memasukkan text kita diharuskan membuat text areanya terlebih dahulu, tapi untuk cara ini kita cukup menganti beberapa kodenya saja.
Sayangnya cara ini text tidak akan berada di dalam kotak area. Tinggal terserah sobat pilih menggunakan cara yang mana.
Di bawah ini adalah kode-kode yang akan kita pakai.

KODE	GANTI DENGAN	KETERANGAN
<	&lt;	Buka kurung runcing
>	&gt;	Tutup kurung runcing
±	&plusmn;	Lebih kurang
&	&amp;	Dan
"	&quot;	Doble petik
Spasi	&nbsp;	Spasi
©	&copy;	Hak cipta
®	&reg;	Terdaftar

Cara menggunakannya:
Misalkan kita akan memunculkan kode html ke dalam posting seperti kode di bawah ini:

<a href="http://activekita.blogspot.com/2009/10/menulis-kode-html-agar-tampil-di-postingan.html">Keterangan</a>
Atau
<b:if cond='data:blog.Type == "item"'>

Maka kita akan menuliskannya seperti ini:

&lt;a href=&quot;http://activekita.blogspot.com/2009/10/menulis-kode-html-agar-tampil-di-postingan.html&quot;&gt;Keterangan&lt;/a&gt;
<br>
Atau
<br>
&lt;b:if cond='data:blog.Type == &quot;item&quot;'&gt;

Semoga bermanfaat !

CARA PROMOSI BLOG DI FACEBOOK DENGAN MEMASANG BANNER

---

---

Sudah tidak dipungkiri bahwa facebook merupakan situs jejaring sosial yang saat ini sedang populer. Bahkan melebih situs-situs jejaring sosial para pendahulunya. Dan sangat efektif sekali jika kita bisa mempromosikan blog lewat situs jejaring sosial ini.

Cara promosi blog ke facebook bisa dengan memasang link atau banner yang kita punya. Dan bagaimana cara memasangnya mungkin sudah banyak yang tahu. Untuk sobat yang belum tahu cara pasang banner di facebook bisa ikuti cara dibawah ini.

• Siapkan banner yang ingin sobat tampilkan.
• Kemudian login dulu ke facebook dengan id milik sobat.
• Setelah login baru klik link di bawah ini.
  http://apps.facebook.com/wildfire/fbhandler.ashx?mode=side_nav
• Sobat akan dibawa pada tampilan gambar seperti dibawah ini.
  
  
  
  
• Masukkan kode banner milik sobat.
  
  
  
  
• Klik add to profil / tambahkan ke profil.
  Maka akan muncul banner milik sobat.
  
  
  
• Untuk melihat hasilnya klik pada profil.
  
  
  
  
• Maka banner sobat pada facebook akan tampil seperti ini.
  
  

Semoga bermanfaat !

MEMBUAT REDIRECT PADA BLOG

---

---

Pada artikel sebelumnya saya pernah posting bagaimana membuat refresh secara otomatis tanpa kita harus mereload pada browser yang kita pakai. Jika sobat pernah membacanya kode yang saya pakai adalah seperti ini <meta content="50" http-equiv="refresh"></meta> .
Posting kali ini masih berhubungan dengan kode tersebut, yang mana kita bisa menggunakan sebagai fungsi redirect dengan menambahkan sedikit kode.

Pengertian redirect di sini kurang lebih adalah mengalihkan alamat blog yang satu ke alamat blog yang lain. Misal sobat punya dua blog dengan satu blog sudah tidak active. sobat bisa redirect blog yang tidak active ke blog yang masih active. Siapa tahu blog sobat masih terindek pada search engine dengan baik, maka jika ada pengunjung blog yang kesasar dan mengklik link blog milik sobat yang sudah tidak active maka link otomatis akan menuju blog sobat yang masih active.

Untuk membuat redirect pada blog sobat bisa menggunakan kode di bawah ini:

<meta http-equiv="refresh" content="0; url=http://activekita.blogspot.com/"></meta>

Ganti alamat url yang dituju dengan alamat milik sobat.
Cara meletakkan kodenya:

• Login ke blog sobat.
  
• Klik tata letak.
  
• Pilih edit html.
• Letakkan kode di atas dibawah kode <head> atau di atas kode </head>
• Klik simpan.

Semoga bermanfaat.

MEMBUAT REFRESH OTOMATIS DI BLOG

---

---

Jika sobat ingin blog yang sobat punya melakukan refresh secara otomatis tanpa harus mereload pada browser yang memang sudah tersedia, bisa menambahkan kode di bawah ini.

<meta content="50" http-equiv="refresh"></meta>

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html.
  Letakkan kodenya di atas kode </head>
  
• Klik simpan.

Yang perlu diingat adalah tidak semua pengunjung suka dengan fungsi refresh ini, mungkin sedikit mengganggu atau mungkin juga terlalu cepat jarak tenggang waktunya. Untuk itu sobat bisa atur tenggang waktunya dengan mengganti angka yang berwarna merah dengan angka yang sobat inginkan. Satuan kecepatannya adalah perdetik. Jika ingin 1 menit ganti dengan 60, jika ingin lebih tinggal mengalikan saja.

Semoga bermanfaat !

MEMASANG STATUS YAHOO MESSENGER DI BLOG

---

---

Bagi sobat yang ingin memasang status yahoo messenger atau ym di blog bisa menggunakan. kode di bawah ini. Sobat tinggal menyalinnya dan menambahkan widget pada sidebar milik sobat. Tentu saja status ini akan berubah menjadi online jika sobat juga online, begitu juga sebaliknya.

Cara memasangnya seperti di bawah ini.

• Masuk ke blog sobat.
• Pilih tata letak.
• Tambahkan gadget.
• pilih HTML/Javascipt.
• Salin dan masukkan kode di bawah ini.
  
  <a href="ymsgr:sendIM?darma"><img src="http://opi.yahoo.com/online?u=darma&m=g&t=1" border=0></a>
  
  Ganti kode warna merah dengan ID milik sobat tanpa @ yahoo.com.
  Untuk yang warna hijau adalah angka untuk menentukan pilihan gambar.
  Sobat bisa memilih gambar dengan memasukkan angka seperti yang ada di bawah.
  
  
  
  
• Setelah selesai mengedit baru klik simpan.

Semoga bermanfaat.

MEMBUAT RECENT COMMENT DI BLOGSPOT

---

---

Mungkin sobat ada yang ingin menambahkan recent comment pada blogspot. Caranyapun tidak begitu sulit. Sobat tinggal menambahkan alamat feed milik sobat, seperti cara di bawah ini.

• Login ke blog sobat
• Pilih tata letak.
• Klik tambah gadget.
• Pilih feed
  Tambahkan konten dari feed RSS atau Atom ke blog Anda.
  
• Masukkan alamat feed milik sobat. Pilih salah satu yang rss atau yang atom.
  Untuk yang rss cara penulisannya seperti ini
  http://activekita.blogspot.com/feeds/comments/default?alt=rss
  Sedang untuk yang atom penulisannya seperti ini.
  http://activekita.blogspot.com/feeds/comments/default
  
• Kemudian klik lanjutkan.
• Beri Judul,misal recent comments atau atau komentar baru terserah sobat.
• Sobat juga bisa memilih item yang ingin sobat tampilkan, seperti di bawah ini.
  Tampilkan item.
  Tanggal Item.
  Sumber/pengarang item.
  Buka link di jendela baru.
  
• Kemudian Klik simpan.
  Lihat hasilnya.

MEMBUAT KOMENTAR PENGUNJUNG BERBEDA DENGAN PEMILIK BLOG

---

---

Biasanya komentar antara pengunjung dan pemilik blog mempunyai tampilan yang sama. Karenanya kadang si pengunjung sulit membedakan mana yang komentar pengunjung dan yang mana jawaban pemilik blog. Untuk itu biasanya pemilik blog menyiasati dengan memberi tampilan warna background yang berbeda atas jawaban untuk pengunjung. Untuk sobat yang ingin tampilan kotak komentarnya berbeda dan belum tahu caranya bisa ikuti cara di bawah ini.
Di bawah ini adalah cara membuat komentar pengunjung berbeda dengan pemilik blog (admin )

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html.
• Beri tanda centang pada Expand template widget.
• Cari kode yang mirip di bawah ini, kemudian tambahkan kode yang berwarna merah.
  
  /* Comments ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em; text-transform:uppercase;
  letter-spacing:.2em;
  color: #999999;
  }
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }
  #blog-pager-newer-link {
  float: left;
  }
  #blog-pager-older-link {
  float: right;
  }
  #blog-pager {
  text-align: center;
  }
  .feed-links {
  clear: both;
  line-height: 2.5em;
  }
  .admin-comments{
  background:#00CC33;
  border:3px solid #FF9966;
  padding:5px;
  Kode warna merah adalah kode yang harus sobat tambahkan.
  Kode tersebut bisa juga sobat letakkan di atas kode ]]></b:skin> tinggal terserah sobat mau meletakkannya di mana.
  Kemudian kita juga bisa mengganti warna background,sobat bisa menyesuaikan kode warnanya dengan warna template sobat. Bisa lihat Kode warna di sini
  
• Setelah selesai meletakkan kode di atas tarik scroll ke bawah, cari kode seperti di bawah ini dan tambahkan juga kode yang berwarna merah.
  
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </dt>
  <b:if cond='data:comment.author == data:post.author'>
  <dd class='admin-comments'>
  <p><data:comment.body/></p>
  </dd>
  <b:else/>
  <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
  <data:comment.body/>
  </span>
  <b:else/>
  <p>
  <data:comment.body/>
  </p>
  </b:if>
  </dd>
  </b:if>
  <dd class='comment-footer'>
  
• Kode yang berwarna merah adalah kode yang harus sobat tambahkan.
  
• Jangan lupa klik pratinjau terlebih dulu, jika tidak muncul peringatan baru klik simpan.

MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS

---

---

Setelah cukup lama tidak update dan mumpung ada kesempatan,kali ini saya ingin berbagi pada teman blogger khususnya blogger baru yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.

Untuk membuatnya sobat bisa menggunakan cara di bawah ini:

• Seperti biasa login ke blog sobat.
  
• Pilh tata letak.
  
• Klik edit html.
  
• Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
  .tooltip {position:relative;}
  .tooltip span {display:none;}
  .tooltip:hover span {
  display:block;
  position:absolute;
  width:200px;
  left:20px;
  top:20px;
  background-color:#006633;
  border:3px solid #0099FF;
  padding:5px;
  font-size:15px;
  color:#000000;
  text-decoration:none;
  font-family:Verdana,arial, helvetica, sans-serif;}
  ]]></b:skin>
  
• Kemudian klik simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://activekita.blogspot.com/2010/04/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip

GAMBAR MEMBESAR KETIKA DISOROT

---

---

Memang menyenangkan kalau kita disuruh bermain-main dengan gambar. Apalagi gambar atau image yang kita suka, rasanya ingin cepat-cepat dipajang untuk dipamerkan ( kalau yang ini lagi pamer gigi ). Posting kali ini berhubungan dengan gambar zoom ala dynamic drive, yaitu gambar akan membesar ketika disorot. Maksudnya saat mouse kita arahkan ke gambar maka gambar akan lebih besar dari ukuran sebelumnya.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini.

• Masuk ke blog sobat.
• Klik tata letak.
• Pilih edit HTML.
• Cari kode </head>.
• Letakkan script di bawah ini di atasnya, hingga posisinya sbb:
  <style type='text/css'>
  border:none;
  vertikal-align:top;}
  </style>
  <script src="http://sites.google.com/site/darmasites/my-forms/gambarmembesarketikadisorot.js" type="text/javascript">
  </script>
  </head>.
• Kemudian klik simpan.

Ketika akan posting gambar atau image sobat tinggal menambahkan sedikit kode pada alamat gambar yang sobat punya.
Misal:

<img class="expando" border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" width="75" height="75">

Untuk melihat hasilnya arahkan cursor sobat pada gambar di bawah.

Semoga bermanfaat !

MERUBAH WARNA LINK PADA BLOGSPOT

---

---

Pada posting yang sebelumnya saya pernah membahas bagaimana cara menghilangkan garis di bawah link. Hubungan dengan posting kali ini adalah sama-sama mengenai sebuah link, yaitu tentang bagaimana cara merubah warna link Karena kode untuk merubah warna link letaknya sama dengan menghilangkan garis di bawah link, maka cara yang kita gunakanpun hampir sama. Untuk bernostalgia maka kita ulang lagi bagaimana caranya:

• Masuk ke blog sobat
  
• Klik tata letak
  
• Pilih edit HTML
  
• Cari kode yang hampir mirip di bawah ini:
  a:link {
  color:#0000cc;
  text-decoration: underline;
  }
  a:hover {
  color:#ff0000;
  text-decoration: underline;
  }
  a:visited {
  color:#006600;
  text-decoration: underline;
  }
  

Jika sebelumnya menghilangkan garis di bawah link kita merubah underline menjadi none, maka untuk merubah warna link di blogspot kita tinggal merubah kode warna yang di cetak biru di atas.

• Jika sudah selesai mengganti jangn lupa Simpan perubahan

Sedikit keterangan:

a:link {
color:#0000cc;
text-decoration: underline;
}
Link ini akan berwarna biru.

a:hover {
color:#ff0000;
text-decoration: underline;
}
Jika mouse kita arahkan pada link maka akan berubah menjadi warna merah.

a:visited {
color:#006600;
text-decoration: underline;
}
Jika link selesai diklik pengunjung maka link akan berubah menjadi hijau.

Semoga bermanfaat.

MEMASANG EMOTICON PADA KOTAK KOMENTAR

---

---

Ada yang bilang kotak komentar tanpa emoticon membuat blog kurang hidup. Apa benar ? Yuk kita buktikan ! Siapa tahu ini memang benar.
Bagi sobat yang belum menambahkan icon dengan berbagai karakter bisa menampilkan emoticon ini pada kotak komentar yang sobat punya. Kita bisa menggunakan icon yang biasa di gunakan pada yahoo! messenger seperti contoh di bawah ini.

:) :( ;) :D ;;) :-/ :x :P :-* =(( :-o x( :(( :)) :| =)) 8-} :-L B-( ;)) :)] ~x( :-t

Bagi yang belum tahu cara memasang emoticon pada kotak komentar bisa ikuti langkah-langkahnya:

• Masuk ke blog sobat.
• Klik tata letak.
• kemudian klik edit HTML.
• Beri tanda pada Expand Template Widget.
• Cari kode </body>
  
• Letakkan kode ini di atasnya. Hingga posisinya sbb:
  <script src='http://sites.google.com/site/darmasites/my-forms/emoticon.js' type='text/javascript'/>
  </body>
  
• Langkah selanjutnya cari kode yang mirip seperti di bawah ini.
  <p class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
  <b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='comment-form'/>
  <b:else/>
  
• Kemudian letakkan kode emotnya di bawah kode <p class='comment-footer'>
  Sehingga hasil penempatannya akan seperti di bawah ini:
  <p class='comment-footer'>
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-o
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> x(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((<br/>
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> :-L
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> B-(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> ;))
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~x(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
  <b:if cond='data:post.embedCommentForm'>
  <b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='comment-form'/>
  <b:else/>
  
• Kemudian klik pratinjau.
  
• Setelah dirasa aman baru klik simpan.
  SEMOGA BERMANFAAT

Aku juga punya di bawah .