bukan-rahasia: Navigation/Menu

Showing posts with label Navigation/Menu. Show all posts

Saturday, August 27, 2011

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

Kode CSS:

/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

Kode HTML:

<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget

7. Setelah pop up window muncul, pilih opsi HTML/Javascript

8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:

9. Klik save.

10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Wednesday, July 6, 2011

Cara Membuat Super Vertical CSS Menu Blogger/Blogspot

Vertical menu (menu yang berupa list dalam posisi vertikal) bisa menjadi alternatif navigasi blog Blogger anda. Menu ini biasa diletakkan di bagian sidebar, baik di atas maupun dibawah.

Dalam posting ini, saya persembahkan dua vertical menu dengan CSS murni dan image (gambar), yang setting dan pemasangannya di blog Blogger/Blogspot sangat mudah.

Kode CSS:

<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeOHBG5Zqf4aG2U5-qwYNk5PY1NeZP5Z3k8ELhRvy7wxqb7RWRtuIGxn1zcqwgBdPpvAJtRVNVAKkJ2p7WLwyAihOrtGEBZMnucFQcqxX0eizTg_-lAop3fv4JuzPTeyUGXL_ii1oFyA/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeOHBG5Zqf4aG2U5-qwYNk5PY1NeZP5Z3k8ELhRvy7wxqb7RWRtuIGxn1zcqwgBdPpvAJtRVNVAKkJ2p7WLwyAihOrtGEBZMnucFQcqxX0eizTg_-lAop3fv4JuzPTeyUGXL_ii1oFyA/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>

Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeOHBG5Zqf4aG2U5-qwYNk5PY1NeZP5Z3k8ELhRvy7wxqb7RWRtuIGxn1zcqwgBdPpvAJtRVNVAKkJ2p7WLwyAihOrtGEBZMnucFQcqxX0eizTg_-lAop3fv4JuzPTeyUGXL_ii1oFyA/s1600/menu4.gif sendiri.
Kode HTML:

<div id="menu4">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Kode CSS:

<style type="text/css">
#menu2 {width: 200px;border-style: solid solid none solid;border-color: #677D92;border-size: 1px;border-width: 1px;margin: 10px;}
#menu2 ul {list-style: none;margin: 0;padding: 0;}
#menu2 li a {font-size: 80%;font-weight: bold;font-family: Verdana, Arial, Helvetica, sans-serif;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu2 li a:link, #menu2 li a:visited {color: #fff;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0O4q8ZqJZSJU3_DVqbcANXCYIHfUA7WmVLlP0CYeGzwMao4XgjqZi1_2LdJgkJIN2AZ6TuCG_i9iJkHJukN1m_0SFza0sgE_SW23ysYHbBdTpK_6dK_mgsY1YLZOoootej_DOxhq-j4/s1600/menu2.gif);padding: 8px 0 0 10px;}
#menu2 li a:hover, #menu2 li #current {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0O4q8ZqJZSJU3_DVqbcANXCYIHfUA7WmVLlP0CYeGzwMao4XgjqZi1_2LdJgkJIN2AZ6TuCG_i9iJkHJukN1m_0SFza0sgE_SW23ysYHbBdTpK_6dK_mgsY1YLZOoootej_DOxhq-j4/s1600/menu2.gif) 0 -32px;padding: 8px 0 0 10px;}
#menu2 li a:active {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0O4q8ZqJZSJU3_DVqbcANXCYIHfUA7WmVLlP0CYeGzwMao4XgjqZi1_2LdJgkJIN2AZ6TuCG_i9iJkHJukN1m_0SFza0sgE_SW23ysYHbBdTpK_6dK_mgsY1YLZOoootej_DOxhq-j4/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}
</style>

Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0O4q8ZqJZSJU3_DVqbcANXCYIHfUA7WmVLlP0CYeGzwMao4XgjqZi1_2LdJgkJIN2AZ6TuCG_i9iJkHJukN1m_0SFza0sgE_SW23ysYHbBdTpK_6dK_mgsY1YLZOoootej_DOxhq-j4/s1600/menu2.gif sendiri.
Kode HTML:

<div id="menu2">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#>Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Cara Membuat dan Memasang Vertical Menu CSS:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS </head> (gunakan Ctrl + F untuk mencari)

3. Save template.

