Aneka Trik Membuat Menu di Blog Blogger

Sebenarnya saya termasuk tidak sistematis dalam menulis, kemarin nulis tentang kegiatan di desa, sekarang nulis tentang blogger. Yah, bukan kenapa, sebenarnya ini semua dipengaruhi suasana hati saja. 

Kenapa saya menulis  tentang "Aneka Trik Membuat Menu di Blog Blogger"? Ada dua alasan yang mendasari, pertama, para pembaca akan "senang" jika blog yang ditemuinya tidak "bikin pusing" karena harus mencari di sana sini judul tulisan kita, saya pake standar pribadi hehe. Menu itu penting untuk memanjakan para pengunjungnya. Jadi, jika blog kita ingin disenangi oleh pengunjung, maka salah satu caranya adalah menyajikan menu yang menarik, baik dari segi isi maupun dari sisi penataan. Kedua, selama 1 bulan saya pusing mencari cara agar bisa menampilkan menu yang menarik (lama sekali? maklum, saya ini blogger kacangan, hihi), blog di blogger itu tidak sama dengan blog wordpress atau penyedia blog gratisan lainnya, yang memang sudah menyediakan fitur-fitur seperti itu (saya juga masih bingung, napa ya blogger kayaq gitu, padahal blogger itu dah terkenal), akhirnya kita harus membuatnya secara manual.

Ga usah terlalu panjang basa-basinya. Untuk sementara ada 5 macam menu yang saya ketahui:

1. Menu dTree, yaitu menu yang tampilannya seperti menu pada "windows eksplorer" Klik untuk melihat Gambarnya
2. Menu Drop down, Klik untuk melihat gambarnya (bukan yang tulisannya berwarna orange)
3. Menu Horizontal Klik untuk melihat gambarnya (yang berwarna orange)
4. Menu Vertikal Klik untuk melihat gambarnya
5. Terakhir, menu Horizontal + sub-menu Klik untuk melihat gambarnya

UPDATE!

• Cara membuat menu Horizontal Drodown (klik untuk membacanya)

• Cara membuat menu Dtree di Blog (Klik untuk membacanya)

Nah, itulah macam-macam menu yang dapat kita pasang di blog bloger. Truzzzz, gimana cara membuatnya, belum sempat saya jelaskan di sini. Betul bisa dibuat kayaq gitu? JANGAN RAGU SOB, lihat saja di blog saya ini, beberapa sudah saya pasang, walaupun saya blogger kacangan, tapi tetap bisa membuatnya, hehe, sangat mudah, hanya butuh sedikit kesabaran. Saya akan menjelaskannya pada postingan berikutnya, JANJI.. tetap di Aneka Trik Membuat Menu di Blog Blogger.

Cara Menghapus Gadget/Widget Blogger I

Saya tulis untuk sobat yang masih baru menggunakan blogger. Mungkin bagi sobat blogger yang sudah "senior", postingan ini sudah tidak penting, tapi pada kenyataannya, saya pernah mengalami hal seperti ini, yaitu kebingungan untuk menghapus gadget/widget blogger yang mengganggu, dan beberapa sobat blogger yang pernah mampir di sini kelihatannya masih kebingungan. Jadi, tidak ada salahnya jika saya memostingnya :)

Biasanya, ketika kita membuat blog baru, secara default atau secara otomatis sudah terpasang beberapa Gadget/Widget, seperti follower, arsip, Gadget Laman (menu Laman horizontal bawaan blogger) dan sebagainya. Gadget/widget ini kadang-kadang mengganggu pandangan atau tidak dibutuhkan, atau kita ingin menggantinya dengan gadget lain.

Nah, jika demikian, bagaimana Cara Menghapus Gadget/Widget Blogger? Silahkan Sobat mengikuti setahap demi setahap tutorial berikut:

1. Silahkan Sobat login dengan akun Bloggernya

2. Setelah login, kita sudah berada pada halaman Dasbor. Nah, Klik RANCANGAN (perhatikan gambar berikut)

