Cara Membuat Tombol Zoom In Dan Out Pada Template LinkMagz

Halo sobat blogger kembali lagi dengan saya pada tutorial kali ini, saya akan membahas tentang cara membuat tombol zoom teks template layout v3 linkmagz.Template Layout V3 Widget V2 ini sangat minimalis tidak mayoritas kode semacam template biasa. Buat kalian pengguna Linkmagz niche data, bisnis serta lain- lain sangat sesuai memasang zoomtext & tombol huruf besar, wajar, serta huruf kecil yang sangat berguna buat visitor web aman

Tidak hanya konten yang menarik buat dibaca tidak terdapat salahnya buat memasang tombol ini. Jujur dalam template linkmagz aku rasa sangat bagus ibaratkan template blogger semacam wordpress banyak fiturnya sebab desain sangat di suka banyak orang.

Pengertian Tombol Zoom In Dan Out Teks

Tombol zoom in dan zoom out teks merupakan sebuah tombol yang berfungsi untuk mengecilkan dan membesarkan ukuran teks pada suatu website.Umumnya fiture ini digunakan pada website yang memang sangat membutuhkan tingkat baca yang tinggi.

Cara Memasang Tombol Zoom In Dan Out Pada Blog

1. Langkah pertama yang harus kalian lakukan tentu saja masuk ke akun blogger kalian dan berada pada dashboard blogger.

2. Salin kode script jquery dibawah ini dan pastekan kodenya tepat pada bawah kode <head>.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

3. Salin kode di bawah ini dan letakkan pada atas kode </head>.

<style> button.linkmagz-zoom{text-align:center;float:right;background:#0045a6;border-radius:50px;color:#FFFFFF;border:1px solid transparent;cursor:pointer;padding:0;width:35px;height:35px;margin:0.2em;text-decoration:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,0.28);transition:all 0.4s cubic-bezier(0.4,0,0.2,1) 0.3s} #postedit-font-btn{position:relative;display:inline-block} </style>

4. Carilah kode <b:includable id='allJavaScripts'>...</b:includable> dan pastekan kode dibawah ini tepat pada bawah kode tersebut.

<b:includable id='zoomlinkmagzbutton'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script> //<![CDATA[ var _0xee16=["\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65","\x63\x73\x73","\x65\x61\x63\x68","\x2E\x70\x6F\x73\x74\x2D\x62\x6F\x64\x79","\x6F\x72\x69\x67\x2D\x73\x69\x7A\x65","\x64\x61\x74\x61","\x63\x6C\x69\x63\x6B","\x23\x62\x74\x6E\x2D\x69\x6E\x63\x72\x65\x61\x73\x65","\x23\x62\x74\x6E\x2D\x64\x65\x63\x72\x65\x61\x73\x65","\x23\x62\x74\x6E\x2D\x6F\x72\x69\x67"];function changeFontSize(_0xf999x2){$affectedElements[_0xee16[2]](function(){var _0xf999x3=$(this);_0xf999x3[_0xee16[1]](_0xee16[0],parseInt(_0xf999x3[_0xee16[1]](_0xee16[0]))+ _0xf999x2)})}var $affectedElements=$(_0xee16[3]);$affectedElements[_0xee16[2]](function(){var _0xf999x2=$(this);_0xf999x2[_0xee16[5]](_0xee16[4],_0xf999x2[_0xee16[1]](_0xee16[0]))}),$(_0xee16[7])[_0xee16[6]](function(){changeFontSize(1)}),$(_0xee16[8])[_0xee16[6]](function(){changeFontSize(-1)}),$(_0xee16[9])[_0xee16[6]](function(){$affectedElements[_0xee16[2]](function(){var _0xf999x2=$(this);_0xf999x2[_0xee16[1]](_0xee16[0],_0xf999x2[_0xee16[5]](_0xee16[4]))})}) //]]> </script> </b:if> </b:includable>

5. Carilah kode seperti ini <b:include name='allJavaScripts'/> tepatnya di atas kode </body>, lalu salin kode dibawah ini dan pastekan diatasnya.

<b:include name='zoomlinkmagzbutton'/>

6. Langkah ke-enam cari kode berikut ini data:post.body dan letakkan kode dibawah ini tepat pada atas kode tersebut.

<b:if cond='data:blog.pageType == "item"'> <center> <span id="postedit-font-btn"> <button class='linkmagz-zoom' id='btn-increase' title='Perbesar'><svg style='width:17px;height:17px' viewBox='0 0 24 24'> <path d='M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M8,5V8H5V10H8V13H10V10H13V8H10V5H8Z' fill='currentColor'></path> </svg></button> <button class='linkmagz-zoom' id='btn-orig' title='Normal'><svg style='width:20px;height:20px' viewBox='0 0 24 24'> <path d='M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z' fill='currentColor'></path> </svg></button> <button class='linkmagz-zoom' id='btn-decrease' title='Perkecil'><svg style='width:17px;height:17px' viewBox='0 0 24 24'> <path d='M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M5,8V10H13V8H5Z' fill='currentColor'></path> </svg></button> </span> </center> </b:if>

7. Langkah terakhir simpan tema.

Penutup

Itulah artikel yang dapat saya sampaikan mengenai cara membuat tombol zoom in dan out pada template linkmagz, jangan lupa share artikel ini ke media sosial kalian jika bermanfaat, terima kasih.