Create Text Resizer using CSS3 Transition - Perubah Ukuran Teks dg CSS3

Text Resizer ini amat sangat simple tetapi mampu memberikan fungsinya secara penuh sebagai sebuah "alat perubah ukuran teks". Kembali CSS3 transition kita manfaatkan sebagai pelengkap membentuk sedikit animasi tatkala perubahan ukuran teks terjadi. Javascript tetap dibutuhkan dan hanya berfungsi sebagai "saklar" atau "switch" hingga pergeseran pergantian ukuran font bisa dilakukan. Hal yang hingga saat ini masih terlalu sulit untuk dapat dilakukan oleh kode CSS.

Javascript yang digunakan untuk mendukung kinerja Text Resizer ini juga amat sederhana. Sampeyan bisa melihatnya di kode HTML yang akan disertakan di bawah. Script hanya difungsikan untuk merubah "class" pada kode CSS hingga setiap kali "KLIK" terjadi perubahan "class" yang berkorelasi dengan "perubahan ukuran font". Supaya memenuhi syarat sebagai sebuah Text Resizer, desain ini menyertakan 4 (empat) ukuran teks yang berbeda dengan system konversi ukuran dalam skala persen (90%-small, 100%-normal, 105%-big dan 110%-bigger). Jika dikehendaki ukuran atau skala berbeda, sampeyan bisa merubah nilai dalam persen tersebut dengan besaran yang lain.

Text Resizer dapat dipasang di blog sebagai sebuah fungsi permanen (pasang langsung di template pada bagian body) hingga secara otomatis muncul di halaman posting, atau digunakan secara temporer dengan hanya menggunakan di saat-saat tertentu ketika diperlukan (di halaman posting atau lewat Add Gadget).

Bukalah link DEMO di bawah ini untuk melihat bentuk "Text Resizer dan fungsi yang mampu dilakukannya".

D E M O

Cara menggunakan Text Resizer

• login to Blogger
• Dasbor : KLIK "Design" atau "Rancangan".
• Design (Rancangan) : KLIK "Edit HTML".
• Cari kode ]]></b:skin>
• Copy-Paste : Copy kode CSS dan pastekan tepat di atasnya.
• KLIK "SAVE Template" atau "Simpan Template".

Gunakan xHTML yang berisi javascript di bagian body template (fungsi permanen) atau di halaman posting dan Add Gadget (temporer).

Fungsi Permanen

• Setelah di halaman "Edit HTML", KLIK "Expand Widget Templates".
• Cari kode "<data:post.body/>".
• Rubah kode menjadi seperti di bawah kemudian KLIK "SAVE Templates (Simpan Templates).
• Coba hasilnya dengan membuat sebuah posting. Text Resizer akan terlihat di bawah judul posting (di atas postingan).

xHTML Text Resizer (Permanen)

<div class='tsizersmall' onclick='if (this.className==&quot;tsizersmall&quot;) { this.className=&quot;tsizernorm&quot; } else if (this.className==&quot;tsizernorm&quot;) { this.className=&quot;tsizerbig&quot; } else if (this.className==&quot;tsizerbig&quot;) { this.className=&quot;tsizerbigger&quot; } else if (this.className==&quot;tsizerbigger&quot;) { this.className=&quot;tsizersmall&quot; } else { this.className=&quot;tsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
 
<data:post.body/>

</div>

Fungsi Temporer

Sampeyan bisa menggunakan kode ini di halaman posting atau widget (sidebar widget dan yang lain).

xHTML (fungsi temporer)

<div style="padding: 20px 10px; margin: 4px; border: 2px solid #666;" class='tsizersmall' onclick='if (this.className==&quot;tsizersmall&quot;) { this.className=&quot;tsizernorm&quot; } else if (this.className==&quot;tsizernorm&quot;) { this.className=&quot;tsizerbig&quot; } else if (this.className==&quot;tsizerbig&quot;) { this.className=&quot;tsizerbigger&quot; } else if (this.className==&quot;tsizerbigger&quot;) { this.className=&quot;tsizersmall&quot; } else { this.className=&quot;tsizersnall&quot; }'><span class='sizer'>Text Resizer: Click here!</span><div class='clear20'></div><div align="justify">Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini! Tuliskan Teks di sini!</div>

Kode CSS Text Resizer

.tsizernorm, .tsizerbig, .tsizerbigger, .tsizersmall {
      padding-top: 20px;
      -o-transition: font 2s ease-in;
      -moz-transition: font 2s ease-in;
      -webkit-transition: font 2s ease-in;   
}
.tsizersmall {
      font-size: 90%;
}
.tsizernorm {
      font-size: 100%;
}
.tsizerbig {
      font-size: 105%;
}
.tsizerbigger {
      font-size: 110%;
      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;}

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «