بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ اارَّØِيم
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 BloggerFitur widget TrikBlogger Font Resizer1. Bisa menambah ukuran font2. Bisa mengurangi ukuran font3. 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 mengangguInfo :
- Gambar berasal dari MBT, tapi javascriptnya tidak
- Javascript berasal dari stackoverflow
Langkah pertama yang harus diingat adalah 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/AVvXsEi7O4Id93jrQy0Wy8msoRdd00yIJe6yAERfdbBlodhACJ39-G1ai_sxrWSbuydrK9evvHfpAG79J4uClLLTK5r0DGSI9tKcLEqQsWZphtOqjHR1BOeZ2lQ6XI4wcAaUyKsxk8nnabp6718/?imgmax=800'/></a> | <a class='kurangiFont' href='#' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMppa2RvPijj42LbJNFfEa1O0-umd6zYWfbkV1uzquiuV9JfwcGFoLlDYyzGojGHHkfcpMUPl1lepxVsDXXr_TB5Ywd7LDdzz2YC0cKhGIwyebENnavulyiXDJNCqp19Bhu2As-_oVPT0/?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
