Horizontal Tab Menu 10

Kemaren saya dapet permintaan supaya posting cara buat tab menu halaman. Yah saya berusaha memenuhi permintaan mereka. Tapi jangan diketawaain ya, kalo penjelasannya amburadul...
Pengen punya tab menu halaman di blog kamu. Tab menu sebenarnya buanyak macam dan jenisnya. Cuman ini ada satu jenis yaitu Horizontal tab menu 10, yang sudah saya praktekkan di blog saya.
Sebenarnya kalau kalian mau belajar tinggal lihat di sini. Tapi karena artikelnya bahasa Inggris, saya ingin sedikit membantu bagi sobat yang kesulitan memahaminya. Nah gini nih....


Kalo di artikel di link itu, kita musti download gambar dan kemudian di link di googlepages atau yellow pages. Itu maksudnya supaya gambar yang kita pake di blog kita berhubungan sama blog kita sendiri. Akan tetapi, daripada kerepotan, (termasuk saya) saya langsung menuju langkah berikut ini ...

Langkah Pertama
1. Login ke blog sobat, lalu masuk ke menu layout.
2. Setelah itu klik tab menu Edit HTML.
3. Disarankan supaya kamu klik download full template. Ini dimaksudkan supaya bila nanti ada kesalahan langkah yang kamu lakuin dan template kamu rusak. Kamu bisa copy semua kode yang sudah kamu download itu ke Edit HTML, dan blogmu akan kembali seperti semula.
4. Copy dan paste di atas kode ini (klik dulu link ini) Langkah 1 nomor 7
Ini nih kodenya, taruh di atas kode di atas tadi. Di atasnya loh. Jangan sampe keliru...

