Pernahkah anda melihat website yang mengijinkan anda mengubah ukuran
font sesuka hati ? Apakah anda menjadi tertarik untuk memiliki widget
tersebut ? Anda tidak usah bingung jika anda tidak bisa membuat seperti
itu, saya akan ajarkan bagaimana caranya dengan mudah memasang widget
untuk merubah font di Blogger
Fitur widget TrikBlogger Font Resizer
1. Bisa menambah ukuran font
2. Bisa mengurangi ukuran font
3. Bisa direset ke ukuran semula ( anda harus melakukan pengaturan
manual javascript anda berdasar ukuran font di css blog anda )
Kekurangan ( Jika anda bisa memperbaikinya, tolong beritahu saya )
1. Stylenya reset jelek ( jika anda menemukan gambar yang cocok,
silahkan komentar di post ini dengan menyertakan link gambarnya )
2. Setelah menekan + atau - ataupun reset, layar sepertinya kembali ke posisi semula.
Maksud : Jika misal ada website berisi 300 kata dan letak scroll
ditengah, maka setelah ditekan +, layar ke atas karena font membesar
sehingga letak scroll menjadi lebih keatas, sehingga lebih menganggu
Info :
- Gambar berasal dari MBT, tapi javascriptnya tidak
- Javascript berasal dari stackoverflow
Langkah pertama yang harus diingat adalah membackup template blogger anda, buka kembali :
Cara membackup template blogger anda
Langkah kedua buka blogger > Template > Edit HTML
Memasang Javascript Font Resizer
Mudah sekali, anda tinggal cari </head>
Lalu letakkan javascript ini dibawahnya
<script>
/* sebagian kode ini berasal dari website tanya jawab, yaitu
http://stackoverflow.com/ , diberi fitur tambahan dan dibuat kontibel
untuk blogger oleh trikblogger.net, sebelumnya tidak menyediakan fitur
mengurangi ukuran font */
/*<![CDATA[*/
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('.post-body').css('font-size');
$(".kembalikanFont").click(function(){
$('.post-body').css('font-size', originalFontSize);
return false;
});
// Increase Font Size
$(".tambahFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 14);
var newFontSize = currentFontSizeNum*1.2;
$('.post-body').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".kurangiFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 14);
var newFontSize = currentFontSizeNum*0.8;
$('.post-body').css('font-size', newFontSize);
return false;
});
});/*]]>*/
</script>
Ganti 14 atau kode yang diberi background merah dengan ukuran font yang
digunakan blog anda ( ukuran di css body atau post-body )
Lalu ganti kode yang diberi background kuning dengan persentase perubahannya, misal 1.2 berarti 120% dari ukuran font 14
Memasang HTML
Pasang kode ini dimana saja.
<b:if cond='data:blog.pageType == "item"'>
<a class='tambahFont' href='#' rel='nofollow'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF1bdFBLw3kn4SAv_Zwo92PV8n7-2KblRIQrnp67mGrwhyif9ht-I0RUj0MqB7cxEl036ShGWezY4YVR3eKTdf7y8B_ZVvBco_rX-i8bR6JbnkU0A46dls8sM1TyRIlg1HcSEH6FksWro/?imgmax=800'/></a>
| <a class='kurangiFont' href='#' rel='nofollow'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEy_Gjf5hyjZ3CAh2Z0c3oVfePHdtCSHweElbYVFZa1I4Ktt1XnL8pbHU5my6rtHUgFDJaIq7f1CMh01N6vM9M0bOM1bSFeetibLL61RTiMijdJZSy0MTBFeqN17eDVXYAOjAqCHrJXJg/?imgmax=800'/></a>
<a class='kembalikanFont' href='#'>Reset ↕</a></b:if>
Jika anda ingin meletakkan kode ini dibawah post, letakkan dibawah
<div class='post-footer-line post-footer-line-3'>
atau dibawah juga kode ini
<data:post.body/>
Setelah itu save template anda
Jika misal tidak bisa/tidak work, pasang jquerry di blog anda
Letakkan kode ini dibawah <head>
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