3. Setelah Mengklik Rancangan pada Dasbor, kita sudah berada pada halaman Eleman Laman. Setelah itu, silahkan sobat memilih Gadget/Widget mana yang akan dihapus. Klik EDIT (perhatikan Gambar berikut)

4. Setelah Mengklik EDIT pada Gadget/widget yang akan dihapus, akan muncul jendela/window seperti pada gambar di bawah, perhatikan pada bagian bawah, di sana ada tombol Hapus, klik tombol HAPUS tersebut.

5. Gadget/Widget agan telah berhasil dihapus

Bagaimana Jika ternyata pada gadget/widget tersebut tidak memiliki tombol Hapus? SILAHKAN BACA Cara Menghapus Gadget/Widget Blogger Bagian II DI SINI. Semoga artikel Cara Menghapus Gadget/Widget Blogger Bagian I bermanfaat.

Cara Membuat Daftar Isi di Blogspot

Cara Membuat Daftar Isi di Blogspot

Cara membuat daftar isi di blogspot sebenarnya sangat mudah, kita hanya membutuhkan sedikit script. Daftar isi ini dibuat oleh 'mantan' blogger pemula yang dari awal hanya belajar sendiri alias otodidak (wah, dia hebat ya). Siapakah dia, ntar akan muncul sendiri setelah script ini dipasang.
Apa yang saya tulis pada tutorial ini adalah hal sudah kupraktekkan jadi insya allah akan berfungsi. Sebelumnya saya tidak berniat untuk membuat postingan ini, tapi karena permintaan salah seorang sobat saya, akhirnya saya tergerak untuk membuatnya (spesial buat dia, siapa? rahasia...hahaha) 

Lanjut, untuk cara membuat daftar isi di blogspot, silahkan copy script di bawah ini kemudian paste di gadget atau di dalam halaman postingan sobat kemudian beri judul 'daftar isi'.

<div style="background-color: #ccffff; height: 270px; margin: 0px auto; overflow: auto; padding: 5px; text-align: left; width: 85%;">

<script src="http://sites.google.com/site/leumoh/javascript/sitemapbylabel.js">

</script><script src="http://soe86.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Keterangan:

• Warna hitam adalah script untuk scrolling, ini penting di gunakan agar tampilan daftar isi tidak mengacaukan tampilan blog secara keseluruhan karena isinya tertalu panjang ke bawah. Silahkan lakukan pengaturan pada bagian yang distabilo (background-color, tinggi lebar)  
• Warna merah adalah kode daftar isi-nya. Ganti yang berwarna biru dengan blog sobat

Format daftar isi dengan kode di atas sama dengan format yang ada di blog saya ini, yaitu tulisan tersusun berdasarkan label atau kategori

Oke, semoga bermanfaat !

Cara Menghapus Gadget/Widget Blogger II

Pada postingan sebelumnya, saya telah memposting Cara Menghapus Gadget/Widget Blogger Bagian I. Jika sobat sudah membacanya, sobat pasti akan bertanya apa bedanya dengan postingan bagian ke-II ini? Biasanya kita menemukan Gadget/Widget blogger yang tidak memiliki TOMBOL HAPUS, hal ini kadang membuat kita bingung cara menghapusnya. Nah, hal inilah yang akan saya bahas pada Cara Menghapus Gadget/Widget Blogger Bagian II ini. Silahkan sobat perhatikan, jika ada masalah, silahkan dikomentari.

Jika sobat menemukan gadget/widget pada blogger yang tidak memiliki TOMBOL HAPUS, namun sobat ingin menghapusnya, maka kita harus menghapusnya lewat EDIT HTML. Ada pun langkah-langkahnya sebagai berikut:

1. Masuk dengan akun blogger sobat

2. Klik RANCANGAN kemudian klik EDIT HTML

3. Tekan CTRL + F (KONTROL F) pada keyboard sobat

4. Setelah itu, ketik JUDUL WIDGET yang akan dihapus (Jika Gadget/Widget yang akan dihapus tidak memiliki judul, sebaiknya terlebih dahulu diberi judul pada halaman RANCANGAN). Berikut adalah contoh kode gadget pada blog saya ini. Klik di sini untuk contoh gambar.

<b:widget id='HTML9' locked='false' title='Need a Translation?' type='HTML'/>

Jika Gadget/Widget dengan judul Need a Translation? di atas ingin DIhapus, maka kita harus menghapus seluruh kode seperti contoh kode di atas.

5. Setelah menghapus kode di atas, klik SAVE TEMPLATE

6. Akan muncul seperti gambar (klik di sini untuk contoh gambar), silahkan sobat klik HAPUS WIDGET. SELESAI :D

Jika gadget yang akan dihapus tidak memiliki judul, maka kita harus mengetahui ID Gadget tersebut. Bagaimana cara mengetahui ID Gadget tersebut? Silahkan baca postingan yang terdahulu di sini Merubah Background Sidebar atau Gadget Blog Blogspot (di dalamnya terdapat cara mengetahui ID Gadget)

Cara membuat Submenu Setelah Menu Utama

Cara membuat Submenu Setelah Menu Utama

Artikel  ini saya tulis buat sobat Salwa Blog yang berkomentar pada postingan tentang Cara Mengedit Menu Horizontal Dropdown. Sebelumnya saya ucapkan terima kasih ya dah mampir :). Sobat Salwa bertanya "bagaimana cara pasang submenu setelah menu utama?" 
Oya, dalam membuat menu horizontal dropdown, itu kan ada kode utama yg harus kita paham, yaitu:

<ul>
<li>
</li>
</ul>

Untuk membuat menu utama, penulisannya kayak gini:
<ul>
<li><a href="LINK MENU UTAMA">NAMA MENU UTAMA</a></li>
</ul>

Kalau sub menu kita tambahkan kode UL dan LI lagi, contoh:
<ul>
<li><a href="LINK MENU UTAMA">NAMA MENU UTAMA</a>
<ul>
<li><a href="LINK SUB MENU">NAMA NAMA SUB MENU</a></li>
</ul>
</li>
</ul>

Jika hendak menambahkan satu submenu lagi, contoh penulisanya
<ul>
<li><a href="LINK MENU UTAMA">NAMA MENU UTAMA</a>
<ul>
<li><a href="LINK SUB MENU 1">NAMA NAMA SUB MENU 1</a></li>
<li><a href="LINK SUB MENU 2">NAMA NAMA SUB MENU 2</a></li>
</ul>
</li>
</ul>

Nah, demikian Cara membuat Submenu Setelah Menu Utama. Jika kita perhatikan dengan baik, Insya Allah akan sangat mudah.

Cara Membuat Menu Translate di Blog Blogger

Cara Membuat Menu Translate di Blog Blogger

  Sebenarnya sudah banyak tutorial yang menulis tentang Menu Translate di blogger. Tapi karena permintaan dari sobat melalui email, saya akhirnya menulis tutorial yang sangat sederhana ini (tidak ada salahnya juga kalau berbagi ^_^ ).

Oke langsung saja, silahkan sobat copy dan paste kode berikut di gadget sobat kemudian klik save dan lihat hasilnya:

