Ş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/AVvXsEgOAIhpUG7NDo6tXwOfHQ2dWk9PIc4TDWmlvxdHcDKGZEz1xZ69qLaBPXJ0aFQXtgQCrl-j3mHjn5onbiN2lhy5iMrGNpdiFVW2XQYSzvrjZirjFVuvmxpUuRkowuCQBat9BWZxqHLw8OU/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/AVvXsEg2PfHLpj8mm1GKeEXvblt3LAl0J4i9vdDGjATRNbIwNmASjbx1oEb9ev8vTPhnjT6kfy4yD6aSfBX_1bM5jF1tmj3XhuLrbaUuDgilTyWBvXxC5jGvuC3QddprWZoRtryndMSOlzFVWn0/s1600/error-icon.png") no-repeat top left; }
.bildirim-onay { background: #6ba623 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACi9JIaqC43qmIKqfi-G39vaEbhnsn0tQ9Abt-E2cdEohsA0mIlIt2y4_bhR_rNDFo_Ae1xesg9krIOz_kNYD80PBLesVHCOwtaOtbP7e_P9rU_9C1XwZYh4BlQ8IwaKfUGiduouEVrc/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/AVvXsEi75fUC08tvUo1gNFU9kmP4syCgDrBa6F42IuBxFMMjWoAP0B5m7XBOXc-xKlzTfJfQRW2ZvuDL4CjBlKAWoVVPKy_e1GurM2TVj_aVVdjHhXNR2Snk3133o251plKuKnZceKZbdZ1KB24/s1600/success-icon.png") no-repeat top left; }
.bildirim-info { background: #1d86af url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPPYIfBB-Vc0vLW0ORJtzM7Yl5k_Bv2260CDREQiuZmLn32Chj2yRfXlLGwmj1pGM7HwuVZBR1yA65MDU28suKelXhL_ARq376IO29WJyxxPaut8fY2ZaITmX8o450oNE0C3WyKTqX5U/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/AVvXsEiloiDKOpKNnlQpTr-mCdMCWOs2l7Blpi8wic3zALc5ed7sNVZiVNsDtaDR9_gek47bn1hxZdLGHE9l7yrs0F6zmBk3TzunVQJjsjzQ1VA5NHQL8lM793BxbNjyM5AipFapydV0MJ6in80/s1600/info-icon.png") no-repeat top left; }
.bildirim-uyari { background: #e77414 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCednglfI6xdhFtDzNcKHVFSzs643qEQlzFifULmWHuD_weMWtBhAygRdrHBPwE40MzlBpo2pskRf72ETpeu2ptjJHtL_yLdaI8brF5ioczUYV2OnD482rPGKvr7w2jzmHvQwY4kQ4rLA/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/AVvXsEjISwk-xzoh1OW0w0HcxhHDNgGe8sPgsevRzoNyL6sV45uOYakyNDVwQMMRREpFLSpHQZ09I7-nmOjb3qbREEQZtRR1tFXBRmwR6EGD7dgIIS8jL9Kqm5fezCrJGbxjxd8poCQo-KPg6rg/s1600/alert-icon.png") no-repeat top left; }
.bildirim-standard { background: #d7d7d7 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgIEc3af95vyKdlyi5suub8-1ePbTGrmWQe-fTXkazQ1joL-G_d5fCs5n0jKKtccj11z4fAJeYpB7McAt85dUu2pyS-RjENg1WFPhkt_oGVAx3c3OKXJWKrSTeQhaNnivoNJ2Vj7MqMF0/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/AVvXsEjYm7vlk3MhPfo4qk5cpWdc2LgRgl6m9p59XYArGv-Zixlyoa_hrRxfce4qrypzb2plIQ2vkBJWhadSGpLqcxg3uKFHcC8InrF1dyxPFutEe7MfF_14cc-Oj9LGLgR01KuurFc6_pF-8mI/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
0 yorum:
Yorum Gönder
yorumunuzu buraya yazabilirsiniz