11
widget blogger pengubah font
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 == &quot;item&quot;'>
<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 &#8597;</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

Posting Komentar Blogger

  1. wiih template nya samaan nih :D haha
    kunjungan perdana gan, dtnggu kunbal ya kalo bole minta script daftar isi ny dong, punya saya berbentuk listbox gtu soalnya,

    BalasHapus
  2. Yang desain Template Trikblogger ini siapa ya? kok gak ada -_-

    BalasHapus
    Balasan
    1. kalau beli perasaan ga perlu dikasih kan (kecuali tempatenya mas sugeng ) ? ni buatan mkr

      Hapus
  3. Segera dicoba gan..
    Kunjungi balik ya gan.. http://dipasda.blogspot.com

    BalasHapus
  4. apakah widgetnya sama kayak di blog ini gan? pgn yang kyk di blog agan nih :D
    kunjungan ke - banyak
    kunbal : http://zonabarum.blogspot.com

    BalasHapus
  5. JUJUR AJA KAWAN.. DL SY SERING KENA TIPU SM PRAMAL GADUNGN & SAMPAI2 MTR AKU KEJUAL BUAT IKUTIN PERMINTAANNYA.. TP TUHAN SDH KASIHAN SM SY & BERIKAN JLN KLUAR UNTK PERTEMUKAN NMR Hp SANG PERAMAL MBAH RUWUH INI DAN DI SITULAH AWAL MULA KESUKSESAN SAYA. BAGI YANG MAU ANGKA TOGEL DENGAN MODAL 300.000 SAJA YANG ANDA KIRIM SAMA PERAMAL MBAH RUWUH,, MAKA KAMU SDH BISA DPT 3D/4D YG DI JAMIN 100% TEMBUS & MEMUASKAN . NI NOMOR Hp MBAH RUWUH 082 347 737 757 www.prediksitogelsgp4d.blogspot.com








    JUJUR AJA KAWAN.. DL SY SERING KENA TIPU SM PRAMAL GADUNGN & SAMPAI2 MTR AKU KEJUAL BUAT IKUTIN PERMINTAANNYA.. TP TUHAN SDH KASIHAN SM SY & BERIKAN JLN KLUAR UNTK PERTEMUKAN NMR Hp SANG PERAMAL MBAH RUWUH INI DAN DI SITULAH AWAL MULA KESUKSESAN SAYA. BAGI YANG MAU ANGKA TOGEL DENGAN MODAL 300.000 SAJA YANG ANDA KIRIM SAMA PERAMAL MBAH RUWUH,, MAKA KAMU SDH BISA DPT 3D/4D YG DI JAMIN 100% TEMBUS & MEMUASKAN . NI NOMOR Hp MBAH RUWUH 082 347 737 757 www.prediksitogelsgp4d.blogspot.com

    BalasHapus
  6. wah, pembaca makin dimanjakan dengan menu yang satu ini

    BalasHapus

 
Top