<div style="text-align: center;">
<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img alt="English" title="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrp_g6gmzGAZKvia5G1PTSq8SVy6MTJLcYKOm-_7tmT04E3NrPDhXmHUUOR1_NrVush2A-mJYs8tvTgvGyme41KfD_OZaTs-ablmuxwQG35ns8RIp2QSkPgA-c5Kvy32yXLs4eprvyRg4Q/s144/uk-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="French" title="French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSNHuv0oS1bHq0fXQ0_lbGM4WBnACSccu8ZAfS9E6MfovUj_krpXPy7UT5J6cSruWri2k5pP3c7B1uhZCkRmxXNK8G6ksC2OKPnEHUSprwLmnNuh5Mxa2rhlsPXr0Igspk7zK1WTHgEiR/s144/france-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img alt="German" title="German" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztePXpwEfnF9hUPRf1mSp12Cq0L5ky9UvzHrNWTrRrHThKgoDk-ewsuMPX7aK31WO5UfGIgkzKkWk0lKjX1-NHPQtAt9Ye1LGuUZU2kJBY0d8eIiGuiai5qF_oJiKZoes0X6JSW-6IMpJ/s144/german-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img alt="Spain" title="Spain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh883THp1pAmwrVYJfK08ApKZPgMAuVsW35lTke0McyzmlQsIi6W65bD8TSCrDVlJzw02ITl-IhwbuLa-KbEC_vskwQKEajn86lNTR_FUP-8wvOLvqdX-NppbPL756eVFjV73cQvzH8VMSg/s144/spain-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img alt="Italian" title="Italian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIhNQb540Lcm-Sda8iGCeDIuchKP0XjIOIASHlGIrkuNXlm-ljIBTCbQpudXMNqPjLsDXIfzCy-r2C3UsoiycVNZGUjuNR2gN4C01WcXg5Hzb_9lizLzSk3HNODIb-zQ8a3n7glGQU3i9/s144/italy-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img alt="Dutch" title="Dutch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAOkhFe75B87YsjVdEZptgWlE5HSavOaHsvAez1TfluNz8ori__P_up7nw1yNa2V3iEJNxX6UkMadLZNvpB1eAzwAPCxKDuI9pLLac5thlEczasIVPNkdN6ApTu9gRc-6vxVzx-sNd7dm/s144/dutch-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<br />

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img alt="Russian" title="Russian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8NB_6j3z-ZLwuXSe6UyyHdv5cG7ZWb1aCXmgtNCoQbPJdepdRROEgu57kzopRFL1C4Iov3no8TQNokyvhZRnDCqmYrT2cEUZJFx7XVEB7_GRTgTzN_fQnrZLAY5ja80qHusq25CfOD1R_/s144/russian-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img alt="Brazil" title="Brazilian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg88vZ-eEBWoi1IzAxUfZPAY8QE77-vEhkyw9vhuiTlRRCyZeIeomiRsq74XpoVDkkIyzc5PVxMnRx8lxJOQzY73VZG_CKHhFGpQtDiRFalA6xFNpRPM9MJQm0FYV8ls1KqiSJsYcF2MB3t/s144/brazil-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img alt="Japanese" title="Japanese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocxy-MtDT4Y529q6yYA7DWlZQ8rTQnAYGzhEnKRpMJDON851OmAvy-Lxla-wdR8RanP8pebSZJhxwB91yDRe0UTi6tfP-lTjc0foQ7PBSv8lNIByVfX2HoMcAgwUXkfTLx-_XiK4zG12p/s144/japan-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img alt="Korean" title="Korean" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-ZudgD6Wnx_9jP3WIZ6fDATJlGtjxZDHd45ISRqNFaQXBAE7koLB2c8zPeMk1EPrz8WWa9SB4TdvqMsiPGf3jo_U0IvHu1lRsUaDiQuMMOVA_4UcbLNbXQ7IeEVBpFrb6ns7ityrlVbz/s144/korean-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img alt="Arabic" title="Arabic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRaUnc1RxVxCAC7dtVkizoSMiZmAkNwpAYBnc22_os-oW0XWAOL1z8aevhI8BAYB5UkwU9mUhLZr0BVjgIJ5evVV29QPRSPnDILsHmlsgUgca6zzQxTEuFpI5nwAMsxeVXCH8XiTDDow-/s144/arab-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img alt="Chinese Simplified" title="Chinese Simplified" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtLjpliVE1DgU2DQDntSZ2LZ2LXbISNLWkGApKJc5Ao989hcjvpIm2R2kRqBnPMsxMT0ubQBJKRBimpmYMfNDfYrJCSSfRpNm7FhbZLUYBKgsvINr-Cy9-7IFWT5JFo2AaTQ1fRXzjC8-/s144/china-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<br/>
<center><a href="http://blogger.anekanews.com/2011/02/cara-membuat-menu-translate-di-blog.html"><blink><b>cara membuat ini</b></blink></a></center></div>

Seperti itulah Cara Membuat Menu Translate di Blog Blogger, Semoga bermanfaat.