Blogger Mobil Temalara Özel Sticky Reklam Eklentisi
Blog yazarlarının faydalanacağını düşündüğüm Sticky Reklam özelliği Blogger Eklentileri kategorimizde yerini alıyor.
Sticky Reklam Eklentisi Faydaları
Bu eklentinin faydalarından bahsetmek istiyorum öncelikle, adsense reklamları ile uyumludur, mobile özel olması sayesinde masaüstü ve mobil olarak iki farklı reklam kullanılabilir.
Bunların yanında kendinize ait başka bir blog için tanıtım alanı olarak kullanabilir, ya da sosyal medya kanallarınıza abone olunması için tavsiyede buluna bilirsiniz.
Ayrıca özel reklam alanı talep eden sponsorlarınız varsa onlar içinde kullanabileceğiniz gibi YouTube ve benzeri video paylaşımı yaptığınız platformlara ziyaretçi çekebilirsiniz.
Mobil Reklam Eklentisinin Kurulumu
Kurulumu çok basit olan ancak faydaları bakımından çok yaralı bu eklentimizin kurulumu için yapmanız gerekenleri anlatmaya başlıyorum.
Blogger admin panelimize giriş yapıyoruz , Tema sekmesini tıklıyoruz ve HTML düzenleyi seçiyoruz, karşımıza temamıza ait kod kümesi çıkıyor.
CTRL+F tuş kombinasyonu ile /head > kodunu aratıp buluyoruz. Daha sonra hemen üst satırına aşağıdaki kodları ekliyoruz.
/* Başarı Seo */
<b:if cond='data:blog.pageType not in {"static_page","error_page",} and not data:blog.searchQuery and data:blog.isMobileRequest == "true"'>
<style>
/*<![CDATA[*/
.sticky-ads{display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;overflow:visible;text-align:center;bottom:-104px;left:0;width:100%;z-index:9999;max-height:104px;background-image:none;background-color:#fff;margin-bottom:0;padding-top:4px;box-shadow:0 0 5px 0 rgba(0,0,0,0.2);transition:all .4s ease-in-out}
.sticky-ads-close{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg==");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,0.2);border:none;border-radius:12px 0 0 0;cursor:pointer}
.sticky-ads-close:before{position:absolute;content:"";top:-20px;right:0;bottom:0;left:-20px}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
:active,:focus{outline:0}
/*]]>*/
</style>
</b:if>
Şimdi diğer adıma geçelim ancak bulunduğumuz sayfayı değiştirmeden tekrar CTRL+F tuşlarından faydalanarak /body > etiketini aratalım ve bulduktan sonra alt satırdaki kodu hemen üst satıra ekleyelim.
<b:if cond='data:blog.pageType not in {"static_page","error_page",} and not data:blog.searchQuery and data:blog.isMobileRequest == "true"'>
<div class='sticky-ads' id='sticky-ads'>
<!-- Reklam kodu alanı -->
<button aria-label='Kapat' class='sticky-ads-close' onclick='document.getElementById('sticky-ads').style.display='none';'/>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
var target = document.getElementById('sticky-ads');
if(window.pageYOffset >300){
target.style.bottom = "0";
}
},false);
//]]>
</script>
</b:if>
Yaptığımız işlemlerin doğruluğundan eminseniz kaydetme işlemini gerçekleştire bilirsiniz.
Sticky Reklam Eklentisi Düzenlemesi
Vermiş olduğum Sticky Reklam Blogger Eklentisi kodlarının içerisinde düzenlemeniz (isteğe bağlı) gereken tek yer kırmızı ile işaretlenmiş “300” olarak gösterilen bölümdür. Bu alan reklamlarınızın yüksekliğini belirler düşürmek ve ya arttırmak sizin tercihinize kalmıştır.
Reklam kodlarınızı ise yine kırmızı renk ile belirttiğmi Reklam Kodu Alanı yazan kısma yerleştirmeniz yeterli.
Eklenti Hakkında Uyarılar
Bu işlem sadece mobil görünümde gerçekleşir.
Eklentiği kurmadan önce sitenizin yedeğini almayı unutmayın. Eğer bilmiyorsanız Blogger Site Yedeği Alma yazımı inceleyebilirsiniz.
Bu yazımızda Blogger Mobile Sticky Reklam Eklentisi Kurlumunu anlattım umarım faydasını görürsünüz. Konuyla ilgili merak ettiğiniz her şeyi yorum bölümünden sorabilirsiniz. Beğendiyseniz sosyal medya hesaplarınızla paylaşmanızı rica ederim.