Değerli okuyucular,
Bu yazımda hazırlamış olduğum whatsApp, Telefon ve Mail yoluyla iletişime geçilmesine olanak sağlayan yardımcı bir html kodu sunuyorum.
Sadece mobil de gözüken kodların ekran çıktısı aşağıda ki gibidir.
Sırayla nasıl yapılacağını anlatayım.
- Html kodlarımızı önce yazalım.
<div class=”iletisimbanner”>
<a href=”https://api.whatsapp.com/send?phone=905535340328&text=Merhaba,Size Yardımcı Olmak İsteriz.”>
<img src=”https://www.bugrasezer.com/dosyalar/whatsapp_logo.png” class=”whas”/>
</a>
<a href=”Tel:0553 534 03 28″>
<img src=”https://www.bugrasezer.com/dosyalar/tiklaara.png”class=”tiklaara”/>
</a>
<a href=”Mailto:mehmet@bugrasezer.com”>
<img src=”https://www.bugrasezer.com/dosyalar/email.png”class=”emal”/>
</a>
</div>
Html kodlarımız hazır. Şimdi gelelim CSS kodlarımıza.
- CSS Kodları aşağıda ki şekilde olacaktır.
.iletisimbanner{display:none;}
@media only screen and (max-width: 767px)
{
.iletisimbanner
{
display: block;
height: 40px;
background-color: #fff;
position: fixed;
width: 100%;
bottom: 0;
z-index: 9999999999;
padding: 2px;
}
}
.tiklaara
{
width: 32%;
float: left;
margin-right: 1%;
}
.emal
{
width: 32%;
float: left;
}
.whas
{
width: 32%;
float: left;
margin-right: 1%;
margin-left: 1%;
}
Herşey bu kadar. Umarım işinize yarar.
Sorularınız veya yorumlarınız için aşağıda ki yorum alanlarını kullanabilirsiniz.
Teşekkürler.
Saygılarımla,
Mehmet Buğra Sezer