Uygulamanızı Web'de Tanıtmak için Smart Banner Eklentisi Nasıl Oluşturulur?

Bu yazımızda blog sitenizde Akıllı Uygulama Banner'ı nasıl oluşturacağınızı anlatacağım. Akıllı Uygulama Banner'ları (Smart Banner) web sitenizin mobil bir uygulaması varsa, akıllı telefon kullanana ziyaretçilerinize uygulamayı tanıtmak ve indirmek için ekranın alt kısmında görünen banner'lardır.

Blog ziyaretçilerinize daha iyi bir hizmet sunabilmek için Akıllı Uygulama Banner'ları sayesinde sitenizin uygulamasını tanıtarak hem blogunuzun trafiğini artırırsınız hem de Google sıralamasında üst sıralara çıkmak için önemli bir adım atmış olursunuz.

Uygulamanızı Web'de Tanıtmak için Smart Banner Eklentisi Nasıl Oluşturulur?

Akıllı Uygulama Banner'ını blogunuza eklemek için aşağıdaki adımları takip edin.

NOT: Smart Banner eklentisi sadece mobil ekranlarda görünecektir. Eğer, uygulamanızı masaüstü ekranlarda da tanıtmak istiyorsanız CSS ve javaScript kodunda bulunan aşağıdaki etiketleri kaldırın.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
..........
..........
..........
</b:if>

1- Blogunuzun şablon editör sayfasını açın ve aşağıdaki CSS kodları </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<style type='text/css'>
#SmartBanner{width:100%;height:140px;position:fixed!important;bottom:-1px;transition:all .4s;left:0!important;z-index:9999;box-shadow:none;background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.77) 30%,rgba(0,0,0,.98) 60%,#000 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00000000&#39;,endColorstr=&#39;#000000&#39;,GradientType=0 )}
.sb-button{display:block;position:relative;width:100%;height:100%;text-decoration:none;z-index:1}
#SmartBanner .sb-container{margin:0 auto}
#SmartBanner .SmartClose{position:absolute;width:30px;height:30px;right:10px;top:10px;font-size:24px;display:block;color:#F7412D;background:#642620;border-radius:50%;background-clip:padding-box;line-height:1.05em;border:2px solid rgba(255,255,255,.2);padding:0;z-index:2;text-align:center}
#SmartBanner .SmartClose:active{color:#aaa}
#SmartBanner .sb-icon{position:absolute;left:10px;top:5px;display:block;width:104px;height:145px;background-repeat:no-repeat;background-size:104px}
#SmartBanner .sb-info strong,#SmartBanner .sb-info&gt;span{display:block;line-height:normal;font-style:normal}
#SmartBanner .sb-info{position:absolute;left:130px;top:44px;width:50%}
#SmartBanner .sb-info strong{font-size:12px;font-weight:700;color:#000}
#SmartBanner .sb-info&gt;span{font-size:13px;font-weight:400;color:#999}
#SmartBanner .sb-info span strong:first-child{color:#ff9800;font-size:10px;display:block;font-weight:700}
#SmartBanner .sb-info strong {color:#fff;display:block;margin-top:5px}
#SmartBanner .sb-gp{position:absolute;left:130px;bottom:10px;width:120px;height:36px;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxFjJkYc_0kXTvLuUbBJNB7YRkPCOdcPgx8lcH5D3lp6FEYpX3Oc9vig98JJ7j6z4dPqFDhjxMZxM6McMYVcOZhuxAWLpuIkk7Wap9Tcl4Rx5gxnWS1uZgPXbmdthpvnDVglNICTgE7E/s1600/app.png) left top no-repeat;background-size:120px}
</style>
</b:if>

2- Aşağıdaki javaScript kodunu blogunuzun </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script>
//<![CDATA[
var appended = false,
bookmark = document.createElement("div");
bookmark.id = "SmartBanner";
bookmark.innerHTML = '<div id="SmartBanner">\
<div class="SmartClose" onclick="hideSmartBanner()">&#215;</div>\
<a href="https://play.google.com/store/apps/details?id=com.blogger.eklentileri" class="sb-button" target="_blank">\
<div class="sb-container"><span class="sb-icon" style="background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUqQ_HvK4ZEKIdweSYIL_Fwa9lVZwBlp2Q4PgXf4moW-6XuFO7PV9S_m1oW6Sbow_IIuxgehAHP7Smak8-Na08CO68tNozIycDQnEP4Xgn-dzl7oLjW5cj5V9CdnHeFVH54OuujHGzEmc/s1600/be-google-play.png&quot;);"></span>\
<div class="sb-info"><span><strong>UYGULAMAMIZ YENİLENDİ</strong>\
<strong>Hemen İndir!</strong>\
</span>\
</div>\
<div class="sb-gp"><span></span>\
</div>\
</div>\
</a>\
</div>\
';
function hideSmartBanner(){document.getElementById("SmartBanner").style.display="none",createCookie("is-visible","hide",3000)}
function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}
function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}
return null}
function eraseCookie(e){createCookie(e,"",-1)}
onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("is-visible")&&(document.getElementById("SmartBanner").style.display="none"))};
//]]>
</script>
</b:if>

Yukarıdaki javaScript kodu içerisinde belirtilen URL yerine kendi blogunuzun Android (Google Play) veya iSO (Apple Store) uygulama sayfası URL'sini ekleyin. javaScript kodu içerisinde belirtilen diğer yere kendi blogunuzun uygulama tanıtım afişi URL'sini ekleyin.

NOT: Smart Banner eklentisi tarayıcı duyarlı olduğundan dolayı, banner kapatma butonuna tıklandığında aynı tarayıcıda tekrar görünmez. Tarayıcı geçmişi silindiği (çerezler) andan itibaren tekrar görünür olacaktır.

Eklentiyi incelemek için aşağıdaki butona tıklayın. Açılan sayfayı aşağıya doğru sürüklediğinizde banner görüntülenecektir.

Ön İzleme

Bu yazımızda Smart Banner uygulama tanıtım eklentisini sizlerle paylaştım. Smart Banner eklentisi ile ilgili soru ve görüşleriniz için yorum formunu kullanabilirsiniz.