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 HTMLCara membackup template blogger anda
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>
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='http://lh6.ggpht.com/-KE0ro1QoWh4/TpsYJPWKK6I/AAAAAAAAFSQ/jsqwYamP1h8/greenI%25255B2%25255D.png?imgmax=800'/></a> | <a class='kurangiFont' href='#' rel='nofollow'><img src='http://lh6.ggpht.com/-9pkElgDiXP8/TpsYHeeJAYI/AAAAAAAAFR4/s0GJlaQiYDg/blueD%25255B5%25255D.png?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
Tidak ada komentar:
Posting Komentar