Blogger / Blogspot Adsense Reklamları Zoom Eklentisi

Google Adsense için Google Destek sayfalarında bulunan zoom (yaklaştırma) eklentisi ile blogunuzda bulunan Adsense reklamlarında bulunan resimleri zoom etkisiyle kullanabileceğiniz harika bir blog ipucu keşfedildi.

Google Destek sayfalarında karşılaştığımız resim (animasyonlu gif) aşağıdaki resimde olduğu gibi bir zoom (yakınlaştırma) etkisi var.

Eğer blogunuzda zoom görüntüsünü denemek istiyorsanız, lütfen aşağıdaki adımları uygulayın. 1. Aşağıdaki CSS kodlarını eklemek için blogunuzun kumanda panelinden Şablon > HTML'i Düzenle > CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.separator img {width: 100%;height: auto;}
.new {width: 100%!important;}
.separator {width: 50%;position: relative;transition: all 100ms ease-in-out;cursor: pointer;}
.separator:before {content: "\f00e";font-family: FontAwesome;position: absolute;bottom: 5px;right: 0;font-size: 2em;background: rgba(255, 255, 255, .7);padding: 10px;color: #555;}
.separator.new:before {content: "\f010";font-family: FontAwesome;position: absolute;bottom: 5px;right: 0;font-size: 2em;background: rgba(255, 255, 255, .7);padding: 10px;color: #555;}
/*]]>*/
</style>
</b:if>

Daha küçük bir küçük resim istiyorsanız aşağıdakilere css genişliğini (width) en aza indirmelisiniz:

.separator {cursor: pointer;position: relative;width: 50%;transition: all 100ms ease-in-out;}

2. Aşağıdaki javascript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin lütfen.

<script src='https://googledrive.com/host/0BwDz8flINeefaDJFUnVTY21jTWs' tipi='text/javascript'></script>