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.

Demo Görüntüsü

Ş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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0THqOn66L4OZ6_n1uyTX9lSefzDLQ97uru7LnEPLtQx4DtYhqlZyrODiibdJQZ0t5iG-4E0Gm_UeP5WjZKmALMolmJr8b53oDteIQxNjGrTa1x7c9YsaiWjH03c8Vjzmw928OgKF0xE/s1600/error.gif") repeat-x top left; border: 1px solid #a01515; color:#660404; }
.bildirim-hata span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWRJrN8fvP7JvZ__S5Qvut0PSogKHg_JxAks2daPz1e0FR1uzzGpniV3epcHTp4G5MFkHmmEiW8rGXo8ti7B3l8j31PdfWBpZVed7rnUjPkKqcLIkpOv1tM5DLIa2X-cHo1YCacHVojs/s1600/error-icon.png") no-repeat top left; }
 
.bildirim-onay { background: #6ba623 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZPQ4VCRQAQU6Kesfpx9pnL4KlX7M7fXwKHPSdEFsyU6rg7pjm0mxi8jlWJYSkio9uG6w3bD41TFiAO9M2E2RbEyTpj0tA3l84TzE1rdGsNUIIe9xtU8jk7xJ9_UjROs2oASW7tRQ9Pk/s1600/success.gif") repeat-x top left; border: 1px solid #6e8a19; color: #405100; }
.bildirim-onay span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxdSHAav6sCHesN23y_JAMPbV9JnWYETokNz1jjEFpe3TbghDbOKyDSJhuaYXR5hb5EG0keRHovMIy7NUIyqdtSN7YvfGjUOtb2Pn-AZDyDmAVEGbfQScTaEtlDpMtvltmSu2bRuELpw/s1600/success-icon.png") no-repeat top left; }
 
.bildirim-info { background: #1d86af url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTyPHAoZl6GqosKWwNSg203_YCB8VA5Dbbaeme2LZdIgT7QD5ggv-EfiPOS4gH-acvEbSnG3km3MKYTkuO_vcjBA7tHd1DatvcWAKN5mcyG2I92wM89i2WDBN24ZbQEr5K2oQaQhC9dw/s1600/info.gif") repeat-x top left; border: 1px solid #317d9b; color:#084752; }
.bildirim-info span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3JaJ7zuhB9Bz2uu98bu2WUhGAx4CGya-SKTEhYwonT2kEY1_F7tJBXLXtcd9CUXawAxjHsbntWrweYf5CUrxYq4c7twHbCkNJjTgxvG-TMPymZtGcrkyZjNwdi7ULyHN7-bGywt4cpc/s1600/info-icon.png") no-repeat top left; }
 
.bildirim-uyari { background: #e77414 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xJ4euzmmgX_a3_rsZl6S8IVFC1Cjr0V-BSP_70lQoLJq2SUYy9Frs0YzLfaqDpwUygJfaXM3q9iHkEH6JnmCQEWj1W-euakS_Gry6_Q5vlsAdWDX8D7f0LCi8iR1hXBQ6JZGqCca6mE/s1600/alert.gif") repeat-x top left; border: 1px solid #be7125; color:#7e5700;}
.bildirim-uyari span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihq00i6ec8JeCWCHJhZEHkwPYAoDT8_7t5TIAoJZKplVw3Jf4K4a6XKy8ExVnAEvoqj2KGRABBqQx7v7NKwABndKvoseRljZrxCchMaHcAn9Idn3MmEG1rq07KlSuioATQrhexK3bZF9Y/s1600/alert-icon.png") no-repeat top left; }
 
.bildirim-standard { background: #d7d7d7 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQERHCP9DjpITit4DC-gId64GHJuiFXgo1NHs7Hb3Lgr1m4HwWKWBthJXIECWiXfCPsslPRRfPBsGKNirp5fHQCJN-lj86Jt4IsNwwDKYJQxOLm4f2Sq0n3doQUrU_1Q6jkjQdJQ1GHU/s1600/standard.gif") repeat-x top left; border: 1px solid #bababa; color: #464646 !important; }
.bildirim-standard span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16h5WtmoCgb4rWWFVYUQzUN0yHeNJoQfgv8-Gl3bnI4zK8jGIcnllawYuiUXpR1HRjMRfBDIxvMgfFqvNHormJugPYfwDh4mSh7-lFYg_pFs7sz1g9n5-8dIPfNPwzGdoogte68bIXRw/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>