Blogger Tutorial

Membuat Text Resizer Hanya Dengan CSS3[Tanpa Javascript]

09.42,9 Comments


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%




hosting indonesia

You Might Also Like

9 komentar:

  1. bosss, bisa beritau saya gmana cara buat tab menu yang kaya blog ini? saya sangat tertarik dengan tab menunya, lam lenal.... thanks b4

    BalasHapus
  2. Nice info kawan..
    salam kenal..

    kalo ada waktu mampir di blog aku yah..

    wassalam

    BalasHapus
  3. @ Gede Ar: Maksudnya Menu navigasinya atau tab menu yg mana Sob? klo Menu Navigasi kebetulan saya udah share 3 bentuk contoh dipostingan terakhir...

    @ chandra blog inspirate: Thnx atas kunjungannya ...

    BalasHapus
  4. BERHASILLLLLLLLL
    MKASIH BRO!!!!!!!!!
    LIHAT HASILNYA DI
    http://exact2sman3.blogspot.com/

    BalasHapus
  5. Makasih gan ...
    Untuk Vertical navigasi Pake CSS3 Buat lagi DOnk Yang Lainnya

    BalasHapus
  6. @ Khoirul Mustofa: Udah bisa kan Sob? baru aku mau tanya gak bisanya dimana hhe... OK nanti aku liat hhe..

    @ Nurul Imam: Sama2 Sob... OK ntar klo sempet tak bikin lagi sob...

    BalasHapus
  7. @ ijal fauzi : makasih Sob.. :)

    BalasHapus