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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztmziF3YRoY4QrD-i_uP1IGS5z9_KEIzgcZwXC_oxmxA0XVhC4uoWjppMCGESekQ2l-YFVgLDIBvfHF_mwtKA3zPADFigs7ZHzMA1bZBRbPVElfeFiuSp6QleqpAy02y5bC6pM1rKccU/s1600/error.gif") repeat-x top left; border: 1px solid #a01515; color:#660404; }<br />
.bildirim-hata span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZskpwezwdeH6O4yPeU4EONcZrQXIDSUXqedt3YZsZ0lc-yAhcMp8Zj89yeXjyxnB2UkS14FjO9QcCw3nTUZShJ_3en8cPpVkQr3RFtvuXQzdfe5uxNk90q7nSe9fvePFw5Nr13r3dmLo/s1600/error-icon.png") no-repeat top left; }<br />
<br />
.bildirim-onay { background: #6ba623 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBh3vp7p7FahfG3nPxaczIHjcjxketK3bViX5ZmZ519X3elJSthcM_L90r4BaIvBIx1WaSBRYKk912QBimLBRxB6S1lc_uyTAXZILSXtnb7nRl5EXckn4yq8UQtoc-pJXfu2JVCZ9UeU/s1600/success.gif") repeat-x top left; border: 1px solid #6e8a19; color: #405100; }<br />
.bildirim-onay span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CFwrl4oHHwYxYbmVG_ATg8P-rAoU1-8XqHyodJA1NoM8MwZ9THQeADVWl57UcG9uKJjtgEDDyZ6BtPTofLaHR2Ze6N_efNzS3vcL1go4sdFOZArtsx0l84qI2laG1WWhHRtfjEKCniY/s1600/success-icon.png") no-repeat top left; }<br />
<br />
.bildirim-info { background: #1d86af url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4q6SAy74UYic-jhUXu81PkMByol3UbOK7KepwuvR8u_gbW69boQPpqMczmuTII61VOcUYhDClk0byjZUmFZrKM1JfzAqrWZkkl76clkAsDeIdz3SAogK0KT0a65QRllQfFQZqP1-X3hg/s1600/info.gif") repeat-x top left; border: 1px solid #317d9b; color:#084752; }<br />
.bildirim-info span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4jVR7Y_q8CtoQ-lEv4se3MOWrP4FO9VZ_QmvPfQQcB4hELNfBylRP5u3jZ72bJ_1YjDOA-Xrvo7gv97zBKSG1MfOCHbOmbp4oilA3nu5xjKsYogAt7QbXiX2V7Lb8kepv1z-l4sU3UI/s1600/info-icon.png") no-repeat top left; }<br />
<br />
.bildirim-uyari { background: #e77414 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxxvumx7zKj0EMr9V6O-QvVyqH2734FrcEp94UlV6yB2HIDctZH__b9Yr7Vw-ZNlft476_5K0exKlrT7wbWVakp1w-oaDmzfFag6k9Qspz90GT2zeIefXUXnuuZ_HSrEP2VGr0Fny0ts/s1600/alert.gif") repeat-x top left; border: 1px solid #be7125; color:#7e5700;}<br />
.bildirim-uyari span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITa4mBowb8_14FKQtSYns-_FCQtrd4YdrDZxc1hYspzGSsLAvhOKqF6NgxJmMypIwJnpSlDiFTPIi-tCEgKv3lcvly5-C2iFWtWgGIs-r8l6WsaRY3LnRSal5_mPDiYQ8_JQLK_kyRkY/s1600/alert-icon.png") no-repeat top left; }<br />
<br />
.bildirim-standard { background: #d7d7d7 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgox7qhCG5P35C8npXxmXD8QEFhMEKShlUAL2LPj4eBC4rCtaY-L8bm_qhyVbUS-YquvNunnnhzshZMO_3G4YvOhYvMgK03EMrpEKEdJePMh_tqLI5qpOJzdTpgZqLOuK1_F7sMfl-BjnA/s1600/standard.gif") repeat-x top left; border: 1px solid #bababa; color: #464646 !important; }<br />
.bildirim-standard span.icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQsrmjct-i8EEKw0C2pBgVJnCuivR15Cxumyjt-wHOqKj9Dr9OYgh2ySnYW3c3GgS9FQ-Jqw6zAohNkX5qZbTFHkGuTMmygfUvOWcfZJ6JbX7zB4w2Bhv0ByncfNmT77kNYREZNYpGEU/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 />