Cara Daftarkan Blog ke Google dan Yahoo

Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.

Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.

Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.

Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan pahami tulisan berikut :

Google

1. Klik situs ini!
2. Masukkan alamat URL blog ke dalam kotak yang telah disediakan
3. Ketikkan kata komentar atau keyword yang berhubungan dengan blog kita pada kotak yang tersedia.
4. Masukkan kode verifikasi
5. Tekan tombol Add URL

Yahoo

1. Klik situs ini!
2. Kemudian muncul 2 pilihan, pilih Submit to Website or Webpage
3. Masukkan alamat URL blog ke dalam kotak yang telah disediakan
4. Tekan tombol Submit URL

Read More

Cara Membuat Tabmenu

Tabmenu adalah daftar menu yang dipasang di bagian sidebar blog. Fungsinya adalah untuk menambah menu blog sehingga blog bisa memuat banyak informasi namun tampilan blog tetap simple dan tetap tertata rapi. Perhatikan tabmenu di sidebar blog saya di samoing kanan. Di situ ada tiga menu yaitu, My Friends, My Linkers, My Album. Nah itulah contoh tabmenu. Nampak sekali bagian sidebar blog ini cukup atraktif.

Sebenarnya tutorial ini tidak untuk mengajari para blogger, namun sebagai catatan penting saya setelah beberapa kali gagal membuat tabmenu ini. Siapa tahu di antara blogger pernah mengalami dan belum bisa membuat tabmenu ini, tutorial ini bisa menjadi tambahan referensi untuk mencoba kembali.

Berikut langkah-langkahnya:

1. Sign in dulu ke blog
2. Klik bar 'Tata letak' atau 'Setting'
3. Setelah tampil, klik 'Edit HTML'.
4. Terus klik tombol 'DOWNLOAD TEMPLATE LENGKAP' di pojok kanan atas yang berwarna biru tebal
5. Kemudian centang kotak kecil di samping tulisan 'Expand Template widget'
6. Setelah itu cari kode di bawah ini

]]></b:skin>

