Membuat Artikel Posting Menjadi Besar (Teks Resizer) Di Blogger

Artikel saya kali ini akan mengajak anda untuk membuat Teks Resizer yang berfungsi untuk merubah ukuran teks postingan anda menjadi lebih besar atau lebih kecil dengan hanya mengklik button atau teks 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.

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

1. Login ke Akun Blogger anda masing-masing

2. Klik design atau rancangan, kemudian pilih edit html

3. Cari kode seperti dibawah ini :

]]></b:skin>

4. 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"/>

7. 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>

8. Save Template anda dan lihat hasilnya....
_______________
*Ukuran Perbesaran dapat anda rubah sesuai selera disini saya menggunakan 90%, 100%, 110%, dan 125%