Widget Control Untuk Mengganti Font Blogger!

Wah saya sayangat bingung mau kasih judul postingan ini tapi mudah-mudahan sobat paham, lebih jelasnya kontrol untuk mengganti ukuran font di blog oleh pengunjung jadi pengunjung bisa sesuka hatinya mengganti ukuran font di blog kita, nah bagi yang tertarik sobat bisa ikuti langkah-langkah membuat kontrol pengubah ukuran font di blogspot di bawah ini. Bagi yang tertarik lihat juga 30 kumpulan menu horizontal untuk blog anda.

1. Menambahkan kode css

Setelah sobat masuk ke acount blog sobat sendiri dari dasbor sobat klik rancangan nah dari rancangan sobat klik lagi edit HTML centang kotak kecil di samping tulisan expand template widget.

catatan : sebelum melakukan ini alangkah baiknya sobat mem backup temlate sobat dengan mengklik download full template.

sekarang sobat cari kode di bawah ini.

</head>

gunakan ctrl+f atau f3 untuk mempercepat pencarian, setelah kode di temukan paste kode di bawah ini di atas kode tersebut.

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6KpvL3VWO8zWs9FqYhiRmfWL_SBzxawBABaOGV2GTk-qBl3SOc14wYsfcDALSiPIosogkjEuRzOov-q-m6U_5-66nWcg-M-1VbqrbkXJSs9_mQWbUATjWNg6BlZUp4oqZxnWoLmqDqc/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpECGmZjyBvCy7IyZcfZBrlCrI5aPTMRmMatpLcOveN3PiERA54X07ljMDsTFqImRj-b5uXITtDCLpmeCRaf2jmyLTmPvKgC3okYN8k7ZIEfzljw3ex8zdLN2fYUFC_VMpNgzTTQu158/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

jangan dulu anda simpan karena akan berlanjut ke tahap berikutnya.

2. Tambahkan widget untuk area tulisan

Masih di halaman itu seperti pada langkah satu sobat harus cari kode di bawah ini 

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

Carilah kode seperti di atas dan sobat tambahkan kode sederhana sebelum dan sesudahnya lihat kode di bawah 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>

lihat kode berwarna biru di atas itu adalah kode tambahan sobatat menambahkan kode tersebut sebelum dan sesudahnya, masih bisa mengikuti saya? jika jawabannya 'ia' klik save template, dan kita akan berlanjut ke tahap berikutnya.

3. Menambahkan widget template

Hal yang sangat menguntungkan bagi sobat adalah widget ini sangat cocok untuk semua template dan sobat bisa pasang widget ini dimanapun sobat inginkan, nak dari halaman tadi kita beralih ke tata letak kalo dari dasbor klik rancangan klik tambah gadget pilih html/ javascript dan di daerah kosong tersebut untuk bagian judul sobat isikan ubah ukuran font atau terserah sobat mau kasih judul apa nah di daerah isi sobat masukan kode di bawah ini.

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.theant-budiana.blogspot.com/" title="Blogger Templates" target="_blank">blog urang sunda</a> |
<a href="http://theant-budiana.blogspot.com/2012/03/widget-control-untuk-mengganti-font.html" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

Klik save atau simpan dan lihat sekarang kontrol pengatur besar dan kecil tulisan di blog sudah terpasanga dan sobat bisa mencabanya sendiri. Selamat mencoba dan jangan lihat yang satu ini membuat kotak komentar facebook di blog?.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.