Membuat Text Resizer Hanya Dengan CSS3[Tanpa Javascript]

Kali ini saya akan mengajak anda untuk membuat Text Resizer yang berfungsi untuk merubah ukuran text postingan anda menjadi lebih besar atau lebih kecil dengan meng-klik button atau text dipostingan tersebut. Dan disini kita akan mengabaikan javascript, atau bisa dibilang pure CSS3 yang bekerja, jadi saya jamin ini tidak akan mempengaruhi beban Loading anda.

Contohnya dapat anda lihat pada setiap postingan di blog ini, silahkan klik Button Text Resizer untuk mencobanya:

Lantas bagaimana cara membuatnya? Cukup Simple, silahkan ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika sudah, letakkan Kode CSS dibawah ini tepat diatas atau sebelum kode ]]></b:skin> tersebut:

.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: 90%;
}
.textsizernorm {
font-size: 100%;
}
.textsizerbig {
font-size: 110%;
}
.textsizerbigger {
font-size: 125%;
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;}

6. Beralihlah dan cari Kode <data:post.body/>
7. Jika sudah, letakkan Kode dibawah ini Tepat sebelum kode <data:post.body/> tersebut

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>

8. Lalu letakkan Kode </div> setelah kode <data:post.body/> tersebut

Untuk lebih jelasnya, perhatikan Contoh Dibawah Ini:

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>

<data:post.body/>

</div>

9. Save Template anda dan lihat hasilnya....


*Ukuran Perbesaran dapat anda rubah sesuai selera disini saya menggunakan 90%, 100%, 110%, dan 125%