Home Snippet Tips Blogger Cara Membuat Fitur Atur Ukuran Teks atau Resize Text Setting

Cara Membuat Fitur Atur Ukuran Teks atau Resize Text Setting

Cara Membuat Fitur Atur Ukuran Teks atau Resize Text Setting

SobatMasbro - Banyak website atau blog yang sebagian besar berupa literasi atau bacaan, dalam banyaknya bacaan atau teks ini website tersebut harus nyaman bagi pengunjung.

Kita tak pernah tau bagaimana ukuran teks suatu bacaan itu baik atau enak dibaca bagi pembacanya, ada lebih enak ukuran kecil, ada yang lebih suka ukuran sedang dan ada yang lebih memilih ukuran besar.

Nah dalam hal tersebut saya ada solusinya, kali ini saya akan membagikan tutorial Membuat Fitur Setting Ukuran Teks di blog.


Pembaca bisa mengatur sendiri ukuran teks yang dia akan pilih sesuai keinginannya. Untuk tampilannya ada disebelah kanan layar sehingga mudah dijangkau.

Oke sob, langsung aja lanjut cara pemasangannya, untuk demonya ada dibawah.

Memasang Fitur Resize Text di Blog

  1. Sobat buka dashboard blogger.com.
  2. Pilih menu Tema > Edit HTML.
  3. Copy dan Paste kode CSS berikut tepat diatas kode </style> atau ]]></b:skin>.
    4. .resize-sobatmasbro{position:relative;z-index:50;cursor:pointer}.resize-sobatmasbro ul li{list-style:none}.resize-sobatmasbro ul li .resize-sobatmasbro-btn{display:block;text-decoration:none;padding:10px 12px;box-shadow:none;cursor:pointer}.resize-sobatmasbro ul li .resize-sobatmasbro-btn span{color:#007BFF;position:relative;font-size:5px;display:block;margin:-2px -2px 0 -2px !important;padding-top:5px}.resize-sobatmasbro ul li .resize-sobatmasbro-btn svg{width:20px;height:20px;fill:#555}.resize-sobatmasbro ul li .iconfull svg,.resize-sobatmasbro ul li .iconnormal svg{width:25px !important;height:25px !important;fill:#555;margin:-8px -8px -3px -8px}.resize-sobatmasbro ul{background:rgb(255,255,255);box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1);bottom:320px;right:24px;text-align:center;position:fixed;display:block !important;border-radius:3px}.resize-sobatmasbro ul li{background-position:center;display:block}@media screen and (max-width:768px){.resize-sobatmasbro ul li{list-style:none}.resize-sobatmasbro ul li .resize-sobatmasbro-btn{display:block;text-decoration:none;padding:7px;box-shadow:none;cursor:pointer}path{fill:#fff}.resize-sobatmasbro ul li .resize-sobatmasbro-btn span{color:#fff;position:relative;font-size:5px;display:block;margin:-2px -2px 0 -2px !important;padding-top:5px}.resize-sobatmasbro ul li .resize-sobatmasbro-btn svg{width:20px;height:20px;fill:#fff}.resize-sobatmasbro ul li .iconfull svg,.resize-sobatmasbro ul li .iconnormal svg{width:25px !important;height:25px !important;fill:#fff;margin:-8px -8px -3px -8px}.resize-sobatmasbro ul{background:rgb(3,155,229);opacity:0.9;bottom:290px;right:15px;text-align:center;position:fixed;display:block;border-radius:3px}.resize-sobatmasbro{position:relative;z-index:50;cursor:pointer}.resize-sobatmasbro ul li{background-position:center;display:block}
  4. Kemudian tambahkan juga Javascriptnya dan HTML pemanggilnya, Masukkan tepat diatas kode </body>.
    5. <script type='text/javascript'>
$(function(){
$(&#39;a&#39;).click(function(){
var ourText = $(&#39;.post-body&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;largesize&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;smallsize&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;normalsize&#39;){
finalNum =16;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

<html>
<nav class='resize-sobatmasbro'>
<ul>
<li><a class='resize-sobatmasbro-btn' id='largesize' itemprop='url' title='Perbesar'>
<svg viewbox='0 0 24 24'><path d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='#555'/></svg><span itemprop='name'>Large</span></a>
</li>
<li><a class='resize-sobatmasbro-btn' id='normalsize' itemprop='url' title='Normal'>
<svg viewbox='0 0 24 24'><path d='M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z' fill='#555'/></svg><span itemprop='name'>Normal</span></a>
</li>
<li><a class='resize-sobatmasbro-btn' id='smallsize' itemprop='url' title='Perkecil'>
<svg viewbox='0 0 24 24'><path d='M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='#555'/></svg><span itemprop='name'>Small</span></a>
</li>
</ul>
</nav>
  </html>
  5. Simpan, dan lihat hasilnya disebelah kanan layar sobat.

Gimana sob? Sudah bisa? Oke sob, sekian tutorial yang saya bagikan kali ini mengenai Cara Membuat Fitur Setting Ukuran Teks atau Resize Text.

Jangan lupa untuk dapatkan notifikasi dari setiap update blog kami, jika ada yang ditanyakan silahkan berkomentar dibawah. Semoga bermanfaat dan terima kasih.
On.
Lihat 2 komentar
Tutup 2 komentar

Catatan

1. Bebas berkomentar apapun boleh Out of Topic.
2. Sopan dan baik tidak boleh spam.
3. Dilarang promosi situs haram (Porno/Judi online).
4. Dilarang berkomentar menggunakan Link Aktif.
5. Ceklis 'Notify Me' agar dapat notifikasi balasan komentar admin.

Berkomentarlah dengan bijak, walaupun hanya berterima-kasih tapi itu sangat berharga bagi kami, Terima kasih.

bold <b></b>
kode kecil <i></i>
HTML <em></em> use Parse HTML

Emoticon
Parse HTML