Membuat Text Resizer Blog Dengan CSS

"

Melihat dari gambar diatas pasti sobat mengerti apa yang akan kita bahas kali ini,,,yups benar kali ini kita akan belajar bagaimana membuat Text Resizer. Fungsi dari Teks Reziser sendiri ialah untuk merubah ukuran text postingan anda menjadi lebih besar atau lebih kecil dengan meng-klik button atau text dipostingan tersebut. Dan untuk membuatnya kali ini kita tidak akan membutuhkan Javascipt atau jQuery hanya menggunakan CSS saja,jadi insyaallah tidak akan mempengaruhi kecepatan blog anda. Untuk demonya silahkan lihat pada posting blog ini kemudian klik tombol Teks Resizer untuk mencobanya
Untuk membuatnya ikuti langkah-langkah dibawah ini

* Pertama-tama log ini dulu ke acoount blog anda.

* Selanjutnya klik Rancangan, kemudian 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==&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"/>

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==&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>

• Langkah terakhir Simpan Template dan preview

Untuk Ukuran perbesaran anda dapat menggantinya sesuai dengan selera anda dengan cara mengganti font-size Diatas

"

Browse More Articles

Tweet

Written by risky

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.