Membuat Menu Dengan Efek Scroll Di Blog

Rasanya sudah lama saya tidak membuat artikel di blog ini. Pada kesempatan kali ini saya akan mencoba berbagi sedikit tips kepada Anda, yaitu Cara Membuat dan Memasang Menu Scrool di Blog.

Fungsi dan kegunaan menu ini adalah agar artikel yang kita posting tidak memakan tempat karena lebar dan panjang menu bisa kita sesuaikan dengan lebar space halaman blog.

Pertama kali saya ingin membuat menu dengan fungsi scroll ini saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika anda mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan. Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, hanya sedikit kode CSS dan HTML, anda sudah bisa membuat menunya. Menu ini bisa juga anda menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang anda miliki.

Jika Anda ingin mencoba membuat menu dengan fungsi scroll ini, mari kita ikuti caranya dibawah ini.

Yang pertama

Simpan CSS dibawah ini di atas kode ]]></b:skin>

.menu-scroll {overflow:auto;
width:320px;
height:250px;
padding:10px;
border:1px solid #eee}

Keterangan :

320 --> lebar menu.
250 --> tinggi menu.
padding --> jarak antar tulisan dengan garis pinggir.
border --> ketebalan garis pinggir.
Tinggal Anda sesuaikan saja dengan blog Anda.

Yang kedua

Gunakan kode HTML dibawah ini pada menu yang akan di buat dengan efek scroll.

<div class="menu-scroll">

Disini kode menu yang akan di buat efek scroll...

</div>

Nah, dengan sedikit CSS dan HTML seperti cara di atas, Anda sudah bisa Membuat Menu Dengan Efek Scroll Di Blog


Reaksi:
Share this with short URL:

You Might Also Like:

Newest Post
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Newest Post