4. Copy Kode HTML, ganti # dengan url-url blog atau url apapun yang ingin dipasang. Ganti kata-kata Home, Products, dan lain-lain dengan anchor text yang diinginkan. Tambahkan/hapus baris antara <li> dan <li> sebelum </ul>untuk menambah/menghapus menu.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

6. Setelah pop up window muncul, pilih opsi HTML/Javascript dan masukkan kode HTML.

7. Klik save.

8. Drag/geser widget menu vertical tersebut ke posisi yang diinginkan.

9. Save lagi.

10. Done!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Monday, June 27, 2011

Cara Membuat Menu Pulldown Plus Tombol/Button

Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah.

Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

Dan akan tampil seperti ini:

Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form:

<form name="lompat">
<select name="menu">
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>

Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:

<option> -- Pilih Tutorial -- </option>

Berikut script lengkapnya:

<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>

Contoh implementasinya (sekalian chek the link):

Kostumisasi:

- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas menu pull down.

- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, anda dapat dengan mudah memasangnya sebagai widget/gadget.

Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript

That's it. Have fun!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Friday, June 24, 2011

Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List)

Pada dasarnya, hampir semua menu menggunakan struktur HTML list, dalam hal ini adalah unordered list (tag ul) atau daftar tak berurutan yang merangkum keseluruhan list (tag li). Segala bentuk navigasi yang berupa menu menggunakan struktur dari tag-tag tersebut dan kemudian ditambahi dengan aturan-aturan yang membentuk tampilan, fungsi, serta efek yang menarik (CSS dan Javascript).

Unordered list digunakan untuk membentuk susunan list/daftar yang tidak disusun berdasarkan urutan angka. Sedangkan untuk struktur list yang berurutan (ordered list <ol>) disusun berdasarkan urutan angka; dari 1, 2, 3, dan seterusnya. Tentang ini, akan saya bahas pada kesempatan posting selanjutnya.

Dengan sedikit styling, list tersebut akan muncul dengan diawali titik, gambar, ataupun simbol lain sesuai dengan aturan list styling yang dibawa oleh template. Secara advanced, dengan ditambahi styling, fungsi, dan efek, list akan menjadi menu horizontal, vertical, atau menu-menu lain yang sangat menarik dan eye-catching.

Struktur dasar dari unordered list diawali dengan tag <ul> dan ditutup dengan closing tag <ul>. Di dalamnya terdapat susunan list-list yang masing-masing berada dalam tag <li> dan </li>.

<ul>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
</ul>

Tanpa aturan luas dan tinggi, baik dengan HTML maupun CSS, tampilan list akan muncul dalam urutan per baris:

text/item disini
text/item disini
text/item disini
text/item disini
text/item disini

Ide penggunaan list sederhana ini akan mempermudah dalam membuat list secara manual, baik untuk kepentingan membuat list di dalam posting maupun membuat menu yang akan ditampilkan di sidebar. Hampir seluruh navigasi menu di bagian sidebar blog ini saya buat dengan menu list manual. Mengapa? Ada beberapa alasan kuat mengapa saya membuat menu list secara manual:

Kostumisasi isi lebih mudah daripada harus menggunakan widget khusus, misalnya label. Kita dapat dengan mudah melakukan perubahan tanpa harus mengedit Template HTML. Misalnya ketika harus mengubah anchor text, mengaplikasikan atribut (misalnya atribut nofollow) pada label, dan bebas melakukan CSS styling.
Tahukah bahwa sebagian besar widget yang memuat automatic generated list seperti popular post, recent post, dan widget-widget navigasi lain yang kebanyakan menggunakan feed links atau redirect links? Link-link semacam itu tidak di-indeks oleh search engine, sebagaimana yang telah dijelaskan Google dalam Panduan dan Kriteria Google Quality Content. Untuk memperkuat page structure, sebaiknya perbanyak link list yang langsung mengarah ke link/halaman yang dituju.
Dapat dengan sesuka hati mengatur isi menu, tanpa hasil generating dari widget yang kadang tidak sesuai dengan keinginan. Misalnya, untuk popular post, anda dapat dengan mudah memanipulasi isinya untuk memaksimalkan posting yag jarang terjamah pengunjung. :P
Dapat membuat list non menu (yang bukan digunakan sebagai navigasi) dengan mudah di bagian sidebar. Misalnya untuk membuat list tertentu yang berfungsi sebagai informasi (anda dapat melihat contohnya di bagian sidebar kanan bawah, tepatnya di bawah logo copyscape ^_^).

