Iklan 300 x 250

Random Post

Recent Post

 

Membuat Text Resizer Blog Dengan CSS

Text Resizer: Click for Resizer

Melihat dari gambar diatas pasti sobat mengerti apa yang akan kita bahas kali ini,,,yups benar kali ini kita akan belajar bagaimana membuat Text Resizer. 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

1.Log ini dulu ke acoount blog anda.
2.Selanjutnya klik Rancangan, kemudian pilih Edit html. Jangan lupa centang Expand Template Widget
3.Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
4.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;}
5.Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya
<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"/>
6.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==&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>
7.Langkah terakhir Simpan Template dan preview

Untuk Ukuran perbesaran anda dapat menggantinya sesuai dengan selera anda dengan cara mengganti font-size Diatas


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Text Resizer Blog Dengan CSS
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

13 komentar:

Mimi Taria mengatakan... Reply Comment

nice posting mas,,,
ku copy dulu tutorialnya ya bang,,,
suatu saat kl dah ada niat tuk ganti desain pada text postingan biar tinggal buka aja,,,,
oiya ku tunggu tutorial yang lainnya,,,
bener2 membantu untuk mendesain blog agar tampak lebih cantik,,,,hehehee

Thx tutorialnya..
Saya msh bingung tuh buat yang halaman home sama posting berbeda bar nya.. soalnya gak nemu kode wrapernya. Bisa dibantu?^^

IZAL mengatakan... Reply Comment

waw

Go-blogg mengatakan... Reply Comment

wach,mantabs nich ka..
ijin save ya.

Teras Info mengatakan... Reply Comment

mantabs ilmu blognya, kawan...
terimakasih banyak...

Mancap tipsnya $$ob ;) perlu banyak belajar tentang CSS disini nih. Salam...

ijin copas sahabat untuk dipelajari, salam

@ all sama-sama sobat :x:

Unknown mengatakan... Reply Comment

Trus Caranya Bikin Emoticon Pada post komentar gmana???

@Dark4eve

baca lihat label ini sob:

http://nobinoku.blogspot.com/search/label/Emotion

Semoga membantu :j:

Unknown mengatakan... Reply Comment

Thanks Brooo.... Trus Untuk Bikin Daftar isi kayak punyanya bro... gmana??? bukan yg pake jQuery Lho.... mohon bantuanya ya.... Di tunggu nich...:x:

@Dark4eve

Silahkan dibaca sob

http://nobinoku.blogspot.com/2011/02/membuat-daftar-isi-blog.html

semoga membantu :c:

Anonim mengatakan... Reply Comment

thanks sob atas informasinya, blogwalking neh

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky