Contoh 1 Ikon
<a href="https://wa.me/62885377639367">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_eeW8LsEOK2lqNAAjdeVhC_fXSc0SpfR9hCwraZnlMQ3E-Ai97d7ti9mSeuVHcUK4jrGNbytV3VJAVN4mHmnKvHIq3ZwUjNeyqhRiZO8UlHIgEWqoqcWdRSRTd3d3loVNMJ4zT3-xAVym9JbG2WpuUrJ4eCI0Ifyq121QdH07ApsF3aL93kL_ACkn0Uw/s320/images%20%286%29.png"
style="position: fixed; bottom: 20px; left: 20px; width: 150px; z-index: 1000; cursor: pointer;"
alt="Hubungi via WhatsApp" /></a>
<a href="https://wa.me/62885377639367">
<img src="https://www.tabloidpeluangusaha.com/wp-content/uploads/2020/02/chat-via-whatsapp.png"
style="position: fixed; bottom: 20px; left: 20px; width: 150px; z-index: 1000; cursor: pointer;"
alt="Hubungi via WhatsApp" /></a>
Contoh 2 Icon
<div style="bottom: 20px; position: fixed; left: 20px; z-index: 9999;">
<!--Ikon WhatsApp-->
<div style="margin-bottom: 5px;"><br /></div><div style="margin-bottom: 5px;">
<a href="https://wa.me/6285377639367" target="_blank" title="Chat di WhatsApp">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCZDEONXYsq581PbnD22mfoGIvxzKTHM6O9_5vNNuhnWuJ1E35Ru0PMhqBP5-gcAQEXnv9K_ynhqVA6B-zN031aH61-5Saj5Ke4AsMYlF95solWexCqSEj13u4R5epBxYjjQ82yJ5kKWCRGfgQ97xYSsYP3r7D-Nu9cW4R5gJq9BXCuN-hkz_P2NR6nY/s320/p2.jpg" style="border-radius: 50%; border: 4px solid white; padding: 0px;" width="50px" /></a>
</div>
<!--Ikon Telepon-->
<div>
<a href="tel:+6285377639367" title="Panggil Sekarang">
<img height="50px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRE626XS8A_JVhyphenhyphenKp4x8wLmnrbyhOw6L0rXm1ZhTUDYIQgvZ8SCEYFAL7PJbP9A_iCGCNC6ZmLi7I8C4FXSU5JGiiDEW0E6hXFn7pUgrKR0wHZKLeeMZM0b8mPDq8NqQu-0OydWdNII7Bmd0WmbaR4IvBdB176xxjXQUSD0NzQ6cmJmdUyGUhHy1vpUM/s320/p1.jpg" style="border-radius: 50%; border: 4px solid white; padding: 0px;" width="50px" /></a>
</div>
Note:
<div style="bottom: 20px; position: fixed; left: 20px; z-index: 9999;">
adalah bagian dari elemen <div> yang digunakan untuk menempelkan sebuah elemen di layar, tepatnya di pojok kiri bawah (20px dari kiri dan bawah), dan selalu terlihat walau halaman di-scroll. Penjelasan rinci tiap properti:
- position: fixed; → Membuat posisi elemen tetap di layar meskipun halaman di-scroll.
- bottom: 20px; → Jarak elemen dari tepi bawah layar adalah 20 piksel.
- left: 20px; → Jarak elemen dari tepi kiri layar adalah 20 piksel.
- z-index: 9999; → Menempatkan elemen di atas elemen lain. Angka besar ini mencegah elemen tertutup
Note:
Penambahan line-height: 0; di pembungkus membuat isi cantainer semakin presisi
🔲
Kontainer Ikon anti Scroll
<div align="left">
<div style="background: none; border-radius: 5px; border: 0px
solid gray; bottom: 20px; line-height: 0; display: flex; gap: 7px; height: auto;
left: 20px; padding: 2px; position: fixed; width: 290px; z-index:
1000;">
<a href="tel:+6285377639367">
<img src="https://blogger.googleusercontent.com/img/a/
AVvXsEhvdln8lCl7Agm6LKLvBPMYmOK71-VLAGAPyQXOFNDp4GqZa7FtAiUhl6sU9uKvt56bObhssJU4vJCYxiTGmG8vg7QGRvocnDxw1Mil4of7Wlhf9AAIPVHPkCY4miHE-ZJblvhgxhW3HgGp1-XiYYLWpR9HMaYBSZdyCN84csbD_Xh812EEww7cGx2HAr8K=w58-h59"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://maps.app.goo.gl/i5crYwqSXw2vqACX9">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEjUzTUJ2k0OxjZwO1-MXXyHW3Eq6Ugbbhoi1zHaRCIS1GARZsu_-604VKslOkQzxLz6W-90smlznrXWsp70yxZuGLh3sEHseBGqhHImaj7Qe6a5ipnBj-5MMXWXOzbhIfzxZaezz3W2zA01A36WZVci-f8_XX07v4pbWRjU4_QLJukMYjHrMJuzQhlhWyiT=w61-h61"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://wa.me/6285377639367">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEh26E-bjJCzUJS_Tl78wvOLFV4hS0UfzS6KSI1bCLfsq2Wa-cdKgeYqLu449y2eKF_Tgw2zQ7jkIU0raf2BeKB_LZvf4gijU4BiDQkMP68_kWbXztEKA7p1Hh2NEkRPfLzoYlGpxp9CbhiBDh6L6QnBaQJLqGhkBxI0HK-khZvWe5qBPSN_1luq4Wn_U9bG"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.facebook.com/musafir.teknik">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEi8k7o
DOqmK5vv6YUJ51VROBXRVE4Oz_V661Y7Wgfl7Q0-js8w4VmqDIg7wwY1-SNwfr-y8JvI9QQJt2wzJt5wSjLodEsVF84Qq1nCfVALwsdwF5A-TsXU6NxcuAkUhyuvmkNnF_e6Pn0x1P9oicMfr9eMRWzVKJBhOGKiC8CznF3i0Pt6oAGyVnC6XZvg"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
<a
href="https://www.tiktok.com/@serviselektronikjambi">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEh4
pQw5r8YgECtV6IKx7QPxEeYhA_1ZMqy3ZJDvW9dOHu0LQC-QWwpaqvNK9chHTmJV6F52bPwrFXxeSHbbNnqdqxGubn-ChqzmiZY9qLA98s2UXQIYcw8v9U_TR4S5X_bO9Z5sNJl6DgwLLBqlNTE1b5TMDofF0Mp2rUU3UYaNSWjuvfBAmxFd2rDdzx0"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
<a
href="https://www.instagram.com/serviselektronikjambi/">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEi-HZ4iJtgashj4FbZWsPt-jGVaigvFQlUuiolk6GzI-aUzYWJB-GwvqAtu5GGLFkeGyT8AamEYrv7rXbI7uASMUx4K5gU5CfOXK-6G4kvdPWmjpvF5AeB4NBeB5_1JgubeKj5Y51gmGb4C3IOpw6o2fW3GbUKgRoAIhWb9RUSK8V3ze__EzpSD_NtsIIg"
style="border-radius: 10px; border: 1px solid white; height: 40px;
margin: 0px; padding: 0px;" width="40px" /></a>
</div>
</div>
🔲
Kontainer Ikon anti Scroll
<div style="background: gray; border-radius: 10px; border: 2px solid gray; bottom: 20px; line-height: 0; display: flex; gap: 7px; height: auto; left: 20px; padding: 2px; position: fixed; width: 288px; z-index: 1000;">
<a href="https://mekanikeletronik.blogspot.com/2025/03/teknisi-elektronik-di-jambi.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JOvRSqUf4lXn1PPj9RolXICjYc4y6Hl21t_adEtE4ZIbMp1un5xiT7qrgv6JgS9StLHMdtNbQp7C3RQoSSClrgARW5v_D97fmbLqsSlCigkhDHch1GEexpenY2KpYYjcZptUiifgTok7qgWOhTBObgRmNDAlvhZMrjRmqEmfhvbHa20yZzUPrjM2UJU/s320/ik.jpg" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://maps.app.goo.gl/i5crYwqSXw2vqACX9">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEjUzTUJ2k0OxjZwO1-MXXyHW3Eq6Ugbbhoi1zHaRCIS1GARZsu_-604VKslOkQzxLz6W-90smlznrXWsp70yxZuGLh3sEHseBGqhHImaj7Qe6a5ipnBj-5MMXWXOzbhIfzxZaezz3W2zA01A36WZVci-f8_XX07v4pbWRjU4_QLJukMYjHrMJuzQhlhWyiT=w61-h61" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://musafirjmi.blogspot.com/2018/08/islam-itu-indah-dan-damai.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGl8imPW7cmEsPQQu87mKGbQcDkL3GZ4nVwyGyJn9GOj3BXTXtfYFEnSbcGJIMLfATF_yEaPP_YXVkGm-yDfSxL_gIa5YZn56uJswM0WQMKI7DdHr6gkaJQ4n2vd9cocm9bkBzhkYmLZy2Psx94LPCRD9eZekGiogK02Umonm-tOOmWaKozf-q7_y-dy8/s320/agm.jpg" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.facebook.com/musafir.teknik">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi8k7o
DOqmK5vv6YUJ51VROBXRVE4Oz_V661Y7Wgfl7Q0-js8w4VmqDIg7wwY1-SNwfr-y8JvI9QQJt2wzJt5wSjLodEsVF84Qq1nCfVALwsdwF5A-TsXU6NxcuAkUhyuvmkNnF_e6Pn0x1P9oicMfr9eMRWzVKJBhOGKiC8CznF3i0Pt6oAGyVnC6XZvg" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.tiktok.com/@serviselektronikjambi">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEh4
pQw5r8YgECtV6IKx7QPxEeYhA_1ZMqy3ZJDvW9dOHu0LQC-QWwpaqvNK9chHTmJV6F52bPwrFXxeSHbbNnqdqxGubn-ChqzmiZY9qLA98s2UXQIYcw8v9U_TR4S5X_bO9Z5sNJl6DgwLLBqlNTE1b5TMDofF0Mp2rUU3UYaNSWjuvfBAmxFd2rDdzx0" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.instagram.com/serviselektronikjambi/">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi-HZ4iJtgashj4FbZWsPt-jGVaigvFQlUuiolk6GzI-aUzYWJB-GwvqAtu5GGLFkeGyT8AamEYrv7rXbI7uASMUx4K5gU5CfOXK-6G4kvdPWmjpvF5AeB4NBeB5_1JgubeKj5Y51gmGb4C3IOpw6o2fW3GbUKgRoAIhWb9RUSK8V3ze__EzpSD_NtsIIg" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
</div>
.png)
.png){kind=small}
