feedburner
Enter your email address

Delivered by FeedBurner

feedburner count

Membuat Menu Fungsi Scroll

Labels: , ,

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>


Bookmark and Share

Artikel Terkait Lainnya :



0 comments: