[ Thủ Thuật ] Thay đổi cỡ chữ cho blogger với Jquery

Là một blogger, chắc hẳn bạn cũng biết rằng các độc giả khác nhau có khả năng nhìn và thói quen đọc trang web/blog của mỗi người là khác nhau. Tuy nhiên mặc định mỗi blog chỉ cho một font chữ cố định. Vì vậy để kích thước chữ hợp với tất cả mọi độc giả. Hôm nay Namkna giới thiệu cho các bạn thủ thuật cho phép người đọc của bạn thay đổi kích thước phông chữ trong các bài viết của blogger như họ muốn, lớn hơn hoặc nhỏ hơn một cách dễ dàng, đơn giản và nhanh chóng, mà không phải tải lại (làm mới) trang hoặc bất cứ điều gì bằng cách sử dụng các truy vấn jquery.

Các bạn hãy xem demo: 

  View Demo

Vậy, chúng ta hãy xem làm thế nào để Thêm nó.

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Download Template Full Version.

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML)  => Xem vdeo:

4- Dán đọn code bên dưới vào trước thẻ </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrpBsnYwSfRZSDrebMUsmOMS47skyJmEJDjl6M-0iZ460ZYtKbGo-7dUfiz47CLmhhdUCb0Qz-X1mlpq6x810WpEkKZ-PO2K89dPKNca-Ip9SY6MBlaznJCQR_XplZLl19AQVinLQXDs/s1600/slider-bg-namkna-blogspot-com.png) 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/AVvXsEgB-9Ak_zc8zu7VDXmWcydUESQ94jwKNXBusqrAcp8hNgE8-GU6GBHlZGWJ-ZzZldncm3_Nod433JsKyZSKXVQ-FMgEaWfXNjbcBB3RFC7MuNZ36x5nAnYnKo9knpy9FC8dJ73jQFk8IZI/s1600/pin-namkna-blogspot-com.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

5- Tìm đoạn mã bài đang có dạng tương tự như sau:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

- Thêm các đường màu xanh trước và sau mã như sau:

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

6- Bấm Lưu Mẫu lại

7- Vào Bố cục (layout) => Thêm tiện ích (Add widget) => HTML/Javarscip và dán đoạn code bên dưới vào:

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://namkna.blogspot.com/" title="Blogger Templates" target="_blank">Namkna's Blog</a> | 
<a href="http://namkna.blogspot.com/" title="Tiện ích thay đổi cỡ chữ cho blog với Jquery." target="_blank">Get Yours ?</a></p>

- Trong đoạn code trên có thể xóa bỏ phần màu xanh để bỏ quảng cáo nha.
- Lưu tiện ích lại.
Lưu ý: bạn nên tải file javar (mootools.js) về và Upload lên host riên để dùng lâu dài nha.

allblogtools.com

Điểm 4.6/5 dựa vào 87 đánh giá

• Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
• Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
• Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem