Ukuran font blogger denganl Widget J-Query

Ukuran font blogger denganl Widget J-Query.

Sebagai seorang blogger, saya tahu bahwa pembaca memiliki ukuran layar monitor yang berbeda dalam kebiasaan membaca situs saya, Jadi ukuran font harus cocok setiap pembaca, tidak peduli ukuran layar nya, atau ukuran favoritnya kami mempunyai tips jitu.


Hari ini saya menyajikan salah satu widget yang disesuaikan untuk blogger.
Saya membuatnya, dan semoga anda dapat ikut menikmaktinya, widget ini akan memungkinkan pembaca mengubah ukuran font dari posting blogger Anda sesuai yang mereka inginkan, besar atau kecil, dengan cara yang mudah, sederhana dan cepat tanpa menyegarkan halaman atau hal menggunakan j-query Jadi mari kita ikuti bagaimana cama menambahkan itu

Peringatan: Sebelum Anda mulai menerapkan perubahan apapun pada kode template blogger, Kami menyarankan Anda sebagai Cadangan, dengan mengklik link Download Full Template.

1. Setelah Menjadi login ke account blogger anda, silahkan kunjungi ( Dashboard >> Design >> Edit Html ) dan temukan kode: </head>
Tepat sebelum itu, Tambahkan kode berikut,

<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/AVvXsEjrS4m6PvBsDkVGugSlLux0A7NnvLq5pp1GCjLw9pCymXWntfdICdTCX1OYtLnzrP1oOyEtf3Ak1ARCe7N87McG96BDVPT4tDP9UWcpX89z5wZQaZNoYrQuOAtczt_VSnCu3YPvLyap5XQ//) 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/AVvXsEgZ80gJ0OLQ1_r5Z-VC0u7_S6XmXkw7_42ttVkjyeHEge3BpT3VqQcQBXEv9HSgji2ZcPkvQprSPlQnkokLHyqwKX52UMMhKiOJYhiKCdPjxuLPA3CNVUGf3ojKZFj0C9en5jJKkyNRcmY/s400/allblogtools-pin.png) no-repeat;
width: 32px;
height: 47px;
margin:-35px 0 0 0;
cursor: move;
}
div#fontSize {
height: 40px;

}
</style>

2. Tambahkan Kode Widget

Pada halaman yang sama pada langkah 1, Cobalah untuk menemukan kode berikut atau yang mirip dengan itu,
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Dan Anda harus menambahkan kode sederhana sebelum dan sesudah itu, Jadi akan menjadi seperti berikut,

<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>

Jadi Yang harus Anda lakukan dalam langkah ini adalah untuk menambahkan hanya garis biru sebelum dan sesudah kode.
Sekarang klik Simpan Template dan lanjutkan ke langkah 3.

3. Menambahkan Para Widget Untuk Template Anda.
Hal yang besar tentang widget ini adalah bahwa hal itu cocok template blogger, dan Anda bisa menempatkannya dimana saja di blog Anda,
Yang harus Anda lakukan adalah pergi ke, (Dashboard>> Desain)
Dan setiap tempat, klik Tambahkan Sebuah tombol Gadget, dan pilih (Javascript / Html)
dan di bidang konten, paste kode berikut,

<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.allblogtools.com/" title="Blogger Templates" target="_blank">AllBlogTools.com</a> |
<a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

Dan Klik Simpan
Sekarang widget Anda siap di blog Anda dan Anda dapat mengujinya.

Tweet