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.
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 comments:
Post a Comment
Semoga Bermanfaat Buat Kalian Tentang Info-Info Di Blog Ini :)
silahkan tinggalkan komentar ANDA kalau ada yang kurang berikan saran pada blog ini atau tinggalkan kkomen anda di buku tamu saya " JANGAN LUPA JOIN YA MAS BRO " TAR SAYA JOIN BALIK . terima kasih atas kunjunganya .