Cara Membuat Text Resizer di Blog. 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
- 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=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><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=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
<data:post.body/>
</div>
- Langkah terakhir Simpan Template dan preview
akhirnya selesai.... tidak perlu bingung dengan code css yang begitu banyak. asalkan sobat mengikutinya dengan benar, pasti berhasil. sekian dan jangan lupa follow blog saya ya...
No Responses to "Cara Membuat Text Resizer di Blog"
Post a Comment