Blogger Duyuru Bölümü Ekleme

Merhaba Blog Yılmaz okuyucuları bugün sizlerle Bir çok blogcu arkadaşının aradığı bir kod paylaşacağız bu kod sayesinde blogger sınırlarını biraz olsada aşacaksınız .Verdiğimiz kod sayesinde Blogunuzda bir duyuru yapacağınız zaman belirli bir alan oluşacaktır benim verdiğim CSS kodlarını düzenleyip kendi temanıza uyarlıyabilirsiniz. Artık kuruluma geçelim ilk olarak Şablonuzdan Aşağıdaki kodu
bulun

</head>

Ardında Onun Üstüne aşağıdaki kodları ekleyin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('.close').click(function() {
closeid = $(this).attr('id');
$('.'+closeid).hide('slow', 0);
});

});
</script>

Bu kodları ekledikten sonra şimdi css kodlarını ekliyelim

İlk olarak temamızda aşagıdaki kodu bulalım

</b:skin>

Ardından aşağıdaki kodları hemen üzerine ekliyelim..

.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/AVvXsEiH1hkYKwfA-xDPxWXCQbNrfgxty4y_BGi6dH7UBOUpf5O5gtEMo77YDg0IAbRvaR3v6ExIeYJiTSZfZYu_7VNJEOGJ2UwQiAfofsRAZCPXaNoOpilr08Q5LJ2AQgL4WU-KVDdZODyJwXs/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/AVvXsEhE81o8BZE7RMrFurvknHF6q51tTAO0FHcl2aLt3p3PEaUdwS1RzkM64-k8P4BqTqsE1qHR2fiWgpmtLYDS6VtpxXX26N0-adlwcDQarNN8tMnOqwPNHh9dJ84Yz7ZzLVvmNcsYbKnswaA/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/AVvXsEiUDvdQwOQm7r0AjaZQO1vxbaN4UtSzGqQjjP5odv9J172HCguMP4UqmGy9D60uHrFP-0h5oTUn8smThjSraSL2TZ0p5kYj9d8075rUWbr11OUGlzRbF0kWaQB9464hIb6nWcomGf4izn0/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/AVvXsEgEVf30N4avDh3I_fxr-XQ9u4PWJIgBo7YxWCP6tB2XcyXUkd-5r0F1N5IvElAHAWwIjYBaTzutbXBdfn5gVIrtPUukhuiO52-vN-jzddk3sPBTKqQLZ20Z3IyAURcW2UIhiGYGnmDe_oE/s1600/warning.png') no-repeat; }

Ardından duyuru bölümüzün nerede gözükmesini istiyorsak aşağıdaki kodu oraya ekliyelim

<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>

Yapamıyan Arkadaş olursa buradan belirtebilir