Pages

Showing posts with label scroll. Show all posts
Showing posts with label scroll. Show all posts

Membuat Menu Dengan Fungsi Scroll

type='html'>

menu scroll Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat 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, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

 

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :

 

 

ISI MENU 


 

 

Keterangan :

  • width --> lebar menu

  • height --> tinggi menu

  • padding --> jarak antar tulisan dengan garis pinggir

  • border --> ketebalan garis pinggir


Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.

Contoh kode HTML untuk menu yang saya punya :

 




Hasilnya :

 

 

 

Sedikit keterangan tentang elemen diatas :

  • overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
  • height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
  • padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
  • border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Selamat Mencoba !!

Membuat Artikel terkait di bawah postingan dengan scroll

type='html'>hai,..ketemu lagi... malam ini ane masih posting tentang tutorial ni...membuat artikel terkait di bawah postingan ane kasi lihat screenshoot nya ya. kalo mau langsung tu di bawah artikel ini juga ada...oke. langsung aja gak usah  panjang lebar...



itu yang ane... kalo mau ikutin ni caranya

Loggin blogger
Rancangan, edit html
cari kode yang mirip lalu letakkin kode berikut di bawahnya






Artikel Terkait:











oke kalo udah cari lagi kode ]]>


letakkin kode berikut diatasnya


.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}


nah di situ tempat ente ngedit... ubah tu backgroundnya jadi gambar...kalo mau sih!!

ya udah selesai ya