Sitenize Duyuru Penceresi Ekleyin

| 10 Ara 2012 0 yorum
Günümüzde birçok web geliştiricisi duyuru pencerelerini kullanmakta. İnternette de onlarca duyuru penceresi konulu makale var.Duyuru penceresi dediğimiz şey sayfanın ilk izlenimidir. Bende adobewordpress sitesinde paylaşılmış olan "Duyuru Penceresini" sizinle paylaşacağım.Bu vereceğim Css Kodlarının Hepsini ]]></b:skin> Kodunun önüne yapıştıracağız..Html Kodunun ise göstermek istediğiniz pencereye veya Şablon>Html'yi Düzenle>Widget Şablonlarını Genişlet <body> Kodunun hemen altına yapıştıracaksınız.



Örneği Görüntüler
Pencerenin dikkat çekmesi için oluşturulan perde bütün browserlara uyum sağlayacak nitelikte.Bu Kodları ]]></b:skin>(Crtl+F) Önüne yapıştıracağız #perde { background-color:black; opacity: 0.7; -moz-opacity:0.70; filter: alpha(opacity=70); z-index: 20; height: 100%; width: 100%; background-repeat:repeat; position:fixed; top: 0px; left: 0px; } #duyuru { z-index: 50; position:absolute; background-color:#bb5046; width:530px; height:230px; left: 50%; top: 50%; margin-top: -185px; margin-left: -275px; border-radius:20px; padding:20px; -moz-box-shadow:inset 0 0 80px #822820; -webkit-box-shadow: inset 0 0 80px #822820; box-shadow: inset 0 0 80px #822820; }#duyuru p{ text-align:left; font:14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#fcd1cd; text-shadow: #822820 2px 1px; } #duyuru h1{ font:20px Georgia, 'Times New Roman'; color:white; letter-spacing: -1px; margin-bottom: 10px; text-align:center; text-shadow: #822820 2px 1px; }#duyuru .kapat{right:0; top:0; padding:1px; font:10px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; border-radius:3px; z-index: 60; position:absolute; background-color:white; border:1px #858585 solid; margin:-12px -12px 0 0; border-radius:10px; color:#111; width:15px; height:15px; cursor:pointer; } #duyuru .kapat:hover{ background-color:#CCC; color:white; }#duyuru p .awlogo{ margin:15px; border-right:1px #822820 dotted; float:left; } 
Vereceğim HTML Konu ise göstermek istediğiniz pencereye veya Şablon>Html'yi Düzenle>Widget Şablonlarını Genişlet <body> Kodunun hemen altına yapıştıracaksınız.
<br />
<div id="perde">
</div>
<div id="duyuru">
<div class="kapat" onclick="document.getElementById('duyuru').style.display = 'none';document.getElementById('perde').style.display = 'none';">
X</div>
<h6>
AdobeWordPress.com Duyuru Penceresi</h6>
Bu duyuru penceresi okumakta olduğunuz makale sonucunda oluşmuştur. Bir satırlık javascript koduyla çalışan bu pencere diğerlerine kıyasla <span style="text-decoration: underline;">hızlı</span> ve <span style="text-decoration: underline;">geliştirilebilirdir</span>.

<img alt="" class="awlogo" src="http://www.adobewordpress.com/wp-content/themes/themolio/images/logo.png" />

<a href="http://www.blogger.com/www.adobewordpress.com">www.adobewordpress.com</a>
Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</div>
<pre>
Kaynak:http://www.adobewordpress.com/sitenize-duyuru-penceresi-ekleyin/
Siz bu yazıyı okuyan counter kişiden birisiniz.

0 yorum: