Blogger Online WhatSapp ve SMS Butonu

Blogger Online WhatSapp ve SMS Butonu - Bu yazımızda online satış yapan blog ziyaretçileri, blog yöneticisi veya online mağaza satıcısı ile doğrudan iletişim geçerek mal satın alabilmek için WhatSapp ve SMS butonları ile ilgili ipuçları paylaşacağım. Blogcular daha fazla satış yapabilmek için online mağaza müşterileri ile sürekli etkileşim içerisinde olmak ister. Tabiki bu da müşteriler için bir güven oluşturmaktadır.

Bu paylaştığımız butonlar sayesinde yönetici veya satıcı iletişim numarasına ihtiyaç duymadan, tüketiciler butonlar sayesinde sipariş girişi için doğrudan iletişim kurabilecek.

Blog Online WhatSapp ve SMS Butonu Ekleme

Blog sitenize butonları eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın ve aşağıdaki adımları uygulayın.

1- Aşağıdaki CSS kodlarını eklemek için CTRL+F yardımıyla </head> kodunu bulun ve CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.mobile-btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}.mobile-btn:active:focus,.mobile-btn:focus{outline:0}.mobile-btn:focus,.mobile-btn:hover{color:#333;text-decoration:none;outline:0}.mobile-btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.mobile-btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.mobile-btn-purple{background:#558B2F;border-bottom:2px solid #33691E;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}.mobile-btn-purple:active,.mobile-btn-purple:focus,.mobile-btn-purple:hover{background:#689F38;color:#fff}#mobile_shop{margin-top:30px;background:#fff3e0;padding:15px 15px 5px;border-radius:3px!important;}#mobileshop:target{display:block;margin-top:-80px;height:80px;visibility:hidden}#mobile_shop h4{font-size:16px;font-weight:600;color:#444;margin:0;line-height:1}#mobile_shop p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}#mobile_shop a{margin-bottom:10px;margin-right:10px}
.mobile-btn i{font-size:24px;vertical-align:text-bottom;}
/*]]>*/
</style>
</b:if>

CSS kodlarını ekledikten sonra şablonu kaydedin.

2- Aşağıdaki HTML blog yayınlarınızda kullanabilirsiniz. Blog yayınlarınızda kullanmak için, yayın oluşturma HTML sayfasına aşağıdaki kodları ekleyin.

<div id='mobile_shop'>
<span id='mobileshop'/>
<h4>Başlık</h4>
<p>Açıklama</p>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.url' target='_blank'><i class="fa fa-whatsapp"></i> Whatsapp</a>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' href='https://api.whatsapp.com/send?phone=+90530XXXXXXX' target='_blank'><i class="fa fa-mobile"></i> SMS</a>
</div>

Yukarıdaki HTML kod içerisinde belirtilen yere telefon numaranızı ekleyin.

Ön İzleme

Bu yazımızda blogcular için, tüketicilerin online iletişim sağlayabileceği WhatSapp ve SMS butonları hakkında bilgiler paylaştık. Yayın ile ilgili soru ve görüşleriniz için yorum bırakabilirsiniz.