Untuk membuat list menu yang berisi link, cukup tambahkan tag a beserta anchor text-nya di dalam tag li:

<ul>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
</ul>

Contoh hasilnya:

Tips Meningkatkan Jumlah Pageview Blog
Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
Memahami Karakteristik dan Cara Optimalkan Label Blogger
Fitur Baru: Blogger Custom Favicon dan Cara Membuatnya
HTML Link, Link Gambar, dan Atribut-atribut Penting

Anda dapat dengan mudah membuatnya di sidebar sebagai pengganti widget menu yang isinya dapat diatur secara manual, sehingga dapat di-handle secara penuh. Untuk membuat list menu semacam ini di sidebar, masuk ke Dashboard > Design/Rancangan > klik add a gadget/tambah gadget > pilih HTML/Javascript. Beri judul sesuai isi menu dan susun list sesuai keinginan. Tampilan list menu akan mengikuti aturan yang telah dibawa oleh template blog (inherited).

Itulah dasar dari unordered HTML list dan menu list. Selanjutnya ke depan saya akan presentasikan beberapa konsep lain dari berbagai macam elemen dan struktur list web/blog beserta styling-nya dan juga akan ada beberapa menu horizontal dan vertical yang akan saya persembahkan (Insya Allah).

Wednesday, June 15, 2011

Memahami Karakteristik dan Cara Optimalkan Label Blogger

Label pada blog ber-platform Bloggger (Blogspot) memiliki fungsi sebagai pengelompok posting berdasarkan kriteria/kategori tertentu. Dengan adanya label, diharapkan pengunjung/pembaca blog dapat dengan lebih mudah mencari bagian/kategori tertentu dari posting-posting (artikel-artikel) sesuai dengan yang dia inginkan. Akan tetapi ada beberapa karakteristik khusus yang membuat "Label Blogger" berbeda dengan fitur kategori pada blog berplatform lain (category pada WordPress misalnya). Memahami beberapa karakteristik ini diharapkan dapat memaksimalkan fungsi label dan juga menghindarkan dampak buruk terutama untuk SEO blog Blogger/Blogspot:

1. Cara Membuat Label Blogger/Blogspot (Basic Step untuk Pemula)

Ada dua cara membuat label:

a. Membuat label ketika di halaman new post/buat posting baru (post editor)

Ketika sedang membuat posting, anda dapat langsung membuat label.

Lihat di bagian bawah kotak post editor

Tuliskan label yang diinginkan, bisa lebih dari satu

atau jika anda sudah memiliki label-label, klik "show all" dan klik label-label yang diinginkan

b. Membuat dan mengedit label di halaman "edit posts".

Centang satu atau beberapa posting yang ada di bagian bawah label editor seperti di atas, kemudian pilih label/buat label baru/hapus label pada menu dropdown "Label Actions..."

2. Karakteristik Umum Label Blogger

a. Susunan label yang ditampilkan pada bagian link label baik di atas atau di bawah posting disusun sesuai abjad, misalnya: Label: Blogging, Cheat, Download, dan seterusnya.

b. Label Blogger bukan lah pengelompokan dengan sistem direktori, namun hanya pengelompokan berdasarkan hasil posting yang ditandai dengan label tertentu dan merupakan perintah pencarian (search label). Ini merupakan kelemahan dan perbedaan Label Blogger dengan category WordPress, dimana category merupakan pengelompokan direktori, sehingga ada parental category, child category, dan seterusnya.

