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.#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>
0 yorum:
Yorum Gönder