Ali Mengü | Kişisel Web Sayfasi

Reklam Arkaplani ve Alani Kodlama

Bu dersimizde Gelen Soru "Reklam Alani Nasıl Kodlanir" kısaca Anlaticam Yapamayanlar Yorum Atarsa Yardimci Olurum.

Öncelikle Arkadaslar benim elimde hazır bir tasarim olmadiğindan tasarim üzerinde anlatamayacam fakat Bu işlemleri Ayni şekilde uygularsaniz istediğiniz katman,tablo gibi bölgelerde kullanabilirsiniz.Öncelikle Kısaca özetleyeyim padding kodlariyla reklami istediğimiz bölgeye getirmeye çalışıcağız.

İlk Olarak Kullanacağım Resimler ;

Reklam Arkaplani Boyut 508x63



Reklam  Banneri 468x60



Amacimiz Reklam Bannerini Reklam Arkaplanina uygun bir şekilde yerleştirmek.Öncelikle Reklam Arkaplani için bir div katmani oluşturuyoruz "< div  id="alireklamarkaplani"></ div >" Ayni Sekilde Css Olarakda Kodumuzu Başlatiyoruz #alireklamarkaplani {buraya kodlar gelicek} Ve boyutlarını Reklam Arkaplanlanimiza göre ayarliyoruz benim Reklam Arkaplanima Göre width: 508px; ve height: 63px; Ardindan Katmanimiza Bir Arkaplan veriyoruz. background-image:arkaplanresmi Bu kısım Reklam Arkaplani katmanini oluşturmamiz için gerekli. Şimdi Kendi değerlerinizi Aşağıdaki Kırmızı yazılı yerlerle değiştirin.
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 63px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
}
-->
</style>
<div id="alireklamarkaplani"></div>

Yukardaki koda göre benim katmanimin görünüsü bu şekilde Eğer sizde Doğru Yaptıysanız Katmanda sizin reklam arkaplaniniz görünücektir;

Şimdi yapıcağımız işlem reklam bannerimizi katmana Eklemek.Bu Gayet Kolay Bir İşlem Bunun üzerinde fazla durmayacağım.
< div id="alireklamarkaplani"> buraya reklam kodunuz gelicek bannerin 468x60 boyutlarinda olmasina dikkat edin  < /div>  benim ekleyeceğim kod;
<img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" />

Şimdi Reklam Arkaplani Kodumuzun Son Haline Bakalim.
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 63px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Koda göre katmanimizin görünüsü Doğru Yaptiysaniz Sizinkide Buna Benzer Olucaktir;

Şimdi Reklam Bannerini İstediğimiz Konuma Getirme işlemini Yapıcağız.Bu kısmı size kendimce açıklayayım Padding kodunu kullanarak katmanimizin içeriğini katmanin içinde istediğimiz yere koyabiliriz.Bu işlemde toplama ve çıkarma işlemine ihtiyacimiz olucak. Benim Bu kodda kullanicağım paddingler padding-top(içeriğin katmanin üst kısmına uzakliği) padding-left(içeriğin katmanin sol kısmına uzakliği) olucak.İlk Olarak içeriğin ust kısmına uzakliğindan baslayalim.Öncelikle Bilmeniz Gereken En önemli Kural padding-top kodunu kullanmak için height değeri - padding-top değeri=Yeni height Değeri işlemini kullanmamiz gerekiyor.Padding-left kullanmak içinde width değeri -  padding-left değeri=Yeni width değeri bu div katmanini kullandiğiniz herşey için geçerlidir.Bu işlemi Tablo Tasarimda Kullananlarin Yapmasina Gerek ve imkan yoktur.
Ben Reklam bannerinin katmanimin ust kısmandan uzakliği için 1px değer veriyorum.Yani padding-top:1px; Bu durumda kodumuz ;
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 62px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
    padding-top:1px;
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Dikkat Ederseniz height değeri 63-1=62 oldu.Bununla Birlikte Reklam Arkaplani kodumun yeni görünüşü aşağıdaki gibidir.Siz padding değerini Kendi Tasariminiza veya arkaplaniniza göre verin.

Şimdi sıra Padding-left uygulamaya geldi.İçeriğin Katmanin Sol Kısmından Uzakliği için 28px değeri veriyorum. Yani Padding-left: 28px; Budurumda Kodumuz;
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 480px;
    height: 62px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
    padding-top:1px;
    padding-left:28px;
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Yine Dikkat Ederseniz width değeri 508-28=480 oldu.Bununla Birlikte Reklam Arkaplaninin görünümü aşağıdaki gibidir.
Siz padding değerini Kendi Tasariminiza veya arkaplaniniza göre verin.


Ve işte Sonuç;
Anlatim By AliMengü
Sorusu Olan Aşağıdaki Yorum Kısmından Belirtebilir.

---

Bu sayfa hakkındaki son yorum: Yorumu gönderen: Ellie, 06.01.2014, 21:48 (UTC): I can hardly believe that such well-designed blogs exist. Ellie http://thebestshoelifts.jimdo.com/2011/04/18/what-are-shoe-lifts-how-can-they-make-me-look-taller Yorumu gönderen: Khloe, 09.12.2013, 22:23 (UTC): You made some good points there. I did a search on the topic and found most people will approve with your site. Khloe http://iphigenia493.typepad.com/blog/2011/09/the-push-up-bra-myth-exposed-how-to-really-increase-your-bust-line-in-9-minutes.html Yorumu gönderen: Khloe, 08.12.2013, 22:17 (UTC): Hello, I identified your blog in a new directory of blogs. I will not understand how your weblog came up, must have been a typo, Your blog page looks excellent. Have a great day Khloe http://steam681.typepad.com/blog/2011/09/fencing-shoes-will-improve-your-skills.html Yorumu gönderen: Samantha, 08.12.2013, 18:30 (UTC): Well I really liked reading it. This post provided by you is very helpful for accurate planning. Samantha http://www.jukeboxalive.com/blog.php?blog_id=10121195 Yorumu gönderen: Hailey, 08.12.2013, 12:33 (UTC): I'm blessed to own grown up with Harry Kalas calling every baseball sport of my childhood, living in the Philadelphia area. I cried when i heard about his death, and I'm able to however hear his "outta here" homerun calls when I am watching online games today. Due to the fact his passing, the Phillies will play the clip of him singing "High Hopes" immediately after just about every win. It can make me desire that substantially extra for the victory. Hailey http://angieemerson968.insanejournal.com/2012/01/03/ Yorumu gönderen: Lillian, 08.12.2013, 01:44 (UTC): I'd like some hep, If possible. Lillian http://shoeinsoles100.blogspirit.com/archive/2012/05/22/shoe-insoles-for-sport.html Yorumu gönderen: Kimberly, 08.12.2013, 01:44 (UTC): A place I actually examine a similar article by now, as well as Now i am questioning whether the girl had written this and also the exact same man. The identical style i appreciate, perhaps handed comparable thought processes. You write articles or blog posts upon various other web site? Kimberly http://eliwatson.blogsky.com/print/post-5/ Yorumu gönderen: Caroline, 07.12.2013, 14:11 (UTC): It's the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I desire to read more things about it! Caroline http://angieemerson968.insanejournal.com/ Yorumu gönderen: London, 07.12.2013, 04:30 (UTC): Some really grand work on behalf of the owner of this web site, perfectly great content material. London http://blogs.rediff.com/h82bsmall/tag/height-increase/ Yorumu gönderen: Emma, 07.12.2013, 00:05 (UTC): Incredible issues is presented the following using abundant in black and white satisfy, excellent ability as a copywriter. I would not discover how it's but achieve not quit! For individuals as qualification you exist online. Emma http://lifttjodi.blinkweb.com Yorumu gönderen: Morgan, 06.12.2013, 15:13 (UTC): This is one awesome blog.Thanks Again. Cool. Morgan http://worm207.insanejournal.com/1544.html?thread=264 Yorumu gönderen: Kennedy, 06.12.2013, 01:58 (UTC): I really liked your post.Really thank you! Really Cool. Kennedy http://only-gods-finest.socialgo.com/magazine/read/the-right-way-to-counter-bruised-heels-equipped-with-heel-cups_103.html Yorumu gönderen: Bailey, 05.12.2013, 22:13 (UTC): Very informative article post. Keep writing. Bailey http://heelliftsguy76.wikidot.com/become-taller-heel-lifts Yorumu gönderen: Ava, 05.12.2013, 19:38 (UTC): I'm excited to find this web site. I wanted to thank you for ones time just for this fantastic read!! I definitely enjoyed every bit of it and I have you saved to fav to see new stuff in your site. Ava http://www.blogbus.com/tallertina-logs/213118118.html Yorumu gönderen: Molly, 05.12.2013, 16:50 (UTC): I also like Flash, however I am not a good designer to design a Flash, except I have software by witch a Flash is automatically produced and no additional to hard working. Molly http://juliannev76.insanejournal.com Yorumu gönderen: Victoria, 02.12.2013, 20:43 (UTC): a people sole controls the complete group composition. it must live felt and seen bare for an analysis. we? all fancy the consistent entity, to provide clear healthiness, rejection sadden is intended. Victoria http://www.facebook.com/share.php?u=http://www.africanbuddies.net/magazine/read/ways-to-handle-flat-feet-which-cause-foot-pain_586.html&t= Yorumu gönderen: Hannah, 29.11.2013, 08:47 (UTC): Hello there! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job! Hannah http://ultimateheight.jimdo.com/ Yorumu gönderen: Audrey, 27.11.2013, 08:06 (UTC): We are a group of volunteers and opening a new scheme in our community. Your website offered us with valuable information to work on. You've done an impressive job and our entire community will be thankful to you. Audrey http://tallertina.exblog.jp/ Yorumu gönderen:: 08.10.2011, 12:10 (UTC) alimengu Kapalı Çizim ile ilgili olabilir.Örneğin ben bu çizimi hatali yapmişim benimde tam olarak oturmuyor yerine. Yorumu gönderen:: 03.10.2011, 17:25 (UTC) (locked user) Yaw Alim bi türlü oturtamadım yaw sürekli reklam az üstünde oluyor.

Bu sayfa hakkında yorum ekle:

İsminiz:
Mesajın: