Ads Top

Blogger Şık Bildirim Kutuları Eklentisi-Duyuru Panosu


Blogger için tasarlanmış bu oldukça şık bildirim kutularını ister yayınladığınız yazıların bir bölümünde isterseniz de sitenizin bir köşesinde kullanabilirsiniz.
Oldukça kullanışlı ve bir o kadar da profesyonel bir hava katıyor eğer sizde sitenizde bir duyuru paylaşmak veya konularınıza renk getirmek istiyorsanız bu eklenti tam size göre 

Gelelim bu eklentiyi sitemizde kullanmaya Şablon > HTML'yi Düzenle diyoruz ve karşımıza çok sevdiğimiz kodlarımız çıkıyor buradan ]]></b:skin>  kodunu aratın ve bir satır üstüne aşağıda verdiğim kodları ekleyin.


.syv-bildirim {<br />
color: #ffffff;<br />
display: block;<br />
font-size: 12px;<br />
margin: 1em 0;<br />
padding: 20px 20px 20px 90px;<br />
position: relative;<br />
}<br />
<br />
.syv-bildirim span.icon {<br />
height: 32px;<br />
left: 20px;<br />
position: absolute;<br />
top: 15px;<br />
width: 32px;<br />
}<br />
<br />
<br />
.bildirim-hata { background: #c02424 url("http://3.bp.blogspot.com/-5MfmUpwKAOU/UOm88G02_gI/AAAAAAAAFjI/DIBj-w-E61Y/s1600/error.gif") repeat-x top left; border: 1px solid #a01515; color:#660404; }<br />
.bildirim-hata span.icon { background: url("http://2.bp.blogspot.com/-k24W-2lIH6o/UOm87N9B5FI/AAAAAAAAFi8/8-i_2hbmAVk/s1600/error-icon.png") no-repeat top left; }<br />
<br />
.bildirim-onay { background: #6ba623 url("http://2.bp.blogspot.com/-HneDs2JAmRU/UOm8-zbkeFI/AAAAAAAAFjw/dJ-lMEfF8_4/s1600/success.gif") repeat-x top left; border: 1px solid #6e8a19; color: #405100; }<br />
.bildirim-onay span.icon { background: url("http://2.bp.blogspot.com/-628iEEBLhjg/UOm8-CWA1bI/AAAAAAAAFjk/h2OXT7mR3A0/s1600/success-icon.png") no-repeat top left; }<br />
<br />
.bildirim-info { background: #1d86af url("http://4.bp.blogspot.com/-xUNWklRsk9M/UOm88geoACI/AAAAAAAAFjM/e9K1txJW7so/s1600/info.gif") repeat-x top left; border: 1px solid #317d9b; color:#084752; }<br />
.bildirim-info span.icon { background: url("http://3.bp.blogspot.com/-Zy9arKGoEvw/UOm88i5gCnI/AAAAAAAAFjQ/vGVlf8RGqQ4/s1600/info-icon.png") no-repeat top left; }<br />
<br />
.bildirim-uyari { background: #e77414 url("http://2.bp.blogspot.com/-r19wM7mm_oo/UOm87JXE-UI/AAAAAAAAFjE/ZKOzPmtjljQ/s1600/alert.gif") repeat-x top left; border: 1px solid #be7125; color:#7e5700;}<br />
.bildirim-uyari span.icon { background: url("http://4.bp.blogspot.com/-nDo3zzQ9HkE/UOm87BPNHmI/AAAAAAAAFjA/w2F5CZ86kwU/s1600/alert-icon.png") no-repeat top left; }<br />
<br />
.bildirim-standard { background: #d7d7d7 url("http://4.bp.blogspot.com/-g0GfgZVROKM/UOm89qPKKoI/AAAAAAAAFjc/sSSX981p8FQ/s1600/standard.gif") repeat-x top left; border: 1px solid #bababa; color: #464646 !important; }<br />
.bildirim-standard span.icon { background: url("http://4.bp.blogspot.com/-Rl8mHzeWsrI/UOm89YnKXmI/AAAAAAAAFjs/k9lUM-_HPws/s1600/standard-icon.png") no-repeat top left; }<br />
<br />
<br />
/* TABBED CONTENT */<br />
<br />
.syvtabmenu {<br />
background: #f1f1f1;<br />
border: 1px solid #e1e1e1;<br />
margin: 35px 0 2em 0;<br />
padding: 10px 10px 0 10px;<br />
position: relative;<br />
}<br />
<br />
.syvtabmenu .tabmenu {<br />
list-style: none;<br />
margin: 0 0 0 0 !important;<br />
padding: 0 !important;<br />
}<br />
<br />
.syvtabmenu .tabmenu li {<br />
background: #ffffff;<br />
padding: 20px 20px 20px 20px;<br />
margin: 0 0 10px 0;<br />
display: none;<br />
}<br />
<br />
.syvtabmenu .tabmenu li p { <br />
margin: 0 0 1em 0; <br />
}<br />
<br />
.syvtabmenu .tabmenu li.current {<br />
display: block;<br />
}<br />
<br />
.syvtabmenu .tablar {<br />
list-style: none !important;<br />
margin: 0 !important;<br />
padding: 0 !important;<br />
position: absolute;<br />
top: -33px;<br />
left: 13px;<br />
}<br />
<br />
.syvtabmenu .tablar li {<br />
list-style: none !important;<br />
background: #e5e5e5 !important;<br />
border: 1px solid #e1e1e1;<br />
border-bottom: none;<br />
text-shadow: 0 1px 0 #ffffff;<br />
cursor: pointer;<br />
float: left;<br />
font: bold 12px/32px Arial, Helvetica, sans-serif;<br />
color: #999999 !important;<br />
padding: 0 20px!important;<br />
margin: 0 3px 0 0!important;<br />
-moz-border-radius-topright: 5px;<br />
-moz-border-radius-topleft: 5px;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-top-right-radius: 5px;<br />
}<br />
<br />
.syvtabmenu .tablar li.current {<br />
background: #f1f1f1 !important;<br />
color: #666666 !important;<br />
}
Kodu ekleyip şablonu kaydetmeyi unutmayın artık kutularımızı sitemize tanıttık nerede ve ne zaman kullanmak istediğiniz size ve hayal gücünüze kalmış kullanma kodlarınıda aşağıda veriyorum ve yazıma son veriyorum.


<div class="syv-bildirim bildirim-standard"><br />
<span class="icon"></span><span class="kapali"></span> Bu standart bildirim kutusudur </div><br />
<div class="syv-bildirim bildirim-onay"><br />
<span class="icon"></span><span class="kapali"></span> Bu bildirim onaylama kutusudur </div><br />
<div class="syv-bildirim bildirim-hata"><br />
<span class="icon"></span><span class="kapali"></span> Bu hata bildirim kutusudur </div><br />
<div class="syv-bildirim bildirim-info"><br />
<span class="icon"></span><span class="kapali"></span> Bu info bildirim kutusudur </div><br />
<div class="syv-bildirim bildirim-uyari"><br />
<span class="icon"></span><span class="kapali"></span> Bu uyarı bildirim kutusudur </div><br />

Hiç yorum yok:

Blogger tarafından desteklenmektedir.