Karena selera pengunjung blog berbeda-beda ada yang nyaman membaca di blog dengan ukuran font kecil, ada yang nyaman dengan ukuran font sedang, dan ada yang nyaman dengan ukuran font besar.
Dengan membuat fitur resize text di blog mu maka akan memberi nilai UI (User Intrface) lebih baik, dan UI yang baik tentunya disukai oleh Google.
Selain itu dari sisi pengunjung blog juga lebih nyaman membaca artikel mu berlama-lama tidak hanya membaca hal intinya saja, hal tersebutlah yang membuat bounce rate tinggi.
Nah apa itu bounce rate di blog?
Bounce rate di blog dapat diartikan sebagai rasio pantulan dari pengunjung yang membuka artikel di blog mu, maksudnya adalah pengunjung hanya membuka artikel blog mu sebentar karena dianggap kurang relevant dengan apa yang mereka cari.
Fitur resize text sudah saya pakai juga pada blog www.panduancode.com, namun saya setting agar fitur tersebut tampil hanya didalam artikel saja.
Jika penasaran seperti apa fitur resize text tersebut silahkan buka blog saya www.panduancode.com dan buka salah satu artikelnya, maka fitur resize text akan terlihat dan bisa kamu coba untuk memperbesar font atau memperkecil font di blog kamu dengan otomatis.
Cara Membuat Fitur Resize Text Di Blog
1. Buka Edit HTML Template
Fitur resize text di blog ini akan lebih efektif jika dipasang langsung lewat edit HTML template blog.
2. Pasang Jquery Di Blog
Resize text di blog ini membutuhkan sebuah library javascript agar berfungsi dan library yang digunakan adalah Jquery.
Maka kamu harus memasang Jquery di Blog terlebih dahulu, namun jika blog mu sudah terpasang Jquery maka tidak perlu memasang Jquery lagi cukup satu Jquery saja.
Jika pada blog mu belum terpasang Jquery maka kamu bisa mengikuti panduan memasangnya dibawah ini.
1. Cari kode </head>, kemudian jika sudah ketemu simpan Jquery online berikut ini diatas kode </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
3. Tambahkan Kode CSS
Agar tampilannya menarik dan fitur resize text ini berfungsi dengan baik maka kamu juga harus menambahkan kode CSS berikut ini.
Cara menambahkan kode CSS-nya mudah, pertama kamu cari kode </style> pada template blog mu kemudian simpan kode CSS dibawah ini tepat diatas kode </style>
.btextbsr > button{background:#1ca1f2;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:22px;box-shadow:0 1px 2px 0 rgba(0,0,0,.15),0 1px 1px 0 rgba(0,0,0,.30)} .text-resizer{position:fixed!important;position:absolute;bottom:83px;right:17px;z-index:998} .text-resizer1{position:fixed!important;position:absolute;bottom:25px;right:19px;z-index:998}
Kamu dapat mengedit kode CSS diatas sesuai dengan keperluan pada blog mu.
4. Tambahkan Javascript Resize Text
Selanjutnya kita harus menambahkan javascript resize text di blog, kode javascript resize textnya tidak terlalu banyak karena kita menggunakan library javascript Jquery.
Cara menambahkan javascript resize text di blog juga sangat mudah, caranya kamu cari kode </body> kemudian simpan kode javascript dibawah ini tepat diatas kode </body>
<script>//<![CDATA[
$('').ready(function() {
$('#incfont').click(function(){
curSize= parseInt($('.post-body, .post-info, #cssmenu>ul>li>a, #cssmenu ul ul li a').css('font-size')) + 2;
if(curSize<=22)
$('.post-body, .post-info, #cssmenu>ul>li>a, #cssmenu ul ul li a').css('font-size', curSize);
});
$('#decfont').click(function(){
curSize= parseInt($('.post-body, .post-info, #cssmenu>ul>li>a, #cssmenu ul ul li a').css('font-size')) - 2;
if(curSize>=12)
$('.post-body, .post-info, #cssmenu>ul>li>a, #cssmenu ul ul li a').css('font-size', curSize);
});
});
//]]></script>
Agar fitur resize text di blog mu berfungsi dengan baik maka kamu edit kode .post-body, .post-info, #cssmenu>ul>li>a, #cssmenu ul ul li a karena pada setiap blog memiliki kode element yang berbeda.
Namun untuk kode .post-body jangan diubah karena pada umumnya semua template blog menggunakan kode tersebut.
Fungsi dari kode .post-body adalah untuk mengatur tampilan artikel di blog mu, jadi jika kamu hanya ingin mengubah ukuran font artikel mu saja maka kamu cukup menggunakan kode .post-body saja.
Dan kode setelahnya yang diikuti dengan karakter koma kamu dapat hapus saja, atau dibiarkan juga tidak akan menjadi masalah.
Kamu juga dapat mengedit ukuran font minimal pada blog mu, coba kamu lihat kode if(curSize>=12) nah angka 12 adalah ukuran font minimal.
Dan untuk ukuran font maksimal kamu dapat mengedit kode if(curSize<=22) ubah angka 22 menjadi angka maksimal yang kamu inginkan.
5. Pasang Tombol Resize Text
Selanjutnya adalah memasang tombol resize text-nya di blog mu, kamu dapat memasang tombolnya dimanapun kamu mau.
Namun saya pada panduan kali ini memasangnya dekat dengan tombol back to top.
Dan berikut ini kode tombol resize text-nya.
<b:if cond='data:view.isSingleItem' id='HTML3' locked='false' title='Text Resize' type='HTML'><div class='btextbsr'><button class='text-resizer' id='incfont'><b>A+</b></button><button class='text-resizer1' id='decfont'><b>A-</b></button></div></b:if>
Perhatikan kode cond='data:view.isSingleItem' pada kode diatas, kode tersebut berfungsi untuk menampilkan tombol hanya di halaman artikel saja.
Dan kode id='HTML3' haruslah unique atau tidak boleh ada yang sama.
Sebagai contoh pemasangan tombol resize text di blog seperti yang terlihat pada gambar dibawah ini, saya memasang dibawah kode back-to-top.
Setelah semuanya sudah selesai selanjutnya save template blog mu dan coba akses salah satu artikelnya, maka akan terlihat seperti gambar dibawah ini.
Nah sampai disini kamu sudah selesai membuat fitur resize text di blog, semoga panduan ini bermanfaat untuk kita semua aamiin.
Dan jika ada pertanyaan silahkan sampaikan lewat widget WhatsApp, sekian terima kasih.
