Css bilgilendirme kutusu yapımı

Bu şekilde basit kod yapılarıyla oluşturulan kutuları çok seviyorum. Hem istediğim gibi değiştirip blogumda kullanabiliyorum hemde kod bilgimi geliştiriyorum.

Bu yazımda sizlere blog yazılarınızda veya tasarımınızın istediğiniz herhangi bir yerinde not şeklinde ekleyebileceğiniz kodlar göstereceğim.

Aslında not belirtmek dışında farklı şeyler için de kullanılabilir ancak temel olarak biz not diyoruz siz istediğinizi diyebilirsiniz :)

Demo

Blogunuza uygulayabilirsiniz.

Peki ben bu not özelliğini yazılarımda nasıl kullanabilirim?

Öncelikle Blogger.com'u yeni arayüzle açın ve oradan Blog Adı --> Şablon --> Html'yi Düzenle (Widget şablonlarını genişlet) dedikten sonra aşağıdaki kodu Ctrl + F komutu ile aratarak bulun.

]]></b:skin>

Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıda verdiğim kodu ekleyin.

.not {
background: #eeeeee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ejqMa9Y3xiZGcoQpiKhJa1G5q7pfjr3uZrWqPi1zJhpzR-YoYzamAjwfowaQDc3E4A87BbG8s-_JOfLxp64O4LNxFX3IFrqxoR6MUwb3MmPd0w8czRGrm1Zs4IvEQm0FYk_ZfsxEby0/s1600/notebook.png) center no-repeat;
margin: 0 auto;
width:90%;
display: block;
border: 1px solid #ddd;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font: bold 15px verdana;
}

Ve kaydedip çıkın.

Daha sonrada not özelliğini kullanmak istediğiniz kısma aşağıdaki kodları ekleyin.

<span class="not">Blogunuza uygulayın</span>

Tamamdır.

"Ben bu kodları temaya eklemek istemiyorum zaten her yazımda da kullanmıyorum kod kalabalığı yaratmasın" diyorsanız;
O zaman kodları tam olarak aşağıdaki gibi kullanabilirsiniz.

<style>
.not {
background: #eeeeee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ejqMa9Y3xiZGcoQpiKhJa1G5q7pfjr3uZrWqPi1zJhpzR-YoYzamAjwfowaQDc3E4A87BbG8s-_JOfLxp64O4LNxFX3IFrqxoR6MUwb3MmPd0w8czRGrm1Zs4IvEQm0FYk_ZfsxEby0/s1600/notebook.png) center no-repeat;
margin: 0 auto;
width:90%;
display: block;
border: 1px solid #ddd;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font: bold 15px verdana;
}
</style> <span class="not">Blogunuza uygulayın</span>