2. Unlabelled
  3. Cara membuat 'tombol plus-minus font' di Blogger

Senin, 06 Maret 2017

Cara membuat 'tombol plus-minus font' di Blogger

Windra Asrah   14:56   0 komentar
Pernahkah kita membaca situs berita, yang kemudian terdapat tombol untuk mengecilkan atau membesarkan font. Nah saya di sini mau menjelaskan Anda tentang cara menambahkan hal ini, tapi di Blogger. Sebenarnya tips ini belum dipakai di blog Indonesia, namun saya ingin menambahkan saja supaya agak kelihatan user-friendly.

Demo

Dicoba saja di bagian kanan blog ini... Itu ada tombol plus ama minus. Harusnya tulisan di bawah ini berubah ukurannya:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat nisi mi, vitae sollicitudin urna luctus eget. Suspendisse eu rhoncus magna. Suspendisse rhoncus lectus sit amet ex fringilla sagittis id non tellus. Nam et ex eu lorem imperdiet maximus vehicula nec arcu. Duis mattis dictum eros sit amet lobortis. Integer quam diam, convallis ut velit sed, sollicitudin pretium turpis. Aliquam suscipit sed lacus sed gravida. Nullam pellentesque maximus diam lacinia rhoncus. Mauris viverra facilisis diam, eget egestas leo rutrum sit amet. Donec quis ligula vitae lectus congue venenatis ac id libero. Nunc interdum ex quis massa accumsan sollicitudin. Integer nec cursus leo. Phasellus ut consectetur sapien, at fringilla ante. Quisque sem sem, egestas vel consequat eu, laoreet ac est. Cras a dui ut arcu luctus tempus nec eget ante. Etiam imperdiet risus non felis tincidunt venenatis.

Etiam et quam tincidunt, vehicula quam non, lacinia tortor. Proin elementum ante vel est fermentum, rhoncus aliquam felis interdum. Integer feugiat tortor a magna ullamcorper, vitae lacinia odio feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lacinia libero nec porttitor elementum. Aliquam interdum aliquam mi, eu imperdiet odio commodo eu. Praesent sit amet pharetra libero, sed pretium libero. Cras facilisis felis in quam dignissim, et porta sem varius. Nam iaculis mi consequat vulputate luctus. Integer in ornare sapien. Aliquam finibus iaculis libero, eget ullamcorper dui aliquam lacinia. Sed volutpat ipsum ante, ac euismod mi vulputate in. Aliquam varius, ligula a varius viverra, felis sapien bibendum felis, id imperdiet erat tortor in ipsum.

Aenean sed eleifend urna. Etiam lacinia, enim quis tristique sollicitudin, orci nulla tincidunt dui, at convallis turpis turpis quis purus. Pellentesque sem odio, pulvinar nec libero eget, varius volutpat ex. Curabitur ullamcorper, mauris sed rhoncus feugiat, nisl nisl pulvinar massa, in scelerisque eros ligula sit amet nisi. Donec condimentum ex nunc, ac ornare odio sagittis scelerisque. Donec vehicula venenatis ligula, et facilisis augue laoreet ac. Sed vel posuere justo. Duis maximus massa in ligula vulputate tincidunt. Pellentesque pharetra vehicula maximus. Mauris volutpat elit id sapien sagittis, vitae iaculis tortor ornare. Donec lobortis justo et facilisis mattis. In vel dictum justo, vitae fermentum ante.

Donec massa dolor, bibendum et magna sed, rhoncus congue enim. Morbi eget urna tempus, posuere eros ac, fermentum lorem. Etiam maximus iaculis ligula, eget ullamcorper neque pretium eget. Nunc varius sem in ex porta viverra. Fusce tincidunt quis quam cursus luctus. Aenean dapibus scelerisque dolor, a elementum nisl auctor a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tristique sem arcu, sed dapibus ligula suscipit sodales. Etiam dictum odio velit, eget imperdiet nibh porta eu. Integer suscipit justo id ligula auctor luctus. Etiam sit amet libero sed diam mollis finibus. Donec facilisis neque in neque rutrum maximus. Vivamus scelerisque magna ut mattis cursus.

Phasellus ullamcorper efficitur ipsum, sed fringilla quam mollis id. Pellentesque enim dolor, eleifend eu accumsan in, dapibus eget nunc. Integer eget erat venenatis, tempor turpis nec, molestie dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nam nibh erat, hendrerit quis tellus at, tincidunt dignissim dolor. Etiam dignissim odio ex, vel rutrum est euismod in. Nam fringilla, metus in commodo consectetur, eros nulla cursus tortor, in blandit velit magna sit amet ligula. Duis non finibus purus. Fusce volutpat imperdiet nunc.

Penerapan

Bagaimana cara menerapkannya? Berikut ini tipsnya:

  1. Login Blogger
  2. Buka blog Anda
  3. Buka bagian templat
  4. Backup templat dulu
  5. Klik [Edit HTML]
  6. Cari kode </head>, lalu tambahkan kode berikut di atasnya

    <script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script>
    Optional. Cara ini hanya digunakan ketika Anda belum menggunakan jQuery. Jika sudah, maka Anda boleh melewati tahap ini
  7. Setelah itu, cari kode </body>, lalu tambahkan kode berikut di atasnya:

    <script type="text/javascript">
//<![CDATA[
function ftchg(t) {
    switch (t) {
        case "min":
            f -= 1, 10 == f && $("#ftmn").attr("disabled", ""), 24 > f && $("#ftpl").removeAttr("disabled");
            break;
        case "plus":
            f += 1, 24 == f && $("#ftpl").attr("disabled", ""), f > 10 && $("#ftmn").removeAttr("disabled");
            break;
    }
    $(".entry-content").css("font-size", f + "px"), $("#ftsz").text(f)
}
var f = parseInt($(".entry-content").css("font-size"));
$(window).load(function(){$("#ftsz").text(f)});
//]]>
</script>
    Lalu klik [Simpan]

  8. Setelah itu, buka tab Layout
  9. Di bagian sidebar, klik tambah gadget > HTML/JavaScript
  10. Tambahkan kode berikut, judulnya terserah, tapi disarankan "Change font Size":

    <button id="ftmn" onclick="ftchg('min')">-</button><span id='ftsz' style='padding:0 10px;font-size:14px'>--</span><button id="ftpl" onclick="ftchg('plus')">+</button&gt
    Lalu klik [Simpan]

  11. Selesai
Sekian dari artikel tentang cara memasang tombol 'plus-minus tulisan' di blogger. Jika ingin bertanya, silahkan bertanya saja, supaya tidak tersesat di Pantura. Terima kasih

Related Posts

All posts may be shown

Tidak ada komentar:

Posting Komentar

► Komentar diluar topik diperbolehkan, tapi tidak akan dibalas
► Link aktif dan iklan hukumnya HARAM
► Aturan memasukan elemen:
   a. Youtube: <i rel="youtube">...youtube url...</i>
   b. Kutipan: <b rel="quote">...quotes...</b>
   c. Kode pendek: <i rel="code">...code here...</i>
   d. Kode panjang: <i rel="pre">...code here...</i>
   e. Gambar: <i rel="image">...img url...</i>

Out Of Topic