Cara Membuat Fitur Atur Ukuran Teks atau Resize Text Setting
Snippet Tips Blogger
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
- Sobat buka dashboard blogger.com.
- Pilih menu Tema > Edit HTML.
- Copy dan Paste kode CSS berikut tepat diatas kode </style> atau ]]></b:skin>.
- Kemudian tambahkan juga Javascriptnya dan HTML pemanggilnya, Masukkan tepat diatas kode </body>.
- Simpan, dan lihat hasilnya disebelah kanan layar sobat.
.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}<script type='text/javascript'>
$(function(){
$('a').click(function(){
var ourText = $('.post-body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'largesize') {
finalNum *= 1.1;
}
else if (this.id == 'smallsize'){
finalNum /=1.1;
}
else if (this.id == 'normalsize'){
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>Jangan lupa untuk dapatkan notifikasi dari setiap update blog kami, jika ada yang ditanyakan silahkan berkomentar dibawah. Semoga bermanfaat dan terima kasih.
