Cara membuat Fungsi Sroll pada Blog(2)

Beberapa hari ini, badan terasa gk enak nih, kenapa yah??

Rupanya saya ingin maw memberikan sebuah trik lagi neh sobat t'Net. Yaitu mengenai cara membuat fungsi scroll pada blog, yang sebelumnya telah saya postingkan di sini .Namun kali ini tidak mengarah ke label. Sekarang kita menciptakan daftar isi yang baru pada blog kita. Atau mungkin ada yang masih bingung, gimana sih bentuknya??

Sperti dibawah ini dapat saudara lihat:

Mungkin Anda terlewat

Udah taw kan sobat t'Net?

dan sekarang adalah langkah-langkah yang pertama untuk menampilkannya pada blog:

1.Masuklah ke Blogger dengan ID saudara

2. Pilih Tata Letak (Layout)

3. Setelah itu pilih Edit HTML

4. Silahkan anda Copy pastr kode di bawah ini tepat di atas kode </head>

Catatan: sebelum meletakkan kode di wah ini anda harus mencari terlebih dahulu kode </head> yaitu dengan cara tekan ctr+F lalu pastekan kode </head>

Ini kodenya:

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

5. Kemudian Save

Terus Langkah yang kedua adalah:

1.Seilahkan anda berpindah kepada tambah elemen baru

2.Dan pilih HTML/Jave script

3. Lalu copy paste kode di bawah ini:

<script type="text/javascript"></script>
<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">Mungkin Anda terlewat</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">
<ul>
<li>>> <a href="http://kartajaya25.blogspot.com/2010/04/cara-memasang-slide-foto-di-blog.html">Cara memasang slide di blog</a></li>
<li>>> <a href="http://kartajaya25.blogspot.com/2010/04/cara-membuat-tulisan-berkedip.html">Membuat tulisan berkedip</a></li>
<li>>> <a href="http://kartajaya25.blogspot.com/2010/04/cara-mambuat-label-menjadi-seperti.html">Mengubah label memjadi fungsi scroll</a></li>
<li>>> <a href="http://kartajaya25.blogspot.com/2010/04/cara-membuat-tulisan-terbalik.html">Cara membuat tulisan terbalik</a></li>
<li>>> <a href="http://kartajaya25.blogspot.com/2010/04/membuata-tulisan-berjalan-2.html">Cara membuat tulisan berjalan(2)</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>

Keterangan:

Jika anda menginginkan cuman satu kolom, anda bisa menghapus kode yang berwarna merah

Pada tulisan berwarna hijuau anda ganti dengan alamt URL yang akan anda tuju

Dan tulisan berwarna biru adalah Judul yang anda tampilkan pada blog

4. Lalu anda Simpan

Selesai de.....Selamat mencoba yah.........Jangan lupa komennya..

0 komentar:

Sekedar catatan:

Kotak pada kolom blok komentar ini masih kosong. Maka merupakan suatu kehormatan jika sobat menjadi orang yang paling pertama menuliskan komentar, baik berupa pujian, masukan, kritikan, maupun pertanyaan di kolom komentar yang terletak di bawah kotak ini.

Tak ada yang bisa saya berikan selain ucapan terima kasih karena telah memberikan apresiasi terhadap artikel-artikel KARTA JAYA WEB

Posting Komentar

KARTA JAYA WEB

16 April 2010