Tambah Butang jQuery Resize Teks Bergaya Untuk Posts Pada Blogger Blogs

Ramai orang meminta untuk buat tutorial bagaimana untuk memperbesarkan saiz teks didalam blogger. Dengan menggunakan JQUERY dan beberapa ikon yang berwarna-warni boleh mengubah saiz dan mereka terapung di sudut tepi posts.Ini tiga butang untuk meningkatkan saiz teks, mengurangkan saiz teks dan butang reset bersama-sama dengan ikon saiz semula teks standard.

Tambah Gadget Resize Teks Colorful Untuk Posts Blogger

Jangan lupa supaya Backp up templates anda dulu sebelum melakukan tutorial ini. 
Bagaimana untuk Backup Blogger Template

Langkah 1. Didalam (New Design) Blogger Dashboard Klik Drop Down Menu  > Pilih Template > Edit Html >  Proceed > Tick The Expand Widget Templates Box.

Langkah 2. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

</head>

Langkah 3. Copy kode dibawah ini dan paste diatas atau sebelum kode </head>

Nota - Jika anda pernah menambah skrip jQuery ke blog anda perlu membuang  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<!-- Start Text re size gadget by http://www.jeritanblog.com -->
<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 by http://www.jeritanblog.com -->

Langkah 4. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

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

Langkah 5. Copy kode dibawah ini dan paste dibawah atau selepas kode <div class='post-header-line-1'/>

 

 Nota - Alat ini kini bersedia untuk hanya memaparkan di muka surat pos untuk memaparkan di halaman rumah juga anda perlu mengeluarkan dua bahagian kod kuning.

<!-- Start Text re size gadget by http://www.jeritanblog.com -->

<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/AVvXsEgBEfWkuwr287ElLjzUgEQrPNqbeXdCJnPni9MKAI-eeARVs8m8VALBfqU3LxukAUNbGCTsWcaMEtVyy8YSJDbLq-bSVHULib7ZBc-_ZRblQsnqOPE7eth5Q6N8YpGTbXhVxm3IENEl-gE/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/AVvXsEjvxINhdJ1-D4Cwvy78yf4Pgp9Uv7kU1V6K70CkOTvSnFpEQ2t02RZCedv1LeGiaIJO-ERg-p-KatAYpDF6WowKhdxx10fo85LtLJKaGppgJ8rKXHZI5jXNTh57t1BAL2lZdGCn7NvBZkQ/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/AVvXsEjiZ9Ldmcm5SS2MRN36OgcStpYD6_ZxiOGYF9hbCyDP-pXc8ayMEsl352HNGksHWk17TFpmZFXPtZJx-pNR04NpPZ881B57fBoTPIc7oqRjSUrSTBBlZC70w8XQX8qBfCuIzG_3GZB-slU/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/AVvXsEjunRGB52NJOqYoyTNN0rrlK0WrMUX0CdfU8kRgfogiC1Tdq-bL3JNSjd5wZYG1kC8kQw5Z8QGWxLZnRc1IW_YCbeqYfrIXDU8WPKjift5Vt06Sd8rPW_t5_K6PtZBwwx0N3NJ0dzh2V2w/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>

</b:if>

<!-- End Text re size gadget by http://www.jeritanblog.com -->

Langkah 6. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

<data:post.body/>

Langkah 7. Tukar kode ini <data:post.body/> dengan kode dibawah.

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

Langkah 8. Simpan Template.