langkah-langkahnya di bawah ini :
1. Login ke Blogger.
2. Buka menu Layout -> Page Elements
3. Klik Add a Gadget -> HTML/Javascript.
4. Masukkan kode dibawah ini kedalam kotak
script daftar isi dengan tanda panah di sampingnya:
style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ayj29VISprHD39wNJsFuK5F2f9ve7Obu0Vjm3NJGhZB5piMq6_9ZaL6bIy4njbPfRSJwKWrHuxdMo4dxYmd-lkGaJUX5szMLkZnxPt8lu2-dzTzrAeMeyztFqXHeh0o6QrylM-iRanEt/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:284px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
1. <a href="http://tipzrfrancblog.blogspot.com/2010/09/membuat-dropdown-menu.html">Cara membuat Dropdown Menu</a></div>
<div class="list">
2. <a href="http://tipzrfrancblog.blogspot.com/2010/09/cara-membuat-kotak-scrollbar-dalam.html">Cara Membuat Kotak Scrollbar Dalam Postingan</a></div>
</div>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ayj29VISprHD39wNJsFuK5F2f9ve7Obu0Vjm3NJGhZB5piMq6_9ZaL6bIy4njbPfRSJwKWrHuxdMo4dxYmd-lkGaJUX5szMLkZnxPt8lu2-dzTzrAeMeyztFqXHeh0o6QrylM-iRanEt/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:284px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
1. <a href="http://tipzrfrancblog.blogspot.com/2010/09/membuat-dropdown-menu.html">Cara membuat Dropdown Menu</a></div>
<div class="list">
2. <a href="http://tipzrfrancblog.blogspot.com/2010/09/cara-membuat-kotak-scrollbar-dalam.html">Cara Membuat Kotak Scrollbar Dalam Postingan</a></div>
</div>
script daftar isi dengan angka di sampingnya:
<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
1. <a href="http://tipzrfrancblog.blogspot.com/2010/09/membuat-dropdown-menu.html">Cara Membuat Dropdown Menu</a></div>
<div class="list">
2. <a href="http://tipzrfrancblog.blogspot.com/2010/09/cara-membuat-kotak-scrollbar-dalam.html">Cara Membuat Kotak Scrollbar Dalam Postingan</a></div>
</div>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
1. <a href="http://tipzrfrancblog.blogspot.com/2010/09/membuat-dropdown-menu.html">Cara Membuat Dropdown Menu</a></div>
<div class="list">
2. <a href="http://tipzrfrancblog.blogspot.com/2010/09/cara-membuat-kotak-scrollbar-dalam.html">Cara Membuat Kotak Scrollbar Dalam Postingan</a></div>
</div>
Note :
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.
0 komentar:
Posting Komentar