23

Ocak
2008

CSS ile Adsense

kategori: Adsense, Webmaster
grknclk yazmış,

ShiftDelete.Net‘te bulduğum Adsenseyi CSS ile renklendirme yolları. Okumaya ve denemeye değer diye düşünüyorum …

Google AdSense kullanıp para kazanmak istiyorsunuz; ama sıradan renklerle yapmak istemiyorsunuz. Rehberimizle her türlü AdSense reklamı oluşturmayı görün.

AdSense reklamlarınızı sayfalarınıza yerleştirdiğiniz de arka plan ve diğer görsel unsurlar ile bunları süsleyerek daha çok tıklanma oranı elde edebileceğimizi birçok adsense kullanıcısı biliyor. Google AdSense panelinizden oluşturduğunuz reklamlarınızın belirli kalıplar dışına çıkılmasına izin verilmiyor. Arka plan rengi, yazı rengi gibi genel değişiklikler yapmanıza imkân veriyorlar. Tüm bunlar daha fazla sayıda tıklanma için bir çekicilik oluşturmuyor. Reklamların sayfanıza yerleşimi kadar onun sayfanın bir parçası gibi görünmesi ya da görünmemesi tüm bu tıklanma oranları değiştirebiliyor.

Tıklanma oranlarınızı arttırmak için biraz HTML ve CSS bilginizle daha çekici reklamlar hazırlayabilirsiniz. Şimdi sizler için farklı reklam seçeneklerini kolayca çekici hale getirebileceğiniz reklam görünümlerine yer vereceğiz.

CSS dosyalarınıza beğendiğiniz görünümün CSS kodlarını eklemelisiniz. AdSense kodlarınızı da HTML kodu içerisinde yerlere ekleyip sayfanıza yerleştirebilirsiniz. Boş şablon dosyalarını da indirmeyi unutmayın.
Full Banner ReklamlarSiyah renkleri tercih edenler için hazırlanan reklam bannerı farklılığını hissettirecektir.

CSS Kodu:
#ad_code { width:520px; background:transparent url(resim/1a.jpg) left center no-repeat; padding:10px 0 10px 22px }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #333333
Border Color: #333333
Text Color: #FFFFFF
Link Color: #0099FF
URL Color: #CCCCCC

Gri tonlarının hakim olduğu sitelerde sıkça kullanılabilecek ve çerçeve dışındaki çizgilerle de kendini farklı gösteren reklam bannerını web sitelerinizde kolaylıkla kullanabilirsiniz.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/2a.jpg) center center no-repeat; text-align:center; padding:11px 10px 10px 9px; width:487px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #666666
Border Color: #666666
Text Color: #26AEED
Link Color: #FFFFFF
URL Color: #26AEED

Sıra dışı görüntüsüyle hafif turuncu renklerine sahip siteler tarafından tercih edilebilecek reklam uygulaması tıklanma oranlarınızı arttırabilir.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/3a.jpg) center center no-repeat; padding:25px 0; width:468px; text-align:left; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #FFFFFF
Border Color: #FFFFFF
Text Color: #777777
Link Color: #282828
URL Color: #777777

Oval hatları tercih edenlerin web sitelerinde sıkça kullanabilecekleri adsense bannerı tam sizler için oluşturuldu.

CSS Kodu:
#ad_code { text-align:center; width:490px; padding:15px; background:transparent url(resim/4a.jpg) center center no-repeat; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #333333
Border Color: #333333
Text Color: #FFFFFF
Link Color: #5C9CDD
URL Color: #CCCCCC

Lacivert ve mavi tonlarını tercih edenler için oval hatlara sahip reklam uygulaması sizi diğerlerinden farklı kılabilir.

CSS Kodu:
#ad_code { width:516px; text-align:center; background:#FFFFFF url(resim/5a.jpg) center center no-repeat; padding:35px 0; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>

Background Color: #003366
Border Color: #003366
Text Color: #666666
Link Color: #FFFFFF
URL Color: #666666

Hal Banner Reklamlar

Tasarımlarınızda her boşluğa kolayca yerleştirebileceğiniz reklamlar ile daha fazla gelir elde edebilirsiniz.

CSS Kodu:
#ad_code { background:transparent url(resim/6a.jpg) center center no-repeat; text-align:center; width:312px; padding:65px 0; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>

Background Color: #FF9933
Border Color: #FF9933
Text Color: #111111
Link Color: #FFFFFF
URL Color: #111111

Siyahın gizemliliğini ön plana çıkarak gelirlerinizi kat kat arttırabilirsiniz.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/7a.jpg) center center no-repeat; width:314px; text-align:center; padding:6px 45px 6px 35px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #333333
Border Color: #333333
Text Color: #999999
Link Color: #FFFFFF
URL Color: #999999

Mavi tonlarında web sitesine sahip olanlar tercih edebilecekleri bir reklam uygulamasıdır.

CSS Kodu:
#ad_code { width:260px; text-align:center; padding:10px 20px 20px 10px; background:transparent url(resim/8a.jpg) center center no-repeat; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #5D8AC9
Border Color: #5D8AC9
Text Color: #CBE6A6
Link Color: #FFFFFF
URL Color: #CBE6A6

Farklı görünümüyle web sitelerinizin reklam içeriğini zenginleştirebilirsiniz.

CSS Kodu:
#ad_code { width:253px; text-align:left; padding:16px 0 23px 5px; background:transparent url(resim/9a.jpg) center center no-repeat; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #333333
Border Color: #333333
Text Color: #CCCCCC
Link Color: #FFFFFF
URL Color: #CCCCCC

Buton Reklamlar

Tasarımlarınızda reklamlarınıza sempatik bir görünüm kazandırmak sizin elinizde.

