| Pada kali ini saya akan menulis atau membahas mengenai tutorial yang hampir sama dengan artikel saya sebelumnya tentang Memperjelas Gambar dengan Zoom Pada Blog. Tapi pada tutorial yang sekarang bukannya membahas zoom gambar melainkan zoom pada teks atau tulisan. Pada umumnya setiap blog itu dalam menulis artikel, untuk pemilihan font teks atau tulisannnya ada yang jenis fontnya kecil adan juga yang memasang font besar.
Nah apabila kita menjumpai suatu blog atau website yang menggunakan teks atau tulisan yang sekiranya menurut anda tidak bisa dilihat atau kurang jelas dibaca, pasti akan malas sekali untuk mengunjungi blog tersebut karena tulisannya kecil sekali. Tapi sekarang anda jangan berkecil hati karena saya akan berbagi kepada anda bagaimana cara mengatasi tulisan yang tidak begitu jelas supaya tampak jelas untuk dibaca oleh anda. Dengan fasilitas text resizer yang akan saya bagikan pada anda, anda lebih mudah membaca artikel yang teknya kecil-kecil karena teks yang kecil tersebut bisa diperbesar atau anda juga bisa memperkecil. Ok langsung aja saya kasih tahu bagaimana cara membuat text resizer itu, simak sampai tuntas artikel saya ini.
Berikut cara membuat teks resizer di blog :
1. Login ke blogger
2. Pilih Rancangan => pilih Edit html
3. Jangan lupa centang Expand Template Widget
4. Terlebih dahulu backup template anda dengan klik download template lengkap
5. Cari kode ]]></b:skin>
6. Setelah dapat copy kode html di bawah ini dan paste tepat diatas 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: 4px;
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;}
7. Langkah selanjutnya anda cari kode <data:post.body/>
8. Kalau sudah, lalu paste-kan kode dibawah ini diatas kode <data:post.body/>
<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"/>
9. Pada kode <data:post.body/> beri tambahan kode </div> tepat dibawahnya.
Saya beri contoh untuk penerapannya seperti 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>
10. Selesai, Save Template dan lihat hasilnya.
0 komentar:
Posting Komentar