Membuat Text Resizer Blog Dengan CSS

Text Resizer: Click for Resizer

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

1.Log ini dulu ke acoount blog anda.
2.Selanjutnya klik Rancangan, kemudian pilih Edit html. Jangan lupa centang Expand Template Widget
3.Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
4.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;}

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

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

7.Langkah terakhir Simpan Template dan preview

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

Artikel Terkait:

CSS

• Membuat Menu Navigasi Terapung
• Membuat Gambar Selalu Tampil Di Pojok Blog
• Comment Owner Berbeda dengan Pengunjung

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Text Resizer Blog Dengan CSS
Dalam Kategori : CSS
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.