CSS berikut ini dapat digunakan untuk menampilkan link dalam blok persegi dengan efek berubah warna bila pointer mouse berada di atasnya.
Link yang dipasang bisa berupa angka atau judul yang mewakili link tersebut.
1. Setelah anda Login di Blooger, silahkan anda menuju ke " Layout" lalu klik EDIT HTML
2. Backup dulu template anda, kemudian copi kode dibawah ini lalu tambahkan dibagian/ di atas kode </head>
3. Setelah itu simpan template.
4. Untuk kode dibawah ini anda bisa memasangnya dibagian <body>....</body>, namun bisa juga lewat Page Elemen dengan menekan Add a Gadget dibagian yang anda suka.
<div id="pagin">
<a class="sel">1</a><a href="...">2</a>
<a href="...">3</a>
</div>
Isikan alamat URL dari link yang anda kehendaki pada ".....", apabila anda ingin menambah jumlah link maka tinggal copi kode <a href="...">3</a> dan rubah angka 3 dengan angka selanjutnya atau judul dari link tersebut.
Contoh hasilnya bisa anda klik di kotak 1 s/d 4 pada bagian bawah.
Selamat mencoba
Link yang dipasang bisa berupa angka atau judul yang mewakili link tersebut.
1. Setelah anda Login di Blooger, silahkan anda menuju ke " Layout" lalu klik EDIT HTML
2. Backup dulu template anda, kemudian copi kode dibawah ini lalu tambahkan dibagian/ di atas kode </head>
<title>CSS used in Pagination</title>
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
3. Setelah itu simpan template.
4. Untuk kode dibawah ini anda bisa memasangnya dibagian <body>....</body>, namun bisa juga lewat Page Elemen dengan menekan Add a Gadget dibagian yang anda suka.
<div id="pagin">
<a class="sel">1</a><a href="...">2</a>
<a href="...">3</a>
</div>
Isikan alamat URL dari link yang anda kehendaki pada ".....", apabila anda ingin menambah jumlah link maka tinggal copi kode <a href="...">3</a> dan rubah angka 3 dengan angka selanjutnya atau judul dari link tersebut.
Contoh hasilnya bisa anda klik di kotak 1 s/d 4 pada bagian bawah.
Selamat mencoba
Tidak ada komentar:
Posting Komentar