c. Karena url label sebenarnya merupakan perintah search (contoh url-nya: http://bukan-rahasiia.blogspot.com/search/label/Blog%20Design), maka label bukanlah link permanent (permalink). Atau, lebih mudahnya, bisa dibilang label bukan lah url yang sesungguhnya. Label hanya terbentuk sebagai hasil url perintah pencarian (contohnya seperti url pencarian seach engine). Oleh karena itu, search engine tidak memperhitungkan label sebagai link/url yang sah untuk diindeks. Itulah mengapa ketika anda masuk ke Google Webmaster Tools, ada informasi bahwa link-link label di-restricted oleh robot.txt. Efeknya, label yang terindeks justru malah berdampak buruk pada SEO.

d. Jika anda menggunakan menu/navigasi breadcrumbs (khususnya seperti yang telah saya buat dan beberapa lain yang sejenis), label yang diambil adalah label yang paling terakhir, sehingga apa bila anda membubuhkan lebih dari satu label pada suatu posting, dan karena label diurutkan sesuai abjad, maka label yang ditampilkan di menu breadcrumbs adalah label dengan abjad paling akhir dari posting tersebut. Jika label yang dimunculkan oleh breadcrumbs kurang tepat dan tidak sesuai dengan yang diinginkan, maka optimalisasi SEO pun jadi kurang maksimal.

Contoh: suatu posting memiliki label: "Design, HTML, Trik". maka hasil generating menu breadcrumbs adalah:

Browse >> Home >> Trik >> Judul Posting.

3. Memaksimalkan Fungsi Label untuk Navigasi dan SEO

a. Pasang label sebagai alat navigasi berdasarkan kelompok posting, baik pada link list label yang sudah disediakan sebagai widget bawaan Blogger/Blogspot ataupun pada menu/navigasi lain, misalnya menu horizontal. Fitur-fitur semacam ini dapat membantu pengunjung/pembaca blog mencari posting yang diinginkan sesuai kelompok/kategori tertentu.

b. Disarankan untuk tidak terlalu banyak membubuhkan label pada suatu posting, sehingga tidak membingungkan pengunjung/pembaca blog. 4 atau 5 label pada suatu posting sudah merupakan batas maksimal yang dapat diterapkan.

c. Karena label bukanlah url yang sesungguhnya (permalink), untuk SEO, maka sebaiknya label tidak diikutsertakan sebagai link yang harus diindeks search engine. Caranya adalah dengan membuat link label bersifat nofollow. Tambahkan rel=nofollow pada setiap link label ketika anda membuat/membubuhkan link label secara manual. Cara ini digunakan apabila anda menambahkan link label secara manual di bagian isi posting atau menu/navigasi tambahan.

Contoh penambahan atribut nofollow pada hyperlink (tag a):

<a href="http://bukan-rahasiia.blogspot.com/search/label/Widgets" rel="nofollow">Widgets</a>

Jika anda ingin menambahkan nofollow widget label otomatis bawaan Blogger dan juga label yang muncul di bagian bawah/atasposting, maka atribut nofollow harus ditambahkan melalui edit HTML pada tag xml label. Lihat: Cara Membuat/Mengubah Label Blogger Jadi Nofollow

d. Untuk mengatasi pemunculan urutan breadcrumbs dengan label yang tidak sesuai atau yang tidak diinginkan, maka berhati-hatilah dalam membuat label untuk suatu posting. Pastikan label yang anda ingin munculkan di breadcrums adalah label yang ingin dioptimalkan. Sebaiknya jangan terlalu banyak menggunakan label pada suatu posting dan lihat apakah urutan abjad terakhir pada nama label adalah yang ingin dimunculkan di breadcrumbs. Label yang sesuai dapat berpengaruh baik pada SEO.

Happy blogging, mates!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Thursday, May 26, 2011

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot

Horizontal Menu: Pure CSS 3D Button Effect for Blogger

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:

1. Copy dan edit kode di bawah ini:

Kode:

- Ganti # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.

- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.

- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris:

<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).

9. Save lagi.

10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Friday, May 13, 2011

Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot

Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.

Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdN4X3yV0cvSCrG_C18Dl-moLzHaPvi5xnglQaiZipaOfWsjNc4kZEv00vMRNqbLLf7M1S0DGIkQj1ccawoVMt7kDyf0cuFmL3CnguXr7VRBtKQ2tfQHTBc0eBL4KmsLYtlMe4S45SMWg/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdN4X3yV0cvSCrG_C18Dl-moLzHaPvi5xnglQaiZipaOfWsjNc4kZEv00vMRNqbLLf7M1S0DGIkQj1ccawoVMt7kDyf0cuFmL3CnguXr7VRBtKQ2tfQHTBc0eBL4KmsLYtlMe4S45SMWg/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

3. Save template.

4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:

<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:

<li class="current"><a href="http://bukan-rahasiia.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag gadget/widget tersebut ke bawah/atas header.

9. Save lagi.

10. Done!

Re-coded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.