7. Setelah ketemu,pasang kode di bawah ini di atas kode tersebut
   /* Menu Tab View<br> ----------------------------------------------- */<br> div.TabView div.Tabs {<br> padding-top: 0px;<br> height: 24px;<br> overflow: hidden;<br> }<br> <br> /* Menu Utama */<br> div.TabView div.Tabs a {<br> float: left;<br> display: block;<br> width: 95px; /* ukuran lebar menu */<br> text-align: center;<br> height: 24px; /* ukuran tinggi menu */<br> padding-top: 3px;<br> margin-right:1px; /* jarak antarmenu */<br> vertical-align: middle;<br> border: 1px solid #CCC; /* warna border menu */<br> border-bottom-width: 0;<br> font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */<br> font-size: 12px; /* besar hurup menu */<br> letter-spacing: 0px;<br> background-color: #A4A4A4; /* warna latar menu */<br> color: #FFFFFF; /* warna hurup menu */<br> -moz-border-radius-topleft:5px;<br> -moz-border-radius-topright:5px;<br> -webkit-border-top-left-radius:10px;<br> -webkit-border-top-right-radius:10px;<br> }<br> <br> div.TabView div.Tabs a.Active {<br> background-color: #888888; /* warna background menu aktif */<br> color: #FFFFFF;<br> }<br> <br> div.TabView div.Tabs a:hover {<br> background-color: #999999; /* warna background menu hover */<br> color: #FFFFCC;<br> font-weight: bold;<br> }<br> <br> /* Kotak Utama */<br> div.TabView div.Pages {<br> clear: both;<br> border: 1px solid #CCC; /* warna border kotak utama */<br> overflow: hidden;<br> background:url("http://i563.photobucket.com/albums/ss76/peace_enes/bgtabview.gif"); /* background kotak utama */<br> }<br> <br> div.TabView div.Pages div.Page {<br> height: 100%;<br> padding: 0px;<br> overflow: hidden;<br> }<br> <br> div.TabView div.Pages div.Page div.Pad {<br> padding: 3px 5px;<br> font-size: 11px; /* besar hurup kotak utama */<br> }
8. Selanjutnya cari lagi kode di bawah ini

</head>

9. Setelah ketemu, pasang kode di bawah ini sebelum / di atas kode tadi
<script src='http://sites.google.com/site/ruangsc/enes/tabview.js' type='text/javascript'/>
10. Tahap terakhir adalah memasang kode di bawah ini di sidebar blog Anda
    <form action="tabview.html" method="get"><br> <div id="TabView" class="TabView"><br> <div style="width: 100%;" class="Tabs"><br> <a >Menu 1</a><br> <a >Menu 2</a><br> <a >Menu 3</a><br> </div><br> <div style="width: 99%; height: 225px;" class="Pages"><br> <br> <!--Awal Menu 1--><br> <div class="Page"><div class="Pad"><br> <marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="1" onmouseout="this.start()"><br> <ol type="1"><br> <li>Sub Menu 1.1</li><br> <li>Sub Menu 1.2 </li><br> <li>Sub Menu 1.3</li><br> <br> </ol></marquee><br> </div></div><br> <br> <!--Akhir Menu 1--><br> <br> <!--Awal Menu 2--><br> <div class="Page"><div class="Pad"><br> <marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="1" onmouseout="this.start()"><br> <ol><br> <li>Sub Menu 2.1</li><br> <li>Sub Menu 2.2</li><br> <li>Sub Menu 2.3</li><br> </ol></marquee><br> <br> </div></div><br> <!--Akhir Menu 2--><br> <br> <!--Awal Menu 3--><br> <center><div class="Page"><div class="Pad"><br> <marquee <br> onmouseover="this.stop()" direction="up" width="100%" scrollamount="1" onmouseout="this.start()"></p> <p><ol></p> <p><li> Sub Menu 3.1</li></p> <p><li> Sub Menu 3.1</li></p> <p><li> Sub Menu 3.1</li><br> </ol></marquee><br> </div></div></center><br> <!--Akhir Menu 3--><br> <br> </div></div></form><br> <br> <script type="text/javascript">tabview_initialize('TabView');</script><br> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://abulonline.blogspot" target="_blank" title="Tabview Widget">get this widget</a></div>

Jika sudah berhasil, silahkan Anda memodifikasi dan mengubah data sesuai dengan kebutuhan. Jika belum, cobalah diperiksa kembali kode-kodenya kali aja ada yang kurang atau mungkin template Anda tidak cocok. Tapi yang pasti jangan putus asa karena saya juga sedikit modeng (maksudku momet dan jilemet) waktu mempelajari materi ini.

Selamat mencoba dan sukses selalu!

Tutorial : Abulladi Elqail

Read More

Cara Membuat Read more

Semula saya tidak terlalu tertarik dengan materi ini. Ketika posting-an saya semakin banyak, di situ baru terpikir, oh iya ternyata 'Read more' atau 'Baca selanjutnya' dan sejenisnya yang merupakan penggalan dari sebuah artikel/posting, sangat dibutuhkan untuk penataan paragrap demi paragrap sehingga halaman muka blog bisa memuat lebih banyak judul yang bisa terbaca.

Saya mencoba mempelajari dan memahami berbagai tutorial dari para blogger, ternyata agak susah. Kode script-scriptnya terlalu rumit untuk dipahami belum lagi bagaimana cara menemukan kode itu di 'Edit HTML' blog saya. Ya maklum namanya juga belajar pasti awalnya kesulitan. Kata pepatah 'Every beginning is difficult', setiap permulaan itu adalah kesulitan. Sampai akhirnya saya menemukan blog 'Kang Rohman', di situ saya sedikit lebih mudah memahami karena kode-kodenya lebih simple.

Langsung saja saya jelaskan bagaimana cara membuatnya:

1. Sign in dulu ke blog
2. Klik bar 'Tata letak' atau 'Setting'
3. Setelah tampil, klik 'Edit HTML'.
4. Terus klik tombol 'DOWNLOAD TEMPLATE LENGKAP' di pojok kanan atas yang berwarna biru tebal
5. Kemudian centang kotak kecil di samping tulisan 'Expand Template widget'
6. Setelah itu cari kode di bawah ini
   
   
   <data:post.body/>
   atau
   
   
   <p><data:post.body/></p>



7. Jika sudah ketemu, hapus kode tersebut dan diganti dengan kode di bawah ini:
   
   
   <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p> </b:if>
   
   
   
8. Kemudian klik tombol 'Simpan Template' atau 'Save Template'
9. Selesai.

Selanjutnya ketika posting baru, di kotak area posting akan muncul kode:

<span class="fullpost"> </span>

Untuk tulisan/penggalan kalimat yang mau ditampilkan di halaman muka, ditempatkan sebelum kode

<span class="fullpost">

dan sisanya ditempatkan di atas atau sebelum kode

</span>

Gampang bukan, selamat mencoba!

Tutorial : Abulladi Elqail

Read More

Cara Membuat Gambar (image) Berputar

Iseng-iseng saya coba posting tutorial bagaimana cara membuat gambar bisa berputar-putar seperti gambar di samping. Saya posting judul ini karena animasi ini saya anggap jarang digunakan oleh para blogger walaupun saya sendiri tahunya dari blogger juga. Biasanya yang sering saya temukan di blog-blog sobat blogger adalah artikel-artikel tentang bagaimana cara membuat buku tamu, membuat teks berjalan, membuat teks berkedip, dan animasi-animasi lainnya. Di samping itu, dengan rajin posting, penampilan blog saya lebih atrakrif dan produktif bisa dibaca oleh pengunjung, tidak kelihatan gersang, kosong mlopong seperti kepompong.

Langsung saja cara membuatnya sebagai berikut:
(Ingat, sebelum ke tahapan langkah-langkah berikut, Anda harus mempersiapkan terlebih dahulu gambar dengan ukuran tidak lebih dari 200 x 200 pixel disimpan di hardisk, jangan di dompet).

1. Klik situs Satisfaction.com, tidak perlu login atau konfirmasi email.
2. Setelah halaman terbuka, arahkan perhatian pada kotak dialog yang muncul dengan gambar berputar. Di bawah gambar tadi tertulis "PUT YOUR IMAGE ON A CUBE",
3. Klik tombol "BROWSE" yang terdapat di bawah tulisan yang berwarna merah, setelah muncul kotak dialog, cari file gambar yang telah tersimpan, setelah ketemu klik tombol "Open". Kotal 'File' akan terbaca.
4. Setelah selesai, klik tombol "UPLOAD". Pada tahap ini, gambar yang telah di-upload tersebut akan muncul dengan berputar-putar.
5. Kemudian langkah terakhir klik tombol "Copy HTML code" yang berlatar warna kuning dan selesai.

Proses selanjutnya Anda tinggal mem-paste kode html tadi ke dalam blog di bagian sidebar. Selamat dan sukses selalu buat kita semua. Semoga hari ini lebih baik dari kemarin, amin.

Written by Abulladi Elqail

Read More

Cara Buat Buku Tamu

Posting ini saya kirim kepada sahabat saya Novianti Suradji sebagai rasa tanggung jawab dan untuk memenuhi janji saya kepada dia untuk sharing cara membuat Buku Tamu.

Untuk memperkaya dan mempercantik tampilan blog , keberadaan Buku Tamu memang sangat diperlukan. Fungsinya adalah sebagai media untuk menulis pesan, ta'aruf (kenalan) sesama blogger, silaturrahim, atau sekedar blogwalking.

To the point aja, berikut langkah-langkahnya :
Pertama, daftar dulu di http://www.shoutmix.com, nanti akan keluar tampilan seperti screen short di bawah ,kemudian klik tulisan " Create Your Shoutmix Now", isi data anda seperti nama, password dan email anda. Jangan lupa centang juga tuh Term of Servicenya. kemudian klik Continue.

Kemudian lanjutkan

Jika anda sudah terdaftar, tinggal login dengan user name dan pasword tadi.

Dalam Choose style pilih aja yang di sukai.disitu ada compact, tag dll. jika udah klik Continue.

Kalau mau langsung pasang tinggal klik Get code, kalau mau diseting warna teks, backround, dsb. pilih style & color

Copy paste kode HTML nya dan pasang di blog anda

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

Cara pasang di blognya seperti ini :

Untuk blogger dengan template klasik :

Log in ke blogger.com dengan ID anda

Klik menu Template

Klik Edit HTML

Paste kode HTML shoutbox yg telah di copy itu di tempat yang anda inginkan

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.

Klik tombol Preview untuk melihat perubahan yang kita buat.

Jika sudah cocok dengan perubahan tadi, klik Save Template Changes

8. Selesai

Untuk Blogger baru :

Silahkan Login ke blogger dengan ID anda

Klik menu Layout

Klik Page Element

Klik Add a Page Element / add Gadget

Klik tombol Add Gadget dan klik tulisan HTML/JavaScript

Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu, atau Silahkan Isi Buku Tamu atau apa saja deh

Paste kode HTML shoutbox anda di dalam form Content

8Klik tombol Save Changes

Drag & Drop element yang telah anda buat tadi di tempat yang di sukai

Tekan tombol Save

Selesai

Untuk menyesuaikan buku tamu dengan lebar sidebar blog agar nampak lebih rapi, maka ukuran lebar dan tingginya bisa diubah. Tinggal dilihat kode HTML-nya, cari kata 'width' untuk lebar, 'height' untuk tinggi, kemudian ganti angkanya lebih besar atau lebih kecil sesuai dengan kebutuhan.

Selamat Mencoba Kak Yanti, kalau masih belum bisa nanti saya ajari di kantor aja yach. Have a nice weekend!

Read More

Memasang gambar pada tabel

Coba perhatikan tabel di atas yang sudah dipasang gambar!

Untuk membuat tabel seperti di atas, tinggal di-copas kode script di di bawah ini:

<center><table border="1" width="100%" height="120">

<tr><td width="125" rowspan="4"

<img src="http://i686.photobucket.com/albums/vv222/Lembagaqurani/Fotoku-1.jpg"></td>

<td height="30">tempat teks</td></tr>

<tr><td height="30">tempat teks</td></tr>

<tr><td height="30">tempat teks</td></tr>

<tr><td height="30">tempat teks</td></tr>

</table></center>

Angka-angka di atas menunjukkan lebar tabel, lebar kolom (width) dan tinggi baris (height) bisa disesuaikan menurut kebutuhan. Begitu juga tulisan yang berwarna merah diatas juga diganti dengan "URL image" tempat kita menyimpan gambar tersebut. Jika kita sudah paham betul, kita bisa memodifikasi tabel di atas sesuai dengan keperluan atau model yang kita inginkan.

Selamat mencoba!

Read More