Duyuru Kutusu Kodu

Merhaba Arkadaşlar...

Uzun süredir nette araştırıyordum arkadaşlar bu kodu.Sizlere daha güzelini yayınlayabilmek için ama bulamamıştım.Aradan biraz zaman geçince bazı kaynaklarda bu kodu buldum baktım tam sizlere göre hem penceri tarsı renkleri.Yayınlamak istedim.

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.

Bu Kodu ]]></b:skin> Ö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; }

HTML Kodu ise yerleşim alanından bir widget açarak kaydedebilirsiniz.

 <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>

URL:

HTML Link:

Forum Link:

Blogger eklentileri

10 Haziran 2013

Duyuru Kutusu Kodu

3 yorum :

Kategoriler

Site Hakkında

Site Araçları