Credits to coder: cssmenumaker

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS Simple Black Blogger/Blogspot

Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, saya persembahkan kepada sobat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorFYfO49BtZzPbdHY5KrqGppbZrRO4EzqeVfFz36tqbGksh2SPYmzeBtEU_HoFPoBPkPdwB5t-xUDhCN4HQ0OB5NkYSwOZx65edYyno7xt_-dED6vEuufJ10OE4ZHNTXnJI0TAw2tRWc/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1z6yazdyzBQWd1KWEnluxlVuAoP1rZwHEpzxYbb3HhQb0D29HbxMe9lZ4vWTjWcqjIUvLYtwyz1tdPRb1RegMVC0qkpYu8r9wgavJROgbtH5hZypL9CfQ8NmCGcyfmes-8nJbyt6Jng/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.

<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:

<li><a class="current" href="http://bukan-rahasiia.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag/geser widget menu horizontal tersebut ke bawah/atas header.

9. Save lagi.

10. Done!

Re-encoded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.

Credits to coder: cssmenumaker

Monday, May 9, 2011

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot

Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel.

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting.

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.

2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:

<b:include data='posts' name='breadcrumb'/>

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Enjoy menu breadcrumbs baru di Blog Blogger/Blogspot-mu!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Tuesday, May 3, 2011

Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon

Tutorial cara mengganti text "Older Post", "Home", dan "Newer Post" di Blogger/Blogspot dengan tulisan lain atau gambar (icon)

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

Anda dapat dengan mudah mengubahnya menjadi tulisan lain atau gambar (icon) dengan cara sebagai berikut:

1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".

2. Cari kode yang berwarna merah sebagai berikut:

Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).

expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>

(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:

a. Jika ingin mengganti dengan tulisan lain:

<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.

<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.

<data:homeMsg/>adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.

Contoh:

expr:title=’data:newerPageTitle’>Next</a>
expr:title=’data:olderPageTitle’>Previous</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>

b. Jika ingin mengganti dengan gambar (icon):
Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
contoh:

expr:title=’data:newerPageTitle’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcj8yjmNz71PTdbCD9p41OAWBwd4Dh4BtzfSel_cWtHp_OgqaznJr8b5Ff4NhwxitFGKTo5Orkk0gbCqK3M3b1bBpHHJDtgm_COeXBrDGMNs5EEvrFMDbF0_An9MYWEwE0PwekQOaM1ft/s1600/next.png"/></a>
dan seterusnya......

Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Monday, May 2, 2011

Cara Membuat Daftar Isi (Sitemap) di Blogger/Blogspot

Daftar Isi (Table of Contents) sering pula di sebut sebagai sitemap (peta situs) karena isinya digenerasikan (generated) dari url sitemap feed. Jika sitemap blog di search engine berfungsi sebagai alat untuk mempermudah pemetaan isi blog/website oleh search engine, maka sitemap yang ini berfungsi sebagai alat navigasi dan pemetaan bagi pengunjung/visitor untuk melihat seluruh isi konten atau artikel blog/website dalam satu halaman khusus. Tentunya ini sangat menguntungkan pengunjung dan juga pemilik blog/website dalam usaha meningkatkan jumlah pageview.

Daftar isi kali ini dibuat dengan aturan javascript yang file-nya sudah saya upload dan dapat langsung digunakan. Isi yang ditampilkan dibagi berdasarkan label, sehingga perlu digarisbawahi bahwa setiap posting harus memiliki label. Tanpa label, posting tidak akan termuat di daftar isi. Simak cara membuat label blogger bagi yg belum mengetahui cara buat label..

Cara membuat daftar isi/sitemap blog di blogger/blogspot:

1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).

Dashboard > New Post/Edit Post > Edit Pages > Create New Page

2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain lain.

3. Pada bagian kanan kotak posting klik "Edit HTML".

4. Masukkan script berikut:

<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script>
<script src="http://bukan-rahasiia.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Ganti http://bukan-rahasiia.blogspot.com dengan url blog/website anda.

5. Jika ingin melihat hasilnya klik "preview/pratinjau".

6. Publish post.

7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.

8. Done!

---------------------------------------------------------------
Update:
Buat @Idnay yg komentar dibawah minta tulisan "new" berwarna putih, saya sudah buatkan scriptnya:
ganti: http://yourjavascript.com/18113981113/bukarahasiablog-toc.js
dengan: http://yourjavascript.com/111006011142/bukarahasiablog-toc-putih.js
---------------------------------------------------------------

You now already got a sitemap/table of content page for your blog visitors!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com