Blogger Renkli Duyuru Eklentisi

Merhaba arkadaşlar sizlere bugün ki yazımızda Blogger Renkli Duyuru Eklentisi nasıl eklenir siteye bu işin işlem adımlarını sizlere anlatacağım.Bu eklenti sayesinde sitenizde öne çıkmasını istediğiniz yazınızı duyuru paylaşabilirsiniz.
İşlem Adımları:
1-Öncelikle şablon ayarları bölümüne giriniz.Ve ordan ]]></b:skin> bu kodu aratarak aşağıdaki kodu arattınız kodunun üstüne yapıştırınız arkadaşlar.Arama işlemini Ctrl+f tuşlarına basarak arama bölümünü  kod yerinden açabilirsiniz.

/* 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/AVvXsEhCPGZPEEMflWMAcYdIzPOBqTmx2hwRbkQ2OAcYcA-FpCdHe04yxj46ZF8Tq9zb0XhdZfIufF91PyH-IVT9MRmTq88OOHMUOlLmsUxAyn_KIf9Vk5Ev-6DzsUPlbYX2J4RugCFao_rt8ps/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/AVvXsEi6RRy7rqQYKHaLKzgWVeeCHZLkqQLWkP4O2g46k8n0u7ZuX5VIswRFdswItqgG5Ow2KK8DqUAd0BSHMpB4wbkJ8pOQ0qFdS5cm_jFom7CjzHuLvAmIofRuSc9wUVjTao9fBpvh3OeLhjg/s1600/error-icon.png") no-repeat top left; }
 
.bildirim-onay { background: #6ba623 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPJKHnDLITkEILPPHaSqQ6SAQn2M4lda4kjFSjw32q6LBjcwNXX22aT_UY3WSJTjoKdhAs3yzUmThltTX1S_xn-pLDC6g5-mfw8hqLYCPzmAeBiR71w8hcoadN0jD4I5ErZIMRZsdUA4/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/AVvXsEgtanRCwMuxYuefwgPKjAfB_D1W24nqRVzMTrujb0YOvpIOxvdFs3RRuZl5mluZQfxZMoK0yA1HqPXjt816bflRGnl2YEuZCGWoF5xkr1b6CO8TkX7mlaZ09AD0TFWY_Ly3ZirzoWvHjSw/s1600/success-icon.png") no-repeat top left; }
 
.bildirim-info { background: #1d86af url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDQTeat5ttLDrH85TkfH5hbJ8dX0ttSuOsz8ou6T9mpwHroIObCJjSt-D1pBgWFfMzkGL9sRjvsRnFmYupKMRHpPDmxxsTrOWfexcWPN06iBDDjYrLWMAX8q0t0HZ4nkAf2wW4mOhiUQ/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/AVvXsEjhuMA99br7F-63Q_FbjsNKheNnGFjjgzSmSS5fV_8qG9vTSfPjIzgC4CBCoVWQXw6l3hxb7I91Q5cB-htufZXg3TpZQiqqRDoV1pgeMvCi7kF1bc5Qhkp5nL0Dh72V_FtBOts6DLHnO_E/s1600/info-icon.png") no-repeat top left; }
 
.bildirim-uyari { background: #e77414 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCx8a2x6tr84yWr5DjulihDjwGtVMyxN8r4WKWnaAXqmVCHjpqZWoG_Tm1_t4c76I6qzl7PZolFaAgoc9KLWj2nnf7mdGAwCd-SSh7pY2GYcJC_XYWZ81xgnsyf_IsXxeqhjU6L0MY0tk/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/AVvXsEhsAHZ_U9bH4gbIcNob_7xGVPC-bHIbFClEcz4szy3yJgqjo4V6lHAMNWUNzzLqfja40rPRFSsw_99_u-FkWaml7__4Tx-zTQyu0jvNZ9PDq1un-x2nlTbSYfYfVu5-8FQ9Y-Z-DAV7fro/s1600/alert-icon.png") no-repeat top left; }
 
.bildirim-standard { background: #d7d7d7 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHoQdBa5V2oCgQLEF-yV4aKWEOK7NuqVYxDSW-qHlaYmIDX3ZOMJ3mJNWS4mqqZxXzINGp2TAMJ08aW3gH5CAPsr0HQPzbGWJSUEuGn5zqq5XpthNU-w9bC55Ss8w2yjsRiQ_V9a3UcxI/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/AVvXsEgEZBcAS81u7VxPRO3lnqhetw_RBWnD0UT9oP5Oh-5kXnBMy9CuG0ovWbLPKgRJ9jms1VcmImc_bCgYMbZj0D_vJ571_J3-TVDPhAv40NKk0mogCybuei8AGIYFroWsHvP8GVD9MFGzLxI/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 bir yerine 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>