Widget Tombol Melayang Text Resizer
|
| Tombol Melayang Text Resizer di Blogger |
Tombol Text Resizer
Tombol Text Resizer adalah tombol untuk memperbesar dan memperkecil huruf font di halaman postingan blogger.
Tutorial
Bagaimana membuat tombol Text Resizer ? Cara membuat tombol Text Resizer melayang di halaman postingan Blogger, ikuti langkah-langkahnya sebagai berikut.
Kode Script Tombol Text Resizer
- Pertama masuk ke Dashboard Blogger.
- Pilih Tema.
- Pilih Edit HTML.
- Langkah #1 - Cari kode script </head> , kemudian letakkan di atas atau sebelum </head>
- Langkah #2 - Terakhir salin script di bawah ini, dan letakkan di atas kode atau sebelum </body>
- Kemudian Simpan
<style>
/* Text Resizer */
.Tresizerts{position:fixed;right:25px;bottom:150px;background:#ffffff;box-shadow:0 0 5px #000000;border-radius:5px;box-sizing:border-box;z-index:1;transition:all .3s linear}
.darkMode .Tresizerts{background:#121212;color:#ffffff;box-shadow:0 0 5px #ffffff}
#Ifont,#Dfont{font-size:18px;padding:10px;box-sizing:border-box;background:#ffffff;color:#000000}
.darkMode #Ifont,.darkMode #Dfont{background:#121212;color:#ffffff;border-color:#ffffff}
#Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000000}
#Dfont{border-top:.5px solid #000000} #Dfont{border-radius:0 0 5px 5px}
#Ifont:hover,#Dfont:hover{background:linear-gradient(to right,#f81894,#0000ff);color:#ffffff}
</style>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<b:if cond='data:view.isPost'>
<div class='Tresizerts'>
<div id='Ifont'>A+</div>
<div id='Dfont'>A-</div>
</div>
</b:if>
<script>/*<![CDATA[*/
$("").ready(function(){$("#Ifont").click(function(){curSize=parseInt($(".postBody").css("font-size"))+1,curSize<=20&&$(".postBody").css("font-size",curSize)}),$("#Dfont").click(function(){curSize=parseInt($(".postBody").css("font-size"))-1,curSize>=10&&$(".postBody").css("font-size",curSize)})});
/*]]>*/</script>
Demikian cara membuat tombol Text Resizer melayang di halaman postingan Blogger, semoga bermanfaat.