/*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ahom24.googlepages.com/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ahom24.googlepages.com/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }

5. Cari kode berikut pada Edit HTML di blogger kamu
liat di link ini Langkah 1 Nomor 8

6. Ganti kode berikut (lihat yang warna merah). Jangan dihapus semua loh. Cuma ganti sedikit doang. Perhatiin link ini Langkah 1 Nomor 9


7. Klik . Tunnggu sebentar sampai perubahan kamu intu tersimpan


Langkah Kedua
1. Klik pada tab halaman Page Element, kayak gambar ini nih....

2. Klik pada tab halaman Add a Page element yang ada di atas header element. Coba lihat gambar ini deh....

3. Setelah masuk ke window pop up, Klik tombol add to blog pada HTML/JavaSript, kayak gambar di bawah ini nih (supaya juelas gitu loh)...

4. Copy dan paste semua kode di bawah ini pada kolom tersebut.

<div id="tabs10"> <!-- tabs10 begin --> <ul> <!-- Change the links with your own links --> <li id="current"><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="#"><span>Order</span></a></li> <li><a href="http://www.obralplus.com/?id=rohman"><span>Obral Plus</span></a></li> <li><a href="http://www.resepbisnis.com/?id=rohman"><span>Belajar Website</span></a> </ul> </div ><!-- tabs10 end -->

5. Jangan lupa alamat link nya diganti sesuai keinginanmu. Gantinya di "#". Nah # itu diganti alamay link. Misalnya http://google.com. Inget tanda " yang menjepit link jangan dihapus loh. Terus nama menu juga bisa diganti. Contohnya Home itu bisa diganti Menu, tinggal diketik aja.. Ati-ati loh, pokoknya jangan menghapus yang laen. Oke. Cukup menghapus yang perlu dihapus, dan mengganti yang perlu diganti... Ya...!!!
6. Klik
7. Selesai. Lihat deh hasilnya di blog kamu.... Di reload yah...

(Sori yah, kalo beberapa kode musti kamu lihat di css library. Soalnya aku belum bisa masukin scrip sebagai teks saat posting. Kalau ada yang bisa, tolong diajarin ya ....

SELAMAT MENCOBA

Pasang Sitemeter

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan klik di sini untuk menuju menuju situs http://www.sitemeter.com



2. klik tulisan Sign Up untuk melakukan pendaftaran



3. klik tombol bertuliskan Next



4. Klik tombol Next lagi



5. Isi semua tabel yang ada lalu klik tombol Next lagi



6. Isi lagi tabel yang ada, lalu klik tombol Next lagi



7. klik tombol Next lagi



8. klik tombol Next lagi ( cape dech next..next melulu )



9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan



10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com



11. Silahkan login dengan id anda



12. Bila sudah login, Klik menu Manager



13. Klik Menu Meter Style untuk memilih gaya dari site meter anda



14. Pilih style yang anda sukai, kemudian klik tombol Select



15. Klik menu HTML Code



16. Klik tulisan Adding site Meter to a Blogger.com Site



17. copy semua kode HTML yang di berikan lalu paste pada Notepad



18. Klik menu Logout untuk keluar dari situs tersebut



19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
    
    
    
    

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda



2. Klik menu TEMPLATE



3. Klik Edit HTML



4. Klik Edit (yang ada pada bar menu browser anda)



5. Klik Find (on this page)... --> untuk mempercepat pencarian



6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find



7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi



8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode ...kode site meter...


Untuk blog dengan Template baru :

1. Login di blogger dengan ID anda



2. Klik menu Layout



3. Klik Page Elements



4. Klik Add a Page Element



5. Klik ADD TO BLOG pada menu HTML/JavaScript



6. Tulis Judul site meter anda pada pada isian di sebelah form Title (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)



7. Copy & paste kode Site meter pada kolom Content



8. Klik tombol Save Changes



9. Klik Element yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)



10. Klik tombol PREVIEW untuk melihat perubahan yang baru di lakukan



11. Bila sudah cocok dengan perubahan tadi, klik tombol SAVE



12. Selesai

Selamat mencoba.


Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....

MEMBUAT SHOUT BOX

Shoutbox atau kotak pesan sangat penting keberadaan dalam blog fungsinya untuk setiap pengunjung dapat meninggalkan pesan atau sekedar menyapa kepada siempunya blog , ada beberapa situs penyedia shoutbox free diantaranya adalah www.shoutmix.com, pada modul ini kita menggunakannya untuk membuat kotak pesan, Untuk menambahkan sebuah shoubox atau kotak pesan pada blog ikuti langkah berikut ini :

Buka dua jendela browser untuk memasang shoutbox ini yang satu adalah untuk blog kita dan pastikan sudah sign ini ke dalam blog. Jendela yang kedua tulis pada adreess alamat: www.soutmix.com sampai muncul halaman berikut ini

klik Create Your Shoutbox Now

Isi form yang disediakan, username, password, nama dan email yang digunakan, centang pada bagian I have read… , setelah itu klik Continue, maka muncul halaman dibawah ini

Pilih salah satu bentuk shotbox yang sesuai dengan ukuran kolom blog, isi verifikasi kata,

setelah itu klik Continue, setelah itu muncul halaman dibawah ini

klik Go to My Control panel Now

Klik Get Code pada kolom Quick Start

Klik pada bagian Place Shoubox on Webpage

Blok seluruh isi kotak Generated Codes trus klik kanan dan Copy
Selanjutnya buka halaman layout blog,

pilih Layout pada bagian panel control

Pada bagaian Template di Elemen halaman klik Tambahkan sebuah Elemen halaman maka akan mucul kotak seperti dibawah ini

Pilih dan klik HTM/JavaScript, maka akan muncul kotak dibawah ini

isi Judul pada Kotak Judul misalnya Kotak Pesan, My Shoubox dll, dan pada bagian konten Paste code script dari shoutmix dengan cara klik kanan didalam kotak konten kemudian pilih paste, setelah itu klik simpan perubahan, dan untuk melihat hasilnya klik lihat blog.