teknoloji haberleri - internet haberleri: Blogger Tasarım

Blogger Tasarım etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

18 Ocak 2013 Cuma

CSS Filtre ile resimlere zoom efekti

Unknown 12:01 Blogger Tasarım Hiç yorum yok :

Bu yazımızda CSS’te filtre kodlarını kullanarak resimlere zoom efekti vereceğiz..
Yazılarıma yapılan yorumlarda, iletişim adresime gelen mesajlarda blogumda kullandığım, resimlerin üzerine gelince zoom efekti isteniyordu..
Bende siz değerli takipçilerimle paylaşmak istedim :)

Kodlara geçmeden önce şunu belirteyim, aşağıda verdiğim kodları Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.

.post-body img { 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
}
.post-body img:hover { 
-webkit-transform: scale(1.1); 
-moz-transform: scale(1.1); 
-o-transform: scale(1.1); 
transform: scale(1.1); 
}

3 Temmuz 2012 Salı

Blogger sabit üst çubuk (Çizgi) eklemek

Unknown 15:20 Blogger Tasarım Hiç yorum yok :

Merhaba arkadaşlar bugünkü anlatımımda blogger sabit üs çubuk (çizgi) eklemeyi anlatacağım
hemen uzatmadan anlatıma geçeyim

Aşağıdaki kodu ]]></b:skin> kodunun hemen üzerine ekleyin

 .top-bar
{
background:url(http://2.bp.blogspot.com/-zlHrt3BHsFw/T9n5XzLkcNI/AAAAAAAAEgk/MjYqDMkZMPo/s1600/top-bar.jpg) repeat-x ;
height:5px;
}

Daha sonra ise <body> etiketinin hemen altına ise şu kodları ekleyin ve kaydedin;
<div class="top-bar"></div>

2 Temmuz 2012 Pazartesi

Üzerine gelince arkasında renk beliren reklam alanı

Unknown 08:57 Blogger Tasarım Hiç yorum yok :

Merhaba arkadaşlar bugün size çok güzel bir reklam alanı kodlarını paylaşacağım.

Benim oldukça hoşuma giden üzerine gelince arkasında renkler beliren reklem alanıdır.

Resim ;

Uzatmadan Gelelim kodlara ;

<div class='widget-content'>
<center>
<style>
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.squarebanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.squarebanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.squarebanner ul li a img{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}
</style>  
<div class="squarebanner ">
<ul>
<li style="background: blue !important;">
<a href="http://yunusdeneme.blogspot.com/">
<img height="120" src="http://db.tt/hx2t6mLA" width="120" /></a></li>
<li style="background: dark orange !important;">
<a href="http://yunusdeneme.blogspot.com/">
<img height="120" src="http://db.tt/hx2t6mLA" width="120" /></a></li>
<li style="background: gray !important;">
<a href="http://yunusdeneme.blogspot.com/">
<img height="120" src="http://db.tt/hx2t6mLA" width="120" /></a></li>
<li style="background: red !important;">
<a href="http://yunusdeneme.blogspot.com/">
<img height="120" src="http://db.tt/hx2t6mLA" width="120" /></a></li>
</ul>
</div></center>
</div>

Kodun içerisindeki linkleri kendinize göre düzenleyiniz.Lütfen alıntı yaparken kaynak belirtmeyi unutmayınız..

22 Haziran 2012 Cuma

Css kod ile uyarı kodları ile mesaj kutusu yapımı

Unknown 11:03 Blogger Tasarım Hiç yorum yok :

Css kod ile uyarı kodları ile mesaj kutusu yapımı

Bu konu da CSS ile uyarı kodlarının yapımını anlatacağım sizlere... Aşağıdaki resimde de gördüğünüz gibi 4 çeşit kod seçeneği ve bunların nasıl kullanılacağına dair bilgilerivereceğim sizlere.

Kumanda Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını Genişlet yolunu takip ettikten sonra; CTRL+F yardımıyla aşağıdaki kodu buluyoruz

]]></b:skin>

Yukarıdaki kodu bulduktan hemen sonra hemen üstüne gelecek şekilde aşağıdaki kodları yapıştırıyoruz:

/* Bu CSS Dökümanı Bloglamazamani tarafından duzeltilmistir  */
body
{
    background-color:#f9f9f9;
    width:600px;
    padding:10px 0 0 0;
    margin:0 auto;
    font:12px/23px Tahoma, Geneva, sans-serif;
}
.logo
{
    margin:10px 0 20px 0;
    text-align:center;
}
.basarili
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglc36lvaM_UQxpl3h7tVESDt4iMbUJMgRj7lXfS_rc1nSFtaN_c1ygIW_aJ2-rEMvxEPBJAfv1Tlgj-Jz2rAyfeCRKH8eXx_D2C2TjhnEwe_q_UB9rYusqw2Px84KRHGzBRZSqk0wW3k0/s1600/buton-sprite.png) #eefec2 no-repeat left;
    background-position: left -11px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #badc5d;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.uyari
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglc36lvaM_UQxpl3h7tVESDt4iMbUJMgRj7lXfS_rc1nSFtaN_c1ygIW_aJ2-rEMvxEPBJAfv1Tlgj-Jz2rAyfeCRKH8eXx_D2C2TjhnEwe_q_UB9rYusqw2Px84KRHGzBRZSqk0wW3k0/s1600/buton-sprite.png) #ffe59d no-repeat left;
    background-position: left -89px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #c8b26f;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.hata
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglc36lvaM_UQxpl3h7tVESDt4iMbUJMgRj7lXfS_rc1nSFtaN_c1ygIW_aJ2-rEMvxEPBJAfv1Tlgj-Jz2rAyfeCRKH8eXx_D2C2TjhnEwe_q_UB9rYusqw2Px84KRHGzBRZSqk0wW3k0/s1600/buton-sprite.png) #fcd5d5 no-repeat left;
    background-position: left -159px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #a76464;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.bilgilendirme
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglc36lvaM_UQxpl3h7tVESDt4iMbUJMgRj7lXfS_rc1nSFtaN_c1ygIW_aJ2-rEMvxEPBJAfv1Tlgj-Jz2rAyfeCRKH8eXx_D2C2TjhnEwe_q_UB9rYusqw2Px84KRHGzBRZSqk0wW3k0/s1600/buton-sprite.png) #e9f1f4 no-repeat left;
    background-position: left -229px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #566a76;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}

Daha sonra Şablonu Kaydedip çıkıyor. CSS KODU hazır...
Şimdi gelelim nasıl kullanılacağına.

<div class="basarili">
BLOGLAMA ZAMANI onay kutusudur.</div>
<div class="hata">
BLOGLAMA ZAMANI hata  kutusudur.</div>
<div class="uyari">
BLOGLAMA ZAMANI uyari kutusudur.</div>
<div class="bilgilendirme">
BLOGLAMA ZAMANI bilgilendirme kutusudur.</div>

Yukarıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Yapamadığınız bir şeyler olursa YORUM kısmından belirtin.