Terkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil.
Untuk contoh soalnya, temen-temen bisa lihat disini, klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya :
- Login ke blogger dengan akun anda
- Selanjutnya klik Rancangan >> pilih Edit html
- Jangan lupa centang Expand Template Widget
- Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
- Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode ]]></b:skin>
.textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {
padding-top: 20px;
-o-transition: font 2s ease-in;
-moz-transition: font 2s ease-in;
-webkit-transition: font 2s ease-in;
}
.textsizersmall{font-size:12px}
.textsizernorm{font-size:13px}
.textsizerbig{font-size:14px}
.textsizerbigger{font-size:15px; font-weight:bold}
span.sizer {
float: right;
text-align: center;
height: 20px;
width: 250px;
margin: 0 10px 10px 0;
background: #333366;
display: block;
font-size: 18px;
padding: 2px 10px;
color: #00CCFF;
text-shadow: 1px 1px 1px blue;
cursor: pointer;
border: 1px solid #eee;
font-family: Times New Roman;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #000;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;display: block;
}
span.sizer:active {
border: 1px solid #555;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #003399;
box-shadow:0px 0px 12px #000;
-moz-box-shadow:0px 0px 12px #000;
-webkit-box-shadow:0px 0px 12px #000;
margin-top: -1px;
}
.clr20 {clear: both; height: 20px;} - Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span><div class="clr20"/>
- Kemudian letakkan kode </div> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat contoh dibawah ini.<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span><div class="clr20"/><data:post.body/></div>
- Yang terakhir Save Template anda, kemudian lihat hasilnya.
Jika temen-temen ingin tampilan hurufnya lebih besar lagi, anda bisa menggantinya dengan cara mengganti font-size diatas. Sudah dulu ya penjelasannya, waktunya tidur selamat mencoba dan semoga bermanfaat.
0 nhận xét:
Đăng nhận xét