Membuat Menu di Blogger

Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas. Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

langsung aja... caranya coba cari kode ]]> kemudian copy kode css di bawah ini tepat diatasnya.

#menuq{ font-family: Verdana; padding:10px;}
.menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;}
.menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;}
.menul .widget { border-bottom-width: 0;}

Selanjutnya carilah kode di bawah ini

<div id='header-wrapper'>
<b:section .......dst>
</b:section>
</div>

lalu copy kode di bawah ini tepat di bawah kode di atas..

<div id='menuq'><br /><b:section class='menuq' id='menul' preferred='yes'/>
</div>

apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

<div id="menuq">
<a href="http://sitiaryati.blogspot">Home</a>
<a href="http://www.facebook.com/people/Siti-Aryati/1581815292">My Profile</a>
</div>

Menulis Kode HTML di Postingan

Ketika kita membuat postingan yang memuat beberapa kode HTML seperti < dan > pasti akan tampil error message yang membuat kita akan bete'...

Tetapi jangan gundah gulana dulu.. dikarenakan sudah ada web yang melakukan konversi atau merubah kode HTML secara otomatis, sehingga tidak terjadi error, tetapi tampilannya sesuai dengan code HTML…

Contohnya, untuk kode < akan berubah menjadi &lt; sedangkan untuk kode > akan berubah menjadi &gt;

Silahkan ikuti langkah-langkah berikut ini yach...

1. Coba buka web Encode atau Decode HTML ini.
2. kemudian masukkan kode HTML yang akan dimasukkan ke postingan
3. tekan encode atau decode untuk melihat hasilnya

Selesai… tinggal copy kode ke postingan…

Membuat Scroll Box

Untuk menghemat tempat terutama untuk posisi di sidebar, biasanya dipakai scroll box, sehingga tidak perlu kuatir dengan kondisi teks yang sangat banyak...

Teman-teman hanya tinggal copy paste kode berikut:
<div style="height:100px;width:400px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">Disini adalah teks anda… dengan banyaknya teks, secar otomatis akan membentuk kotak scroll box, sehingga dapat menghemat tempat</div>

Hasilnya seperti berikut ini:

Disini adalah teks anda… dengan banyaknya teks, secar otomatis akan membentuk kotak scroll box, sehingga dapat menghemat tempat

Cukup mudah bukan...

Membuat Tombol Hide danShow di Blogger

Tombol Hide dan show ini sangat berguna sekali untuk memangkas ruang halaman, terutama untuk penempatan gambar atau hal-hal yang spesifik lainnya.

Caranya pun cukup mudah... coba perhatikan tombol yang ada dibawah ini, kondisinya bila di klik maka akan tampil box halaman yang berisi kode cara pembuatan tombol hide dan show, dan bila di klik lagi, halaman tersebut akan disembunyikan lagi... cek it dot..

Caranya tinggal copy paste kode dibawah ini

<div>
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<input value="SHOW" style="margin: 0px; padding: 0px; width: auto; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'SHOW'; }" type="button"/></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#808080; text-align: center; padding:10px; "> Disini adalah kalimat atau gambar yang akan muncul di box hide dan show
</div>
</div>
</div>
</div>
</div>