Langsung ke konten utama

Membuat Menu Fungsi Scroll

Beberapa hari nggak online/update blog,saat lihat komentar ada temen kita menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini.

Untuk itu mumpung lagi ada waktu, sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..
Untuk lebih relevan,sebaiknya diletakkan pada sidebar.Untuk hasil contohnya seperti ini:





<style type='text/css'>
#fungsiscroll {
float: left;
width: 100%;
font-family:arial;
font-size:12px;
margin: 6px 0px 6px 0px;
padding:0px;
line-height: 18px;
display:;
}
#fungsiscroll p {
padding: 0px;
margin: 0px;
}
#fungsiscroll a:hover {
color: green;
padding: 0px;
}
#fungsiscroll a {
text-decoration:none;
color:black;
}
#fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#fungsiscroll h2 {
color: #000000;
font-size: 14px;
font-family: Arial;
text-align:center;
color:white;
font-weight: bold;
margin: 0px 0px 7px 0px;
padding: 7px 5px 3px 13px;
letter-spacing:0em;
text-transform:normal;
background: #222222;
}
#fungsiscroll ul {
list-style-type:none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#fungsiscroll li {
list-style-type: none;
margin: 0px 0px 5px 0px;
padding: 0px;
border-bottom : 1px dashed #ccc;
}
#fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#l_fungsiscroll {
background: #FFFFFF;
float: left;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#l_fungsiscroll p {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_sidebar ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#l_sidebar ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#l_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#l_fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#r_fungsiscroll {
background: #FFFFFF;
float: right;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#r_fungsiscroll p {
padding: 0px 0px 15px 0px;
margin: 0px;
}
#r_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#r_fungsiscroll ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#r_fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#r_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
</style>

Setelah itu simpan.

Lalu pada Tata Letak blog,tambah element baru dan pilih HTML/Javascript,lalu letakkan kode berikut:

<script type="text/javascript"></script>
<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div>
<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div>
</div>
</div>
<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="overflow:auto;width:95%;height:120px;">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div></div>


Komentar

Artikel Terkait

Postingan populer dari blog ini

Income Dollar dari Image Space Media

Nah kali ini saya mau sharing sebuah cara dapat dolar dengan Image Space Media. Lantas apa itu Image Space Media?
Image Space Media adalah sebuah jaringan periklanan internet melalui gambar (images). Kalau blog anda banyak postingan yang menggunakan gambar-gambar, sudah pasti akan sangat menguntungkan dan anda bisa peroleh income dolar sangat besar dengan mengikuti Image Space Media.
Image Space Media sangat unik! Iklan akan muncul dari setiap gambar yang ada di blog anda jika mouse diarahkan ke gambar tersebut. Kalau iklan tersebut di-klik oleh pengunjung maka itu berarti anda dapat dolar.
Cara menjadi publishernya sangat gampang, anda tinggal mendaftarkannya disini. Dan jika disetujui maka anda tinggal meletakkan script iklannya di blog anda.
Cara meletakkan script Image Space Media di blog anda sangat mudah. Anda cukup letakkan script Image Space Media di template atau theme blog anda seperti ini:

<body>
Script Image Space Media disini
</body>

Biasanya iklan Image Space Media t…

Promote Burner - Membayar setiap Pengunjung Blog

Promote Burner adalah situs yg membayar kita per pengunjung tanpa perlu mengklik iklan dari situs mereka atau biasa disebut CPM ( cost per impression ) .. Promote Burner ini sejenis paidtopromote tp bedanya situs ini lbih bersahabat buat blog berbahasa Indonesia seperti blog saya ini karna kita di bayar bkn seperti paid to promote yg hanya membayar apabila blog kita di kunjungi oleh orng luar ( inggris, Amerika, Kanada, Australia dll ) tetapi situs ini membayar semua pengunjung yg masuk k'blog kita termasuk orng Indonesia ( contoh iklannya bisa di lihat di blog saya di bawah feed burner ) ..
sekedar info saja dalam 3 hari earning saya sudah sampai $10 !! sistem pembayaran situs ini sama sperti paid to promote mereka membayar kita instant setiap bulan ke akun paypall ... So buat sobat blogger tunggu apalagi buat semua pengunjung sobat menjadi dollar .. semakin banyak pengunjung semakin banyak dollar yg masuk ke saku Paypall sobat ..
Kalu sudah gajian makan" ya ... :)

Paid to Promote - Tambahan Uang dari Blog

Paid to promote ini adalah salah satu cara dimana kita memungkinkan mendapatkan $5/hari hanya dengan blog gratisan dan artikel copy paste(saat ini saya baru mencapai $2/hari) . Paid to promote adalah cara uangkan blog hanya dengan menyisipkan kode iframe yang nantinya akan menjadi banner di blog kita, dan setiap kali blog tersebut tampil atau blog kita di kunjungi orang (tanpa perlu di klik) orang dari amerika, inggris, kanada dan australia maka kita akan mendapatkan uang. jika ada 1000 pengunjung dari 4 negara tersebut kita akan mendapatkan $4, dan $2 untuk 1000 kunjungan dari negara Austria, Belgium, Denmark, Finland, France, Germany, Iceland, Italy, Netherlands, New Zealand, Spain.nah berikut ini panduan paid to promote:
1. pertama tama anda harus punya blog yang kebanyakan pengunjung dari luar negeri terutama amerika, inggris, kanada dan australia. 2. Nah setelah anda punya blog minimal di blogspot anda bisa daftar paid to promote di SINI

3. setelah anda daftar maka anda bisa masuk…