Membuat Hidangan Di Blog Dengan Pengaruh Scroll

Rabu, 04 Januari 2017 : Januari 04, 2017

0 comments

Sebelumnya Saya sudah menciptakan artikel cara Mengatasi URL Menjadi Link Aktif Di Komentar Disqus. Dan Pada kesempatan kali ini aku akan mencoba mengembangkan tutorial kepada sahabat blogger, yaitu Cara Membuat dan Memasang Menu Di Blog Dengan Efek Scroll.

Fungsi dan kegunaan hidangan ini yaitu biar hidangan yang kita buat tidak memakan tempat, alasannya yaitu lebar dan panjang hidangan dapat kita sesuaikan dengan lebar space halaman blog.

Pertama kali aku ingin menciptakan hidangan dengan efek scroll ini aku pikir susah, padahal kalau kita mengerti bahasa pemrograman, menciptakan hidangan ibarat ini sangatlah mudah. Untuk penghematan tempat, kalau anda memiliki daftar hidangan yang sangat panjang, hidangan dengan efek scroll ini dapat menjadi solusi yang sempurna selain memakai marquee atau text berjalan. Dan pembuatan hidangan ini tidak memakai instruksi HTML yang banyak dan ribet, hanya sedikit instruksi CSS dan HTML, anda sudah dapat menciptakan menunya.

Menu ini dapat juga anda menfaatkan dalam menempatkan blogroll yang panjang atau daftar hidangan postingan yang anda miliki.

Jika Anda ingin mencoba menciptakan hidangan dengan fungsi scroll ini, mari kita ikuti caranya dibawah ini.

Yang pertama

Simpan CSS dibawah ini di atas instruksi ]]></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 goresan pena dengan garis pinggir.
border --> ketebalan garis pinggir.
Tinggal Anda sesuaikan saja dengan blog Anda.

Yang kedua

Gunakan instruksi HTML dibawah ini pada hidangan yang akan di buat dengan efek scroll.

<div class="menu-scroll">

Disini instruksi hidangan yang akan di buat efek scroll...

</div>

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


Share this Article
< Previous Article
Next Article >
Copyright © 2019 Xomlic - All Rights Reserved
Design by Ginastel.com