Blogger Harika Bir Duyuru Panosu !

Blooger yazımda bu konumda bizlere lazım olabilecek bir yazı paylasmak istedim bu yazıda duyuru panosu hakkında kodlar öğreneceğiz. Duyuru panolarında herhangi bir iletinizi veya mesajınızı paylasabilirsiniz.Bu duyuru panosunu yazılarınızın üst kısmına koymanızı tavsiye ederim oraya daha cok yakısıyor tabi sizin fikrinizede karısmak isteme isterseniz hemen anlatıma gecelim.

Blogger Soblonumuzu Acıp Asağıdaki Kodu Aratıyoruz.

</b:skin>

Yukarıdaki kodu bulduktan sonra hemen üstüne asağıdaki kodları ekleyelim. 

/* Dialog Kutuları
-------------------------------- */ 
.dialog h1 {
font-size: 18px;
font-weight: bold;
margin: 0px;
padding:8px 0px 0px 0px;
}
.dialog p {
margin: 0px;
font-size:12px;
padding-left:62px;
text-align:justify;
padding-right:5px
}
#center {
width: 590px;
}
.dialog {
font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 10px;
color:#ffffff;
margin-top:10px;
padding-bottom:5px;
}
.dialog .icon {
width: 34px;
height: 34px;
display: block;
margin: 12px 14px 0px 14px;
float:left;
}
.close {
display:block;
height:14px;
width:14px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GlEq1mqnsrMdHTWWi8rKADuxg__DnvulVl7xIxM4JqLdVWTnECWh2zYP_7-hBJwNNr1VBtmVL8QdVZ47LsVsONzrPyUamI4Pcd9I46BNxoTOjHNHpaDH2GHGqH9z0psV7SgOTApt-Gw/s1600/close.png') no-repeat;
position:relative;
float:right;
margin:5px 5px 0px 0px;
cursor:pointer;
}
.success {
background-color: #7f8f19;
background-image: -moz-linear-gradient(top, #93A11F 0%, #6E8114 100%);
background-image: linear-gradient(top, #93A11F 0%, #6E8114 100%);
background-image: -o-linear-gradient(top, #93A11F 0%, #6E8114 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #93A11F), color-stop(1, #6E8114));
background-image: -webkit-linear-gradient(top, #93A11F 0%, #6E8114 100%);
background-image: -ms-linear-gradient(top, #93A11F 0%, #6E8114 100%);
border-top: 1px solid #b9c22a;
}
.success .icon {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXdpoIDjo9MJPd7btuUHbSt8wpp17a-nXHDWbiu7rCmL_GqGn4DmAm5Xgp7yR-KdA2GEVRmBOLcOJQT4AhzZov7-4WSYdu1ka9Tq9Tl-yHxyJAOU52npD3SG-BwZZb9D1oIGaOMQAM9M/s1600/success.png') no-repeat;
}
.info {
background-color: #ffc800;
background-image: -moz-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
background-image: linear-gradient(top, #ffcc00 0%, #ffb500 100%);
background-image: -o-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffcc00), color-stop(1, #ffb500));
background-image: -webkit-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
background-image: -ms-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
border-top: 1px solid #ffe300;
color:#dd220d;
}
.info .icon {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_kUpgXnjViMt5X6DaiuiyGuk3bezZH1uz60IIOg1I26Lm4jiYpv2o-V-jGpPnEzP6qiVhu4DdJpUoEAi1H_ZLGamuA6HvRRiyvkyNZnIcz7oB_JBMV1ROgw_am3xmYZLPwZ3hMMNWdU/s1600/info.png') no-repeat;
}
.info p {
color:#000000;
}
.warning {
background-color: #d61c0b;
background-image: -moz-linear-gradient(top, #dc220d 0%, #d01609 100%);
background-image: linear-gradient(top, #dc220d 0%, #d01609 100%);
background-image: -o-linear-gradient(top, #dc220d 0%, #d01609 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dc220d), color-stop(1, #d01609));
background-image: -webkit-linear-gradient(top, #dc220d 0%, #d01609 100%);
background-image: -ms-linear-gradient(top, #dc220d 0%, #d01609 100%);
border-top: 1px solid #ee3314;
}
.warning .icon {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiDNufNPMgXCvd3jv89m-r0DfS4sw7uoyFJS5BL17pEO-4RJQ2_huo_-YxTUvQQpqaJE_AwZYPAt3FElngY-6-G6CuU4W35UMHG7VZ_yp7PMiO22ofg0LTwIY_FOlEbNLKC05Y0moY0o/s1600/warning.png') no-repeat;
}

Css kodlarımızıda eklemis olduk ve sıra duyuru panomuzun kodlarını vermeye geldi. Asağıdaki kodu blogunuzda temanızda istediğiniz bir bölüme yapıstırın. 

<div class='dialog info'>
<span class='close' id='info'/>
<span class='icon'/><h1>Duyuru Baslığı</h1>
<p>Buraya Eklemek İstediğiniz Yazıyı Yazınız</p>
</div>