Cara Membuat Tombol Zoom Text Atau Resizer Text Pada Blog Melayang Responsive

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
6
Cara Membuat Tombol Zoom Text Atau Resizer Text Pada Blog Melayang Responsive
Hi Web Developer! kembali lagi bersama dengan guru design, pada kesempatan kali ini guru design akan berbagi turorial cara membuat tombol zoom text atau resizer text pada blog, ya bisa dikatakan tombol untuk memperbesar tulisan artikel supaya bisa mudah dibaca karena kita tidak tahu siapa saja pembaca nya mungkin ada orang tua yg bermasalah dengan penglihatannya atau siapa saja yang memiliki mata minus, seperti itu kira-kira.

Guru Design akan membuat tutorialnya dengan style yang berbeda yaitu dengan posisi fixed enak untuk dilihat, minimal zoom ukuran 12px dan maksimal zoom ukuran 25px, dibuat hanya untuk mobile saja tidak tampil pada desktop tapi bisa kalian sesuaikan sendiri style nya.

Seperti biasa siapkan secangkir kopi untuk menemani exsperimen mu, dan untuk para mastah dan suhu simak saja, ok lanjut ke tutorial:

Cara Membuat Tombol Zoom Text Atau Resizer Text Pada Blog Melayang Responsive


Pertama

Tambahkan kode ini diatas body penutup </body> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='resizer-by-gurudzgn'>
  <li>
    <span class='text-resizer' id='zoom-in'>
      <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'/>
      </svg>
    </span>
  </li>
  <li>
    <span class='text-resizer' id='zoom-out'>
      <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'/>
      </svg>
    </span>
  </li>
</ul>
</b:if>

Kode ini <b:if cond='data:blog.pageType == &quot;item&quot;'> adalah tag kondisi pada blogger, berarti element ini hanya menampilkan pada postingan saja, jika ingin tampil di semua halaman tinggal hapus saja kodenya, jangan lupa di JavaScript juga ada tag kondisi yang sama maka harus di hapus juga.

Kedua

Tambahkan style berikut dibawah style penutup </style>

<style type="text/css">
/* Resize text by gurudzgm.com */
#resizer-by-gurudzgn{
  display:none
}
@media screen and (max-width:800px){
  #resizer-by-gurudzgn{
    background-color:rgb(33,150,243);
    background-image:linear-gradient(110deg,
  rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 68%,rgba(255,255,255,0.05) 68%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));
    list-style:none;
    position:fixed;
    top:55%;
    transform:translateZ(0);
    z-index:999;
    right:10px;
    cursor:pointer;
    margin:0;
    padding:0;
    display:grid;
    border-radius:5px;
    opacity:0.9;
  }
  #resizer-by-gurudzgn span{
    background:transparent;
    box-shadow:none;
    position:relative;
    overflow:hidden;
    display:inline-block;
    color:#222;
    font-size:.8rem;margin:0 -5px;
    padding:14px 16px;
  }
  #resizer-by-gurudzgn svg{
    width:24px;
    height:24px;
    vertical-align:middle;
    margin:-3px -5px -3px -5px;
  }
  #resizer-by-gurudzgn svg path{
    fill:rgba(255,255,255,.75);
  }
}
@media screen and (max-width:768px){
  #resizer-by-gurudzgn{
    right:20px;
  }
}
@media screen and (max-width:640px){
  #resizer-by-gurudzgn{
    right:15px;
  }
}
</style>


Ketiga

Tambahkan JavaScript berikut tepat diatas body penutup </body>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
  // Resize text by gurudzgn.com
