Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme

6/12/2016
Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme

Bu sefer Blogger Eklentileri eğiticisi Google Adsense benzeri metin reklamı nasıl eklenir? onu paylaşıyoruz. Bu widget özel olarak Google Adsense reklamları bir hover reklam widget bağlantısı yapımı, ince etkileri olan reklamların içeriğini veya açıklamasının göründüğü şekilde çalışır. Kullanımı da oldukça kolay olan reklam widget'i blogunuza kolayca monte edilmek üzere kodlanma yapılmış şekilde ekleyebilirsiniz.

Bu eklentiyi blogunuzda denemek için aşağıdaki blogger ipuçlarını takip edin. Bu muhteşem yazı widget'ini kullanmak için aşağıdaki CSS kodlarını ekleyerek başlayabilirsiniz.

Blogger Google Adsense Widget Benzeri Metin Reklemı Nasıl Eklenir?

1. Blogger hesabınızda oturum açın ve blogunuzu seçin. Seçmiş olduğunuz blogun arayüzünde bulunan sekmelerden Şablon > HTML'i Düzenle > CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.
/* Blogger Adsense */
.beadsn-beks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.beadsn-beks div{position:relative;background:#fff;height:120px;padding:8px 0;margin:0;z-index:1;color:#666}
.beadsn-beks h2.beadsn-header{position:relative;background:#fff;font-size:18px;color:#0f8dc7;border-top:1px solid #d7d7d7;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.beadsn-beks h2.beadsn-header:first-child{border-top:0}
.beadsn-beks h2.beadsn-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b3b3b3 transparent transparent;cursor:pointer}
.adbe-beadsn span.judul-beadsn{font-size:18px;color:#0f8dc7;display:inline-block;cursor:pointer}
.adbe-beadsn span.url-beadsn{font-size:12px;color:#0f8dc7;display:block;margin:8px 0;cursor:pointer}
.adbe-beadsn span.url-beadsn:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.adbe-beadsn span.adblog-besar{color:#fff;background:#e68c4c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.adbe-beadsn span.adblog-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.adbe-beadsn span.adblog-besar:hover{background:#24485e;color:#fff}
.adbe-beadsn p.adbe{padding:0;margin:0 40px 0 0;color:#666;font-size:12px;text-align:left}
2. Aşağıdaki CSS kodu blogunuzun şablon kodlarında yoksa </head> kodunun bir satır üzerine ekleyin. Eğer bu CSS şablon kodlarınızda mevcut ise eklemenize gerek yoktur.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
3. Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.
<script src="https://cdn.rawgit.com/jquerycods/es/master/02112016.js" type="text/javascript"></script>
Eklendikten sonra şablonu kaydetmek.

4. Reklamları eklemek için blogunuzun arayüzünden widget oluşturmak için Yerleşim > Gadget Ekle > düzenine giderek HTML/JavaScript ekleyerek, HTML/JavaScript içerisine aşağıdaki HTML kodları ekleyin. Bu ekleyeceğiniz HTML koduna oluşturmak istediğiniz reklam metinlerini ekleyerek düzenlemelerini yapın ve kaydedin.
<div class='beadsn-beks beadsn-beks-sidebar' id='beadsn-beks'>
<!-- Blogger Ad 1 -->
<div data-header="Reklam Burada">
<span class='adbe-beadsn'>
<span class='judul-beadsn' onclick="window.open('/');">Reklam Burada</span>
<span class='url-beadsn' onclick="window.open('/');">blog url'si buraya</span>
<span class='adblog-besar' onclick="window.open('/');"></span>
<p class='adbe'>Blogger Adsense Reklemı</p>
</span>
</div>
<!-- Blogger Ad 2 -->
<div data-header="Reklam Burada">
<span class='adbe-beadsn'>
<span class='judul-beadsn' onclick="window.open('/');">Reklam Burada</span>
<span class='url-beadsn' onclick="window.open('/');">blog url'si buraya</span>
<span class='adblog-besar' onclick="window.open('/');"></span>
<p class='adbe'>Blogger Adsense Reklemı</p>
</span>
</div>
<!-- Blogger Ad 3 -->
<div data-header="Reklam Burada">
<span class='adbe-beadsn'>
<span class='judul-beadsn' onclick="window.open('/');">Reklam Burada</span>
<span class='url-beadsn' onclick="window.open('/');">blog url'si buraya</span>
<span class='adblog-besar' onclick="window.open('/');"></span>
<p class='adbe'>Blogger Adsense Reklemı</p>
</span>
</div>
<!-- Blogger Ad 4 -->
<div data-header="Reklam Burada">
<span class='adbe-beadsn'>
<span class='judul-beadsn' onclick="window.open('/');">Reklam Burada</span>
<span class='url-beadsn' onclick="window.open('/');">blog url'si buraya</span>
<span class='adblog-besar' onclick="window.open('/');"></span>
<p class='adbe'>Blogger Adsense Reklemı</p>
</span>
</div>
<!-- Blogger Ad 5 -->
<div data-header="Reklam Burada">
<span class='adbe-beadsn'>
<span class='judul-beadsn' onclick="window.open('/');">Reklam Burada</span>
<span class='url-beadsn' onclick="window.open('/');">blog url'si buraya</span>
<span class='adblog-besar' onclick="window.open('/');"></span>
<p class='adbe'>Blogger Adsense Reklemı</p>
</span>
</div>
</div>


Blog Google Adsense Widget Benzeri Metin Reklemı Ekleme

5. Daha basit bir metin reklemı oluşturmak istiyorsanız aşağıdaki HTML kodları kullanın. Bu HTML kodu da yukarıdaki gibi HTML/JavaScript ekleyin. Bu widget'i kullanmak için yukarıdaki CSS ve jQuery kodlarını eklemenize gerek yok.
<div id='bead_ppc'>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Blogger Adsense Metin Reklemı"><strong>Blogger Adsense Metin Reklemı</strong></a>
<br />
<span style="font-size:11px">Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Blogger Adsense Metin Reklemı">http://bloggereklentileri.blogspot.com</a>
<br/>
<br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Blogger Adsense Metin Reklemı"><strong>Blogger Adsense Metin Reklemı</strong></a>
<br />
<span style="font-size:11px">Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Blogger Adsense Metin Reklemı">http://bloggereklentileri.blogspot.com</a>
<br/>
<br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Blogger Adsense Metin Reklemı"><strong>Blogger Adsense Metin Reklemı</strong></a>
<br />
<span style="font-size:11px">Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Blogger Eklentileri">http://bloggereklentileri.blogspot.com</a>
<br/>
<br/>
<a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#b0210d;" href="#" target="_blank" title="Blogger Eklentileri Adsense Metin Reklemı"><small>Ads by Blogger Eklentileri</small></a>
<br />
</div>


Böylece bir Blogger Eklentileri eğitimi olan Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme konusunu tamamlamış olduk. En iyi bloglar için.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

2 yorum

Blogger Google Adsense Widget Benzeri Metin Reklemı Ekleme

Cevap

Sayın Şafak Çetin. Sayfadaki javascript kodu yenilenmiştir. Bilgilendirmenizden dolayı sitemiz adına teşekkür ederim.

Cevap