Cara Membuat Multi Level Drop Down Header Menu di Blogger / Blogspot Anda

Ingin membuat yang seperti ini?
Oleh yang menciptakannya ini dinamakan Multi Level Drop Down Header Menu.

Caranya mudah saja, ikuti langkah berikut:

1. Log In ke Blogger, melalui Dasbor Anda, klik Tata Letak, Lalu klik Edit HTML

2. Expand Template Widget, lalu cari (ctrl+F) kode berikut di dalam kotak HTML:

</head>

3. Letakkan kode berikut persis sebelum kode </head>:

<link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>

4. Klik SIMPAN TEMPLATE.

5. Sekarang kembali ke menu TATA LETAK dan klik menu ELEMEN HALAMAN, lalu klik TAMBAHKAN GADGET, pilih gadget HTML/JAVASCRIPT.

6. copy kode berikut ke dalam gadget HTML/JAVASCRIPT Anda:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

7. Klik SIMPAN kemudian letakkan GADGET baru Anda persis di bawah Header.

8. Selesai, kini Anda memiliki sebuah Multi Level Drop Down Menu di Blog Anda!

Diterjemahkan dari http://bloggerstop.net/.

Cara Menghilangkan / Menyembunyikan Navbar di Blogger

Setelah membuat banyak tulisan (posting), dan menghiasi blog Anda dengan bermacam gadgets di sidebar, mungkin Anda sedikit terganggu dengan bar navigasi (navbar) yang selalu muncul di bagian atas blog Anda.

Maksud Blogger menyertakan bar navigasi tersebut mungkin agar memudahkan penggunanya berkeliling dunia blog atau langsung menuju dasbor dan pengaturan blog, tapi tampilannya justru memberikan kesan web log yang tidak serius bagi sebagian pengguna dan pengunjung serta mengurangi estetika dari tampilan blog yang kita desain.

Apakah Anda merasa terganggu dengan navbar tersebut?



Apabila jawabannya ya, berikut ini adalah trik untuk menghilangkan / menyembunyikan navbar tersebut dari tampilan blog Anda.

1. Sign in ke blogger.
2. Dari Dasbor (Dashboard) Anda, pilih menu Tata Letak (Layout).
setelah masuk ke menu tab template, klik Edit HTML. Anda akan dibawa ke
kotak HTML (HTML box) blog Anda.
3. Paste CSS definiton berikut di bawah tulisan <b:skin><![CDATA[/* atau diatas template code sehingga menjadi seperti ini:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">
...

Untuk memunculkan kembali Navbar tersebut, anda tinggal menghapus kode CSS definitions tadi.

Sekarang lihat kembali blog Anda, jika gagal, periksa kembali apakah Anda sudah meletakkan kodenya dengan benar.

Terima kasih.

Referensi: http://blogger-templates.blogspot.com/

Cara Menampilkan HTML Script di Posting Blog Anda

Pernahkah Anda mencoba menyisipkan HTML Script ke dalam postingan Anda?
Tentu saja Script tersebut akan langsung ter-eksekusi sehingga menampilkan isi dari script tersebut.

Tapi bagaimana jika kita ingin menulis tentang script tersebut? (menampilkan script dalam bentuk aslinya pada sebuah tulisan), contohnya seperti ini:

<a href="http://photobokep.com/" target="_blank"><img src="http://photobokep.com/action/hardcore.gif"

Jika belum di "apa-apain", tentunya script itu akan ter-eksekusi sehingga menampilkan gambar yang diperintahkan oleh script tersebut.

Berikut adalah salah satu cara mudah untuk menampilkan scrip asli di postingan Anda:

Sebelum ditulis, encode dulu disini:

http://centricle.com/tools/html-entities/

Copy script yang ingin Anda tulis lalu paste di kotak yang telah disediakan di situs centricle.

Lalu klik ENCODE

centricle akan menerjemahkan script tersebut, copy script yang sudah di-encode tersebut lalu paste di postingan Anda. Silakan lihat hasilnya.

Sedikit tambahan, berikut adalah script untuk memberi highlight pada tulisan:

<div style="background: #DDE4FF; border:1px dotted #223344; padding:3px;">

TULIS DISINI TEKS YANG INGIN DITONJOLKAN

</div>

Cara Membuat Read More (Baca Selengkapnya) di Posting Blog

Setelah membuat beberapa postingan, mungkin halaman utama blog Anda menjadi penuh dan terlalu panjang ke bawah sehingga menyulitkan pembaca/pengunjung blog dan bahkan mungkin juga merepotkan Anda sendiri untuk membaca satu per satu postingan karena akan mengakibatkan banyak menggunakan tombol scroll pada mouse. Apabila ini terasa mengganggu, Anda dapat menggunakan teknik menampilkan sebagian isi tulisan saja dan menyertakan link yang berfungsi untuk menampilkan keseluruhan isi tulisan. Sebagai contoh adalah tulisan +/- Selengkapnya seperti yang terdapat di bawah ini:


Langkah-langkah untuk membuat +/- Selengkapnya seperti tadi adalah sebagai berikut:

1. Klik "Kustomisasi" dari menu di pojok kanan atas blog Anda atau klik "Tata Letak" dari dasbor Anda.

Setelah itu klik menu "Edit HTML" dan beri centang pada kotak kecil bertuliskan "Expand Template Widget"

2. Kemudian cari tulisan

</head>

di dalam kotak HTML Anda dengan menekan tombol ctrl+f pada keyboard Anda.

Sudah berhasil menemukannya?
Jika sudah, silakan copy code di bawah ini:

<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>

dan paste persis di atas kode </head> tersebut sehingga menjadi seperti yang terlihat pada gambar sebagai berikut:



Sudah sama seperti gambar di atas?

3. Lalu cari kode <div class='post-body entry-content'> , tentu saja dengan menggunakan kolom find seperti tadi, kalau sudah ditemukan, ganti kode <div class='post-body entry-content'> tersebut dengan kode sebagai berikut:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

sehingga menjadi seperti yang tertulis pada gambar sebagai berikut:


Pastikan dulu bahwa Anda sudah mengganti kodenya dengan benar.

4. Setelah itu cari kode berikut:

<data:post.body/>

dan paste kode berikut ini persis dibawahnya:

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Last check, kodenya akan menjadi seperti gambar di bawah ini:


Setelah itu, klik "SIMPAN TEMPLATE".

Jika template gagal disimpan, periksa lagi HTML Anda apakah sudah benar-benar sesuai.
Jika berhasil, maka kini Anda telah memiliki pengaturan tampilan blog yang memungkinkan Anda untuk menyembunyikan sebagian isi tulisan.

Caranya adalah: setiap kali Anda mem-posting tulisan Anda, sisipkan tulisan ini:

<span id="fullpost">

di bawah tulisan yang ingin Anda tampilkan (berarti di atas tulisan yang ingin Anda sembunyikan).

Dan selalu akhiri tulisan (posting) Anda dengan kode berikut:

</span>

Contohnya seperti ini:

(tulisan yang ingin Anda tampilkan)

<span id="fullpost">

(tulisan yang ingin Anda sembunyikan)

</span>

Silakan melihat-lihat hasilnya di halaman utama blog Anda.


Please note: Trik ini saya dapatkan dari blog milik Mas Kendhin yang beralamat di http://www.trik-tips.blogspot.com sehingga seluruh script yang ada di tulisan ini adalah murni hasil copy paste dari blog milik Mas Kendhin. Saya hanya mengubah gaya penulisan dan penjelasan lebih detail beserta gambar untuk memudahkan bagi para pemula seperti saya. Terima kasih, especially for Mas Kendhin for your useful script.