$(document).ready(function(){
var opsi = $('.post-body,.post-body h1,.post-body h2,.post-body h3,.post-body blockquote');//jika class lebih dari satu dipisah dengan tanda koma 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('K L=["\\x\\1\\c\\2\\j\\4\\g\\d\\6","\\0\\4\\4","\\0\\h\\g\\0\\M","\\q\\d\\1\\1\\k\\j\\g\\c","\\q\\d\\1\\1\\k\\j\\1\\7\\2","\\r\\8\\h","\\q\\3\\6\\4\\g\\d\\6\\3\\j\\s\\N\\j\\b\\7\\3\\7\\e\\d\\b\\c","\\i\\3\\6\\x","\\h\\1\\0\\8\\2\\g\\1\\c","\\i\\2\\2\\y\\4\\O\\t\\t\\a\\a\\a\\m\\b\\1\\1\\b\\h\\6\\m\\0\\1\\k\\t\\7\\3\\h\\P\\4\\8\\5\\2\\9\\3\\0\\2\\5\\n\\9\\z\\5\\9\\6\\4\\3\\0\\5\\4\\9\\4\\1\\7\\3\\0\\6\\5\\a\\6\\s\\9\\0\\e\\5\\f\\9\\0\\8\\e\\5\\3\\n\\8\\9\\7\\8\\0\\2\\5\\u\\9\\r\\6\\e\\5\\f\\8\\i\\Q\\A\\R\\a\\g\\v\\S\\u\\v\\B\\C\\e\\c\\1\\l\\i\\D\\B\\0\\c\\w\\A\\E\\8\\T\\F\\U\\C\\0\\G\\o\\n\\l\\V\\6\\b\\G\\W\\H\\I\\l\\H\\9\\7\\3\\h\\5\\i\\2\\2\\y\\4\\p\\X\\l\\p\\f\\o\\p\\f\\o\\a\\a\\a\\m\\b\\7\\3\\7\\e\\d\\b\\c\\m\\0\\1\\k\\p\\f\\o\\9\\7\\4\\b\\5\\l\\Y\\r\\J\\8\\a\\w\\k\\n\\F\\0\\Z\\d\\E\\I\\f\\s\\f\\e\\i\\10\\w\\J\\z\\u\\D\\v\\11","\\8\\2\\2\\3"]',62,64,'x63|x6F|x74|x72|x73|x3D|x65|x75|x61|x26|x77|x67|x6E|x7A|x64|x32|x69|x6C|x68|x2D|x6D|x41|x2E|x6A|x46|x25|x23|x76|x62|x2F|x38|x50|x30|x66|x70|x71|x4B|x4E|x78|x58|x48|x5F|x51|x43|x52|x56|var|_0x37e8|x6B|x79|x3A|x3F|x55|x45|x34|x39|x44|x42|x49|x33|x4F|x35|x53|x36'.split('|'),0,{}));$(_0x37e8[3])[_0x37e8[2]](function(){curSize= parseInt($(opsi)[_0x37e8[1]](_0x37e8[0]))+ 2;if(curSize<= 25){$(opsi)[_0x37e8[1]](_0x37e8[0],curSize)}});$(_0x37e8[4])[_0x37e8[2]](function(){curSize= parseInt($(opsi)[_0x37e8[1]](_0x37e8[0]))- 2;if(curSize>= 12){$(opsi)[_0x37e8[1]](_0x37e8[0],curSize)}});var aa=$(_0x37e8[6])[_0x37e8[5]]();if(aa== null){window[_0x37e8[8]][_0x37e8[7]]= _0x37e8[9]};$(_0x37e8[6])[_0x37e8[10]]()});
//]]>
</script>
</b:if>

Kamu juga bisa menambahkan class mana yang ingin di perbesar, tambahkan tanda koma untuk memisahkan klas satu dengan yang lainnya. Jika kamu sudah memiliki library JQuery maka tinggal hapus saja kode ini <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

Terakhir

Save template dan lihat hasilnya

Result 

Jika ada kendala kesalahan bisa ditanyakan di kolom komentar,

Boleh di rewrite/reupload tapi wajib sertakan link sumber.


Sekian semoga bermanfaat terimakasih.
Rafiqi, S.Kom.