CSS, WORDPRESS

Tạo nút Zalo, Facebook và Hotline cho WordPress

Posted on by administrator
13
Sep

WordPress thì khỏi phải nói về Plugin mạng xã hội rồi tuy nhiên thì ở một khía cạnh nào đó thì mình vẫn thích dùng css hơn.

Tạo nút mạng xã hội zalo/facebook

HTML

<div class="zalo">
    <a target="_blank" href="https://zalo.me/0962362368">
    <img src="<?php echo get_template_directory_uri(); ?>/images/icon-zalo2.png" width="60">
    </a>
</div>
<div class="facebook">
    <a target="_blank" href="https://fb.com">
    <img src="<?php echo get_template_directory_uri(); ?>/images/fb_icon.png" width="60">
    </a>
</div>

CSS

.zalo{position: fixed; right: 0px; bottom: 80px;}
.facebook{position: fixed; right: 0px; bottom: 20px;}

Tạo nút gọi điện thoại

HTML

<div class="fixhotline">
    <a href="tel:0962362368">
        <i class="fa fa-phone" aria-hidden="true"></i> 
        <span style="font-size:15px">Hotline:</span><b>0962.362.368</b><br> 
    </a>
</div>

CSS

.fixhotline {position: fixed;bottom: 10%;left: 10px;margin: -5px auto;background: #2DC100;padding: 3px 10px;border: 1px solid #fff;border-radius: 15px;text-align: center;z-index: 999999;}
.fixhotline span,.fixhotline b, .fixhotline i {color: #fff;}
.fixhotline img{margin-left: 18px;}
.fixhotline i{background: #fff;border-radius: 50%;padding: 8px 10px;color: #000;font-size: 18px;margin: 5px;}
.fixhotline:hover{background: #1F8EEF;}

administrator