 |
| Blogger Uyarı Satırı Oluşturmak |
Blogger Dersleri kategorisinde daha önce farklı tipte bir uyarı satırı kod dizini paylaşmıştım. CSS3 ile Blogger Uyarı Satırı Oluşturmak >> . Aramalardan gelen ziyaretçilerden ve teşekkür mesajlarından anladığım kadarı ile blogcular arasında uyarı satırı kullanmak isteyenlerin sayısı bir hayli fazla. Bu sebeple sizlere farklı tipte bir uyarı satırı örneği sunmak istiyorum.
Belli satırlara dikkat çekmek ve blogunuza renk katmak için kullanabileceğiniz resimli uyarı kodlarının demolarını hemen size sunarak, konuştuğumuz konu hakkında bilgi sahibi olalım :
Blogger Renkli Uyarı Satırı Demo :
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo
Gelelim Kodları Uyarı Satırlarını Nasıl Oluşturabileceğimize
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.
.TWwarn{background:#FFF2F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikj-N5QuCvjC_yjxdMmgX3IRYc35XrsQe7agqmeKSmk7Sd_sDl2MQAx_ayacU9RkhWg4bm1JMLO7VPoco510fxc792St5u7Pk7F9fRs-8OlgmEltUsmT22qT9OtmX8QJz7qIpoxQWeQ-Q/s1600/nraw2.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #BE0000; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWynotic{background:#fafbca url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtgwjZCAi9UbomlHhn3PZNUqnDppx_qDiwhCc3fCv6HtUjByoR0UCB-c8auWraZCTXd9vjyXEHkQWqVa8TZM1yxjUmSjXfG7GAYfcH-sIAJ2wTdPX2j0gdZWynG0S0l9Cv1xqCr4kAzYYy/s1600/yellowalert.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #e7ea03; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWgift{background:#ddeffb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoWS_I2F7p09fpxufP41qPKp7lcqciwOmU0Vf8DmUKUMAa0BdFvlPJxua95djn0Jgg1BkA2SuUNl0m_Hyp8JA-4dwxp8gVROoo_Oe2nw7OBOL71PkppJpPbCD7uQjy9n8kphMor9S1_AD1/s1600/gift.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #32a9fc; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWnoticgreen{background:#dcf9bc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSdZMsLUzbfYoSyVRmrYWBfoRNZWUabxFsdiwKeZki4iXxmjJBZowYeIZeHqDuyChRbDJOwJ11blMp0eFmZUpqUAFA_XZymQSWd63QWeFdNmUHEHPYhRQBhAAOkh-d8Am-eblQUhf7mTC5/s1600/announcement-icon.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #7dc945; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWHEART{background:#fbd3d9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTosLMibD1os0JsMnwG43fCOnGztOzrxoN1dX4bPSGfCnm25F7gbNGNSqImA4BY_7cZcIg7ETAg5fpGTUe7zJzDLGbRgMlaT4ZXTgw5aWCELCLkgPd_8ncE8F6PzCCtt8_HyEII5y4PdRq/s1600/heart.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #fe3a5a; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWpin{background:#f4dbf3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqJYW8g_47Yx8HuWimqh1Bk-QX4Y1XFXqJrB8Bb9Vkj7kX1d7ZcB_oW37kifBW3ySOqSMVg_Nd48eVCTjCsSekVSAVkFUJqlLtbK91CgOcJyFw3SnYIA0vGNxHlhkzK_aFPKy9xlCp9OEY/s1600/twpin.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #fb37e2; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .TWywarn{background:#e3f0f2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OQzeOsyxNvz1BlA_eFg9MmbuwlOO4DGXaPbBmSglpLNGjusFEIIAhsIkgxofTX4JD7dKQvJpcaxxAXGyLNBB49YuH7ohjs_fUY_dbRZpeSUGlW_PM3392_tnoGVWBZjDCLHV4YAobYQn/s1600/write.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #66cccc; background-position:7px 50%; padding:10px 10px 10px 45px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
3 ) Şablonu kaydet diyerek işlemi tamamlıyoruz.
Yayınlarda uyarı satırlarını oluşturma için ise ufak div kodlarından faydalanacağız. İstediğiniz uyarı satırını kullanmak için yayın yaparken HTML bölümüne geçerek div kodları eklemeniz yeterli.
Ünlem İşaretli Tabela :
<div class="TWwarn">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Raptiyeli ( Tam Emin Değilin O Raptiye mi :) ) Uyarı Satırı:
<div class="TWpin">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Ünlemli Sarı Tabela Uyarı Satırı :
<div class="TWynotic">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Kalpli Uyarı Satırı :
div class="TWHEART">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Megafonlu Uyarı Satırı :
<div class="TWnoticgreen">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Kalemli Satır Kodu :
<div class="TWywarn">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Hediye Paketli Satır Kodu Megafonlu Uyarı Satırı:
<div class="TWgift">
<b>Blogger Dersleri Uyarı Satırı Demo - Blogger Dersleri Uyarı Satırı Demo</b></div>
Yorum Gönder