CSS Kodu:
#ad_code { background:#ffffff url(resim/10a.jpg) center center no-repeat; width:161px; height:161px; padding-top:20px; text-align:center; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #FFCC33
Border Color: #FFCC33
Text Color: #333333
Link Color: #000000
URL Color: #333333

Takvim yaprağını anımsandıran görüntüsüyle reklamlarınıza farklı boyutlar kazandırabilirsiniz.

CSS Kodu:
#ad_code { background:#ffffff url(resim/11a.jpg) center center no-repeat; width:163px; height:166px; padding-top:15px; text-align:center; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #333333
Border Color: #333333
Text Color: #888888
Link Color: #FFFFFF
URL Color: #888888

Sade bir görünüm isteyenler tercih edebilirler.

CSS Kodu:
#ad_code { text-align:center; padding:10px 0; background:transparent url(resim/12a.jpg) center no-repeat; width:182px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #FFFFFF
Border Color: #FFFFFF
Text Color: #666666
Link Color: #336699
URL Color: #666666

Sade bir görünüm içeren ve gölgesiyle de hoş bir görüntü oluşturuyor.

CSS Kodu:
#ad_code { background: #ffffff url(resim/13a.jpg) center center no-repeat; text-align:center; padding:3px 13px 13px 3px; width:138px; }
HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #FFFFFF
Border Color: #FFFFFF
Text Color: #038C03
Link Color: #038C03
URL Color: #038C03

Farklı ve sıra dışı görünümüyle dikkat çekiyor .

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/14a.jpg) center center no-repeat; padding:65px 65px; text-align:center; width:200px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>

Background Color: #333333
Border Color: #333333
Text Color: #FFFFFF
Link Color: #FFFFFF
URL Color: #FFFFFF

Large Rectangle Reklamlar

Reklamlarınızı kolayca sayfanıza ekleyebilir ve hoş bir not sayfası görünümü kazandırabilirsiniz.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/15a.jpg) center center no-repeat; text-align:center; padding:7px 15px 15px 7px; width:363px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #EEEEEE
Border Color: #EEEEEE
Text Color: #444444
Link Color: #000000
URL Color: #444444
Köşe yapılarıyla diğer geniş adsense uygulamalarından farklı bir görüntü oluşturabilirsiniz.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/16a.jpg) center center no-repeat; text-align:center; padding:9px 15px 18px 7px; width:363px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #28527B
Border Color: #28527B
Text Color: #EEEEEE
Link Color: #FFFFFF
URL Color: #EEEEEE

Leaderboard Reklamlar

Sade ve farklı bir görünüm tercih edenlerin seveceği bir reklam görünümüdür.

CSS Kodu:
#ad_code { width:765px; text-align:center; padding:30px 25px 30px 15px; background:transparent url(resim/17a.jpg) center center no-repeat; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>

Background Color: #FFFFFF
Border Color: #FFFFFF
Text Color: #555555
Link Color: #006699
URL Color: #444444
Çoğu tasarımınızda kolayca reklam farklılığı yaratabilirsiniz.

CSS Kodu:
#ad_code { width:750px; padding:10px; background:transparent url(resim/18a.jpg) center center no-repeat; text-align:center; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #CCDEAF
Border Color: #CCDEAF
Text Color: #000000
Link Color: #1B5790
URL Color: #444444
Medium Rectangle Reklamlar

İç içe tablo görünümüyle diğer adsense reklamlarında farklı olarak dikkat çekiyor.

CSS Kodu:
#ad_code { background:transparent url(resim/19a.jpg) center center no-repeat; padding:15px; width:330px; text-align:center; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #BCE27F
Border Color: #BCE27F
Text Color: #FFFFFF
Link Color: #111111
URL Color: #6A6A6A

SkyScraper Reklamlar

Gri reklam görünümlerinden vazgeçemeyenler tercih edebilirler.

CSS Kodu:
#ad_code { width:142px; background:#FFFFFF url(resim/20a.jpg) center center no-repeat; text-align:center; padding:11px 6px 19px 0; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>

Background Color: #CCCCCC
Border Color: #CCCCCC
Text Color: #333333
Link Color: #111111
URL Color: #333333

Kırmızının dikkat çekiciliğini daha güzel ve düzenli olarak ön plana çıkarıyor.

CSS Kodu:
#ad_code { width:140px; background:#FFFFFF url(resim/21a.jpg) center center no-repeat; text-align:center; padding:10px 8px 10px 0; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #CD2424
Border Color: #CD2424
Text Color: #FFFFFF
Link Color: #FFEEAA
URL Color: #FFEEAA
Small Square Reklamlar

Tasarımlarınızın bir parçası gibi gösterebileceğiniz reklam uygulamalarından biri.

CSS Kodu:
#ad_code { background:#FFFFFF url(resim/22a.jpg) center center no-repeat; text-align:center; padding:30px; width:260px; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #666666
Border Color: #666666
Text Color: #FFFFFF
Link Color: #FFFFFF
URL Color: #FFFFFF
Sempatik görünümüyle sizi farklı kılabilecek bir reklam uygulaması tam size göre.

CSS Kodu:
#ad_code { width:230px; padding:18px 15px; text-align:center; background:transparent url(resim/23a.jpg) center center no-repeat; }

HTML Kodu:
<div id=”ad_code”>
<!—ADSENSE KODUNUZU BURAYA YAZINIZ–>
</div>
Background Color: #6DA6D1
Border Color: #6DA6D1
Text Color: #104570
Link Color: #000000
URL Color: #104570

Yazan: Olcay Kük
SDN - http://shiftdelete.net

Bu Yazıyı Paylaşın

« TTNet aboneleri 700 bin şarkı indirdi | Yeniden YouTube… »

Etiketler:

Yorumlar

Kapat

Sosyal İmleme
E-posta ile