jump to navigation

Control Font Size Widget September 12, 2011

Posted by ariefsyamsudien in Blog.
trackback

Sebagai seorang blogger, saya tahu bahwa seorang pembaca dengan berbagai ukuran layar yang berbeda, Jadi ukuran font harus cocok di setiap pembaca, tidak peduli ukuran layar nya, atau ukuran favoritnya,Hari ini saya menyajikan salah satu widget yang paling sesuai untuk blogger. dan saya pikir Anda akan menyukainya dan menikmati menggunakannya, widget ini akan memungkinkan pembaca anda untuk mengubah ukuran font posting blogger Anda yang mereka inginkan, lebih besar atau lebih kecil, dengan cara yang mudah sederhana dan cepat tanpa refresh halaman, karena widget ini menggunakan teknik j-query. Jadi mari kita lihat bagaimanaDemonya dan cara pasangnya.
  1. Pastikan sudah Login di Blogger.com, jika sudah klik Rancangan,
  2. Klik Edit Html

3.Cari kode  caranya tekan Ctrl+F, masukan kode dibawah ini taruh diatas kode 



  window.addEvent(‘domready’, function(){


var el = $(‘myElement’),
  font = $(‘fontSize’);


new Slider(el, el.getElement(‘.knob’), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(‘font-size’, value);
  }
  }).set(font.getStyle(‘font-size’).toInt());


});
 



  div.slider {
  width: 97%; 
  height: 26px;  
  background: url(http://3.bp.blogspot.com/-l0uH7ZIQAoE/TkaODvcAkuI/AAAAAAAAABM/Bp7KeijrqR8/s1600/slider-bg.gif) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaDqwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
 


  1. Langka selanjutnya cobalah untuk menemukan kode berikut atau yang mirip dengan itu,



    Dan Anda harus menambahkan kode sederhana sebelum dan sesudahnya, Jadinya akan seperti berikut,





     

    Jadi Yang harus Anda lakukan dalam langkah ini adalah untuk menambahkan hanya teks biru sebelum dan setelah kode. Sekarang klik Simpan Template 
  2. Eeets belum selesai sampai disini, masih ada lagi loh, langkah selanjutnya adalah menambahkan Gadget di Elemen Laman, Caranya klik Elemen Laman
  3. Klik Tambah Gadget (nantinya akan muncul jendelah baru)
  4. Klik HTML/JavaScript 
  5. Masukan kode dibawah ini di kotak HTML/JavaScript

  6. Klik Simpan, baiklah selesai sudah dan lihat hasilnya pada blog anda apakah sudah berhasil.

                           

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s