Memanfaatkan Fungsi Scroll untuk Daftar Artikel

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.
Kira-kira komentar itu seperti ini :

mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak the most popular post, membuat blog di blogger yang ada di kanan postingan itu lho. mohon bimbingannya.

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:

TENTUKAN JUDUL KOLOM

Untuk langkah pertama,pergilah ke Dashboard---->Tata Letak----->Edit html.
Selanjutnya cari kode : </head>
Jika sudah ketemu,tepat diatasnya,letakkan kode 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>

<

/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>

<

/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>

Lalu Simpan. Selesai.

**Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas.
CSS,memang sangat membantu ya.. :)

Memanfaatkan Fungsi Scroll untuk Daftar Artikel

TENTUKAN JUDUL KOLOM

No comments:

Post a Comment

Pengunjung Juga Membaca***