Blogger Renkli Duyuru Eklentisi

Blogger Renkli Duyuru Eklentisi
Blogger için oldukça şık bir duyuru eklentisi olup sitenizde ister konu içinde isterseniz sitenizin istediğiniz biryerinde duyuru açabilirsiniz.Oldukça kullanışlı ve sitenize ayrı bir renk katıcak ve belli etmek isteğiniz yada dikkat çekmesini istediğiniz yazıları bu eklenti sayesinde koyabilirsiniz.



Şablon  ›  HTML'yi Düzenle'ye girin ve orda

]]></b:skin>

Kodu aratın ve hemen üstüne aşağıdaki kodu ekleyin.

/* SK-Notification */
.syv-bildirim {
color: #ffffff;
display: block;
font-size: 12px;
margin: 1em 0;
padding: 20px 20px 20px 90px;
position: relative;
}

.syv-bildirim span.icon {
height: 32px;
left: 20px;
position: absolute;
top: 15px;
width: 32px;
}


.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; }
.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; }

.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; }
.bildirim-onay span.icon { background: url("http://2.bp.blogspot.com/-628iEEBLhjg/UOm8-CWA1bI/AAAAAAAAFjk/h2OXT7mR3A0/s1600/success-icon.png") no-repeat top left; }

.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; }
.bildirim-info span.icon { background: url("http://3.bp.blogspot.com/-Zy9arKGoEvw/UOm88i5gCnI/AAAAAAAAFjQ/vGVlf8RGqQ4/s1600/info-icon.png") no-repeat top left; }

.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;}
.bildirim-uyari span.icon { background: url("http://4.bp.blogspot.com/-nDo3zzQ9HkE/UOm87BPNHmI/AAAAAAAAFjA/w2F5CZ86kwU/s1600/alert-icon.png") no-repeat top left; }

.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; }
.bildirim-standard span.icon { background: url("http://4.bp.blogspot.com/-Rl8mHzeWsrI/UOm89YnKXmI/AAAAAAAAFjs/k9lUM-_HPws/s1600/standard-icon.png") no-repeat top left; }


/* TABBED CONTENT */

.syvtabmenu {
background: #f1f1f1;
border: 1px solid #e1e1e1;
margin: 35px 0 2em 0;
padding: 10px 10px 0 10px;
position: relative;
}

.syvtabmenu .tabmenu {
list-style: none;
margin: 0 0 0 0 !important;
padding: 0 !important;
}

.syvtabmenu .tabmenu li {
background: #ffffff;
padding: 20px 20px 20px 20px;
margin: 0 0 10px 0;
display: none;
}

.syvtabmenu .tabmenu li p {
margin: 0 0 1em 0;
}

.syvtabmenu .tabmenu li.current {
display: block;
}

.syvtabmenu .tablar {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
position: absolute;
top: -33px;
left: 13px;
}

.syvtabmenu .tablar li {
list-style: none !important;
background: #e5e5e5 !important;
border: 1px solid #e1e1e1;
border-bottom: none;
text-shadow: 0 1px 0 #ffffff;
cursor: pointer;
float: left;
font: bold 12px/32px Arial, Helvetica, sans-serif;
color: #999999 !important;
padding: 0 20px!important;
margin: 0 3px 0 0!important;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

.syvtabmenu .tablar li.current {
background: #f1f1f1 !important;
color: #666666 !important;
}



Kodu ekledikten sonra sitenin istediğiniz biryerine veya konu içinde göstermek istediğiniz duyuru modülünü aşağıdan seçin ve istediğiniz yere ekleyin.

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

Demo Görüntü

Bu standart bildirim kutusudur.eklentiblogger.blogspot.com
Bu bildirim onaylama kutusudur.eklentiblogger.blogspot.com
Bu hata bildirim kutusudur.eklentiblogger.blogspot.com
Bu info bildirim kutusudur.eklentiblogger.blogspot.com
Bu uyarı bildirim kutusudur.eklentiblogger.blogspot.com
Google+'da Paylaş

Yazar Taktik Ver

Yazar Hakkında bilgi yazılacak
    Blogger Yorumları

0 yorum:

Yorum Gönder

Argo içerilikli yorum attığınız taktirde hakkınızda dava açılır, site adresinizi yoruma attığınız taktirde ise bloğunuz google sıralamasından düşer.