netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.

Tuesday, 22 January 2013

Thêm Buttons Hiệu Chỉnh Kích Thước Chữ Sử Dụng JQuery Stylish



Demo :

Thêm Tiện ích đầy màu sắc Resize Tiêu đề bài viết Blogger
Bước 1.Trong Blogger Design Click vào Bảng điều khiển của bạn chọn Thiết kế --> Chỉnh sửa Html,

Design Edit Html Widget Templates



Bước 2.Tìm đoạn mã sau đây trong blog Html của bạn: (Nhấn Ctrl và F hoặc F3 để tìm kiếm  Trong Blogger Template) :  </ head>
Bước 3. Copy và Paste đoạn code sau đây trực tiếp Trên / Trước   : </ head>
Lưu ý - Nếu bạn đã có  jQuery cao hơn trong blog thì bạn loại bỏ các mã màu xanh....


<!-- Start Text re size gadget -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);

// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget  --> 



Bước 4.Tìm đoạn mã sau đây trong blog Html của bạn: (Nhấn Ctrl và F hoặc F3 để Tìm Mã Trong Blogger Template) :

<div class='post-header-line-1'/>

Bước 5. Bây giờ Sao chép và dán mã này trực tiếp dưới đây / Sau :
 <div class='post-header-line-1'/>

Lưu ý - Tiện ích này được thiết lập để chỉ hiển thị trên trang bài viết để hiển thị nó trên trang chủ cũng loại bỏ hai phần của mã màu vàng....

<!-- Start Text re size gadget -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zb8xB1Q_WMHqu5cD_8uQ1hue1ffLTqrXMy35GIEPsoW0cj0XLzwq9GKG4N_MX0HMCeoaro2T9X-6uYg6BF0fANHd23rDpw42nSEp0PUirEzrSMmFVPJ3Is4rWa35me50izcaLZXJaxI/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2b4-xFZvYac0l-Nv2gKaYo2oGdyEkVgXqjus1Ok_s7_W9PLamT9n38DHH5Xpag2Qtb6Q_3LyHrk1uJt8aqT7C4JLXHNku_aUjmYpkGh1D0iebI4rRshSmvjb1J0BTtG_IZKUn0L2d0DA/s1600/bigger-font+-+Copy.png'/></a> 
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrWjYRyddQTt9Y-wLeufJI38Wzr37AOuQ1kQk7-dEh76Kogy7vlPmkOH-gtMQALI2vRojtS9q7dQRZq5kVmIuh3q4tfwvUbLd4Whx9vemLkPideqnxycSr5lUduCI-k1qVJAuEhqZhOg/s1600/smaller-font.png' style='cursor: hand;'/></a> 
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdugNswrgvhV6dR04TBt1wmyFO-IJGHjqKOiAlCzivIJeiW4anggT7hCn8r8wQOk8EjDlIPD5lOiA3C4yMWVBfWOvDFTfHxnOQQ4mfmU_cLq1PZgUv6HKt7b6cJ-uJUYCn7Myqn4dw0xY/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget --> 


Bước 6.Tìm đoạn mã sau đây trong blog Html của bạn: (Nhấn Ctrl và F hoặc F3 để Tìm Mã Trong Blogger Template) :

<data:post.body/>

Bước 7. Bây giờ thay thế <data:post.body/> với mã sau đây:

<span> <data:post.body/> </ span>

Bước 8. Lưu mẫu của bạn.

No comments:

Post a Comment

Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |