× İletişim Formu Tanıtım Reklamları İçin Reklam Kutusu Oluşturma Arlina Design 4/06/2018 Etiketler : CSS CSS3 HTML HTML5 Arlina Design <!DOCTYPE html> <HTML> <head> <title>Tanıtım Reklamları İçin Reklam Kutusu Oluşturma</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif} *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px} .banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;} .banner_box:nth-child(1),.banner_box:nth-child(3){margin-right:16.6666666667px} .banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px} .banner_box a{position:relative;display:block;z-index:2} .banner_box img{object-fit:cover} .banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;} .banner_300{width:300px;height:250px;} .banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;} .banner_box_ads.box_widget{padding:0;} .banner_300:before{content:"300x250";} .clear{clear:both;} </style> </head> <body> <div class="banner_box_ads box_widget"> <div class="banner_box banner_300"> <!-- 300x250 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/04/blogger-sayfalar-widget-ile-sabit.html" target="_blank" rel="nofollow noopener" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH33ajFvMNVgyJpv50DHzxYqUtyDrHGQ1ra8O2nPY6XMRuifSM1aFLdpVKaBHUc_w2irPXZlijGywV_BY6olQZkDcj365GXgcMnldwvY8V74iFC-bUrKpGqKj7QXJk-FeLeZxj-5s8I1Ni/s1600/sabit-sayfa-navigasyonu.png" alt="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" height="250" width="300"/></a> </div> <div class="clear"/> </div> <div class="banner_box_ads"> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/03/blog-metinlerini-css-ile-renklendirme.html" target="_blank" rel="nofollow noopener" title="Blog Metinlerini CSS ile Renklendirme"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPQvrkk9O7Evxa8unsVVj3hiioTRgpW2u8BVaT58eN3-ADyueTlwWuepDnE0bqqXeBg4h5fsBdUz5qEY-yIXytogV___paj4vDrhDH23B9JcCT5Cqdzj1ClDo5PuTxpCu8QuQ7qB2BdM8/s1600/css-gradients.png" alt="Blog Metinlerini CSS ile Renklendirme" title="Blog Metinlerini CSS ile Renklendirme" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-yldz-derecelendirme-widget.html" target="_blank" rel="nofollow noopener" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1OOAj8h4Sn4zU-iOCnwhm6q5EkjMe3YbHl60QARhyUfTLuFDx4M1M4bB-CnBLbfmTGGfgiT3hcYBybUDN30rI95mhuCUQ64gwkHlzEDaIJ-fjLny12Ki8sMbEVI7erPrnf0LddCMFeFP/s1600/yildiz+derecelendirme.png" alt="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-css-ve-svg-sosyal-paylasm.html" target="_blank" rel="nofollow noopener" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZe1M-qs3RHZFqwpMZwu_qtIYZ0hJwtGXx_p4STeNjIEGXJcPJeuhk7h-d476s6L032nSggNUNxCQB30I44ol7d06w5190YzdJrgZbQNEzPhedY4-_wq5diNmoawHkog8e2DvVASBqTD_/s1600/sosyal-paylasim.png" alt="Blogger CSS ve SVG Sosyal Paylaşım Butonları" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-ozel-adstxt-icerigi-nasl.html" target="_blank" rel="nofollow noopener" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7BP_6rkQdpg8v3REagUFHAluUq9IObdGuZ4PN3k5giZRZrCbmp07kvDZh3tmtQNMJqRgiHYw39GrRAOcbpQ8lt_EJ3qOSUctVAqaE3gtbaHtjBgNzXlM9hVDSbB6MbLQPYHVpUbJof22/s1600/ads.png" alt="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" height="125" width="125"/></a> </div> <div class="clear"/> </div> </body> </HTML> YENİ YAYIN ÖNCEKİ YAYIN "Tanıtım Reklamları İçin Reklam Kutusu Oluşturma" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Tanıtım Reklamları İçin Reklam Kutusu Oluşturma Arlina Design 4/06/2018 Etiketler : CSS CSS3 HTML HTML5 Arlina Design <!DOCTYPE html> <HTML> <head> <title>Tanıtım Reklamları İçin Reklam Kutusu Oluşturma</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif} *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px} .banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;} .banner_box:nth-child(1),.banner_box:nth-child(3){margin-right:16.6666666667px} .banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px} .banner_box a{position:relative;display:block;z-index:2} .banner_box img{object-fit:cover} .banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;} .banner_300{width:300px;height:250px;} .banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;} .banner_box_ads.box_widget{padding:0;} .banner_300:before{content:"300x250";} .clear{clear:both;} </style> </head> <body> <div class="banner_box_ads box_widget"> <div class="banner_box banner_300"> <!-- 300x250 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/04/blogger-sayfalar-widget-ile-sabit.html" target="_blank" rel="nofollow noopener" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH33ajFvMNVgyJpv50DHzxYqUtyDrHGQ1ra8O2nPY6XMRuifSM1aFLdpVKaBHUc_w2irPXZlijGywV_BY6olQZkDcj365GXgcMnldwvY8V74iFC-bUrKpGqKj7QXJk-FeLeZxj-5s8I1Ni/s1600/sabit-sayfa-navigasyonu.png" alt="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" height="250" width="300"/></a> </div> <div class="clear"/> </div> <div class="banner_box_ads"> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/03/blog-metinlerini-css-ile-renklendirme.html" target="_blank" rel="nofollow noopener" title="Blog Metinlerini CSS ile Renklendirme"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPQvrkk9O7Evxa8unsVVj3hiioTRgpW2u8BVaT58eN3-ADyueTlwWuepDnE0bqqXeBg4h5fsBdUz5qEY-yIXytogV___paj4vDrhDH23B9JcCT5Cqdzj1ClDo5PuTxpCu8QuQ7qB2BdM8/s1600/css-gradients.png" alt="Blog Metinlerini CSS ile Renklendirme" title="Blog Metinlerini CSS ile Renklendirme" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-yldz-derecelendirme-widget.html" target="_blank" rel="nofollow noopener" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1OOAj8h4Sn4zU-iOCnwhm6q5EkjMe3YbHl60QARhyUfTLuFDx4M1M4bB-CnBLbfmTGGfgiT3hcYBybUDN30rI95mhuCUQ64gwkHlzEDaIJ-fjLny12Ki8sMbEVI7erPrnf0LddCMFeFP/s1600/yildiz+derecelendirme.png" alt="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-css-ve-svg-sosyal-paylasm.html" target="_blank" rel="nofollow noopener" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZe1M-qs3RHZFqwpMZwu_qtIYZ0hJwtGXx_p4STeNjIEGXJcPJeuhk7h-d476s6L032nSggNUNxCQB30I44ol7d06w5190YzdJrgZbQNEzPhedY4-_wq5diNmoawHkog8e2DvVASBqTD_/s1600/sosyal-paylasim.png" alt="Blogger CSS ve SVG Sosyal Paylaşım Butonları" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları" height="125" width="125"/></a> </div> <div class="banner_box"> <!-- 125x125 banner alanı --> <a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-ozel-adstxt-icerigi-nasl.html" target="_blank" rel="nofollow noopener" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7BP_6rkQdpg8v3REagUFHAluUq9IObdGuZ4PN3k5giZRZrCbmp07kvDZh3tmtQNMJqRgiHYw39GrRAOcbpQ8lt_EJ3qOSUctVAqaE3gtbaHtjBgNzXlM9hVDSbB6MbLQPYHVpUbJof22/s1600/ads.png" alt="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" height="125" width="125"/></a> </div> <div class="clear"/> </div> </body> </HTML>
Yorum Gönder