Sabtu, 06 Agustus 2011
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, namun disini sudah dilakukan sedikit perombakan, sehingga menjadi text adjuster juga. Untuk mencobanya, klik aja button "Klik Aja Bwat S'suaikan" 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:
]]>
5. Jika sudah, letakkan Kode CSS dibawah ini tepat diatas atau sebelum kode ]]> 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
7. Jika sudah, letakkan Kode dibawah ini Tepat sebelum kode tersebut
<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"/>
8. Lalu letakkan Kode </div>
setelah kode tersebut
Untuk lebih jelasnya, perhatikan 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>
9. Save Template anda dan lihat hasilnya....
*Ukuran Perbesaran dapat anda rubah sesuai selera disini saya menggunakan 90%, 100%, 110%, dan 125%
Silahkan perombakan sehingga menghasilkan yang lebih unik n baru . . .
Contohnya dapat anda lihat pada setiap postingan di blog ini, namun disini sudah dilakukan sedikit perombakan, sehingga menjadi text adjuster juga. Untuk mencobanya, klik aja button "Klik Aja Bwat S'suaikan" 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:
]]>
5. Jika sudah, letakkan Kode CSS dibawah ini tepat diatas atau sebelum kode ]]> 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
7. Jika sudah, letakkan Kode dibawah ini Tepat sebelum kode
<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"/>
8. Lalu letakkan Kode </div>
Untuk lebih jelasnya, perhatikan 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>
9. Save Template anda dan lihat hasilnya....
*Ukuran Perbesaran dapat anda rubah sesuai selera disini saya menggunakan 90%, 100%, 110%, dan 125%
Silahkan perombakan sehingga menghasilkan yang lebih unik n baru . . .
Label:
Blogging Tips N Trick
Langganan:
Posting Komentar (Atom)
Translate
Blog Archive
- 2014 (1)
- 2013 (5)
- 2012 (40)
-
2011
(136)
- November(4)
- Oktober(6)
- September(3)
-
Agustus(11)
- Pola-Pola Hereditas
- Hereditas Pada Manusia
- Penjelasan Shortcut Dalam COREL DRAW
- Sifat Koligatif Larutan
- Rahasia-rahasia Holocaust yang tak TERUNGKAPKAN !!...
- Ahli Radar Dunia, Putera Indonesia
- Membongkar Misteri Mayat Tujuh Korban G30S
- DETIK-DETIK MENJELANG KEPERGIAN MANTAN PRESIDEN SO...
- Membuat Text Resizer Hanya Dengan Css3 [TANPA SCRIPT]
- Dulu DIa Bukan Siapa-Siapa By Pandji Pragiwaksono,...
- Morning People By Pandji Pragiwaksono, Lirik
- Juli(21)
- Juni(9)
- Mei(29)
- April(9)
- Maret(7)
- Februari(15)
- Januari(22)
- 2010 (38)
Label
- Agama (2)
- Android (4)
- B. indonesia (10)
- B.Inggris (5)
- Biologi (40)
- Blogging Tips N Trick (4)
- EXACT 2 File (1)
- Fisika (15)
- Geografi (3)
- Indonesia (9)
- Kimia (19)
- Linux (8)
- Lyrycs n Songs (16)
- Misteri (13)
- Neuro Associative Conditioning (3)
- Olahraga (7)
- Sejarah (19)
- Software (15)
- Teknologi (37)
- Tips N Info (79)
- Tokoh (7)
Entri Populer
-
Dalam postingan sebelumnya kita sudah mempelajari beberapa pernyataan khusus hukum kedua termodinamika. Perlu diketahui bahwa pernyataan k...
-
Anda ingin membuattampilan desktop anda menjadi lebih menarik? Rainmeter adalah salah satu solusinya. Rainmeter adalah aplikasi untuk me...
-
Makam kaisar Tiongkok, Qin Shi Huang, disebut-sebut sebagai salah satu penemuan arkeologi terbesar abad ke-20. Sejarah mencatat, Qin Shi Hua...
-
I am a very emotional person, and often gets easily moved with simple pictures, songs or movie.. There is nothing I hold dear and proud than...
-
Yao!!! Akhirnya bisa postingin artikel lagi, setelah perang besar melawan ujian semester. Lama gak buat postingan jadi kali ini saya bikin y...
-
LANJUTAN DARI BAGIAN (1) 77. Apa bedanya wayang, sepatu, dan jengkol? Kalo wayang ada yang namanya semar, kalo sepatu disemir, kalo jeng...
-
Cinta…. apa yang sedang terjadi…. Seminggu tanpa berita…. Seminggu tanpa cerita…. Seminggu juga tanpa bicara….. Dan cinta…. sedang apaka...
0 komentar:
Posting Komentar