Friday, December 16, 2011

Kontrol Ukuran Font Blogger Menggunakan Jquery

widget blogger kontrol fontsSebagai seorang blogger, saya tahu bahwa pembaca blog saya dengan berbagai ukuran layar yang berbeda , Jadi ukuran font harus cocok untuk setiap pembaca tunggal, tidak peduli ukuran layar nya, atau ukuran favoritnya,
Hari ini saya menyajikan salah satu widget yang paling pernah saya sesuaikan untuk blogger.
Saya senang membuat itu, dan saya pikir Anda akan menikmati menggunakannya untuk blogger anda, widget ini akan memungkinkan pembaca anda untuk mengubah ukuran font posting blogger Anda yang mereka inginkan, lebih besar atau lebih kecil, dengan cara, mudah dan sederhanacepat tanpa . Untuk anda yang ingin melihat bagaimana widget kontrol font ini :



Memasukkan widget kontrol font Kedalam Blogger.

1. Masuk pada akun blogger anda , pada menu dasboard pilih design > edit html .



2. Pada menu edit html , cari kode </head>

3. Copy kode html dibawah ini , kemudian paste kode tersebut sebelum kode </head>

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){
var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);
new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());
});
  </script>
<style type='text/css'>
  div.slider {
  width: 97%;
  height: 26px;
  background: url(http://4.bp.blogspot.com/-r0WKMic2VOs/TaJQD3MI26I/AAAAAAAAAxE/od7dEWVqFPw/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;
  }
  </style>

4. Setelah memasukkan kode diatas , maka langkah selanjutnya adalah mencari kode seperti ini :

  • <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>

Note : fokus pada kode yang berwarna biru

5. Setelah mendapatkan kode tersebut letakkan kode html lain seperti dibawah ini

  • <span id='fontSize'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </span>

Note : pasang kode berwarna biru seperti contoh kode diatas.

Setelah anda selesai memasang benar kode biru diatas , save template anda lalu pergi menuju kebagian page element pada blogger anda.

Pada menu page element , pilih add gadget > html javascript.






Kemudian copy paste kode dibawah ini , dan letakkan kode tersebut kedalam html / javascript .
<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://vianjb.blogspot.com" title="Blogger Templates" target="_blank">vianjb</a> |
<a href="http://vianjb.blogspot.com" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p></div>

Klik save dan lihat widget kontrol font kini telah ada di blogger anda .

2 comments:


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam