OzzY SuNaR: HTML/HTML5

HTML/HTML5 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

26 Mayıs 2015 Salı

Numaralı Liste Nasıl Oluşturulur?

Daha Önce rastlamadığınız kesinlikle görmediğiniz bir eklentiyi boyutu sunuyoruz inşallah begenirsiniz ziyaretinde.
Numaralı Liste Nasıl Oluşturulur eklentisinin Özelliği hover efekti ile oluşturulan maddelerin Üzerine gelindiğinde resimde de gördüğünüz gibi ok işareti belirir de değiştiğini göreceksiniz renkinin ok işareti beliren Maddenin arka planı ettik.

Numaralı Liste Nasıl Oluşturulur? Sitemize nasıl ekleyebiliriz Blog?

* Kumanda Paneli> Şablon> HTML'yi düzenle sıralamasını takip ediyoruz.
* CTRL + F kısa yol tuşları ile altta ki kodu aratıyoruz.
1..

]]></b:skin>

Bazi temaların kodlama özelliğine göre degişiklik gösterebilir.Bunun için altta ki kodlardan birini aratarak arasına css kodlarını ekliyoruz.
2.

<style></style>kodları içine alıp  <head> ile </head> arasına ekleyebilirsiniz.

(]]></b:skin>) kodunu bulduktan sonra hemen üst kısmına altta ki kodları ekleyerek şablonu kaydedin.

CSS KODLARI:

/* BC61/KOM Kodlarla Mücadele Numaralı Liste
----------------------------------------------*/
ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F0F0F0;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#E6E6E6;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#7F8C8D;color:#fff;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#7F8C8D;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}

Kullanımı konusunda bilgi vereyim;

Oluştur kısmından makalenizi yazarken maddeler halinde olusturmak istediğiniz başlıkları alt alta yazıyorsunuz.
Daha sonra altta ki resimde yeşil 2 numaralı işaretli kısımdan numaralı liste seçeneğine tıklıyoruz.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

26 Ekim 2014 Pazar

Online CSS Araçları

Tasarım yaparken bize hız kazandıracak ve işimizi biraz daha kolaylaştıracak olan online CSS araçları yaptığımız işi kısa sürede bitirmemize yarayabilir.Üstelik CSS kodlama ile ilgili bilgisi olmayan site sahiplerine de oldukça yardımcı olacak bu araçlar sayesinde profesyonel olacak duruma gelebileceksiniz.
Bazen benimde kullandığım bu uygulamalar yardımı ile işlemlerimi kolayca yapabiliyorum.Şimdi size aşağıda online CSS araçlarından bazılarını gösterecem.

border-radius.com

Css yuvarlak kenarları destekleyen tarayıcıların tümünde çalışan css kodunu üretir.

css3.me

Destekleyen bütün tarayıcılarda çalışan yuvarlak kenarlar, gölge, gradient arka plan efektlerini veren css kodunu üretir.

css3d.net

Resimde gördüğünüz şekilleri oluşturan html ve css kodlarını üretir.Bütün tarayıcılar ile uyumludur.

css3maker.com

Css3 ile gelen bir çok özelliğin destekleyen tüm tarayıcılarla uyumlu css kodunu üretir

css3.mikeplate.com

Yine aynı şeklilde Css3 ile gelen bir çok özelliği destekleyen tüm tarayıcılarla uyumlu css kodunu üretir.

cssdesk.com

Bu aracımız ise online css editörü görevini görmektedir. Aynı anda hem html hemde css kodunu yazarken değişimleri yan panelde takip edebiliyorsunuz.

cssprefixer.appspot.com

Slogandan da anlaşılacağı üzere sizin yazmış olduğunuz css kodun tüm tarayıcılarda çalışan versiyonunu oluşturur.

website-performance.org

Yine css sprite tekniği ile kullandığınız resimleri birleştirmenizi sağlayan bir site. css-sprit.es den farklı olarak resimleri rar veya zip dosyası içerisinde upload etmemiz gerekiyor.

csstypeset.com

Siteniz için uygun yazı fontları ve renklerini deneyip css kodunu bu siteden edinebilirsiniz.

gradients.glrzad.com

Css ile gradient arka planlar oluşturup css kodunu sizin için oluşturur.

layerstyles.org

Arayüzü photosop programını andıran sitede, arka planlar oluşturabilirsiniz.

cssprism.com

Url'sini vermiş olduğunuz css dosyası içerisindeki css kodunda kullanılan bütün renkleri bulur. Bu renkleri değiştirebilir ve değişim sonucunda oluşan yeni css dosyasını indirebilirsiniz.

CSS3 Linear Gradient Button

Siteniz için kullanılabilecek gelişmiş CSS3 buton kod oluşturucu.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

Kategorilerimizi Animasyonlu Açılır Menü İle Listelemek

Kategorilerimizi listelemek için bazen açılır menülere ihtiyaç duyabiliriz. Örneğin kullanıcının seçtiği bir kategoriye göre ajax ile o kategoriye ait bilgileri ekrana yazdırdığınızı düşünürsek, kategorilerinizi açılır bir menü ile listelemek en iyi yollardan biridir.

Açılır menümüzü yaparken jquery ve css kullanacağız.

Kategorilerimizi "kategori-menu" adlı class'a sahip liste içerisinde listeleyeceğiz. Seçilen kategoriyi kullanıcıya "secili-kategori" class'a sahip a etiketi içerisinde göstereceğiz.

.icerik{
 margin: 80px auto;
 width: 200px;
 text-align: left;
}
.secili-kategori {
 background: url(ok.jpg) no-repeat right;
 background-color: #0166FF;
 border:1px solid #222222;
 display:block;
 font-size:14px;
 font-weight: bold;
 padding:5px 5px 5px 8px;
 position:relative;
 text-shadow:1px 1px 1px #CCCCCC;
 width:195px;
 color: #000;
 text-decoration: none;
}

.kategori-menu {
 background-color: #222222;
 display:none;
 width:198px;
 border: 1px solid #222222;
 position: absolute;
 padding: 5px;
 overflow: hidden;
}

.kategori-menu li {
 list-style-type: none;
}

.kategori-menu li a {
 color:#FFFFFF !important;
 text-decoration:none;
 padding:5px 5px 7px 5px;
 display:block;
 text-shadow:1px 1px 1px #fff;
}

.kategori-menu li a:hover {
 background-color: #0166FF;
}

Css kodumuz içerisinde dikkat etmemiz gereken iki nokta var. İlk olarak "kategori-menu" adlı class'a sahip listemizi "display:none;" ile gizliyoruz ve "position:absolute;" ile konumunu sabitliyoruz bu şekilde listemiz açılırken diğer etiketlerin konumunu bozmayacaktır.

$(function () {
        //secili-kategori class'ına sahip linke tıklarsa listeyi görünür yap
 $('a.secili-kategori').click(function () {
  $('ul.kategori-menu').slideToggle('medium');
  return false;
 });

        //Listemizde bulunan kategorilere tıklandığında
        //"secili-kategori" adlı class'a sahip linkin textini seçilen kategorinin adı yap
 $("ul.kategori-menu li a").click(function() {
  var text = $(this).html();
  $(".secili-kategori").html(text);
  $("ul.kategori-menu").slideUp();

  return false;
 });

        //Ekranda herhangi bir yere tıklandığında listemizi gizle
 $(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (! $clicked.parents().hasClass(".kategori-menu"))
   $("ul.kategori-menu").slideUp();
 });
});

Menü içerisinde kullandığınız başlıklara ait ekleyecek olduğunuz linkleri açmak için Jquery kodları içerisinde yer retun false; kodunu silmeniz gerekiyor.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

11 Ekim 2014 Cumartesi

Font Awesome Nedir? Nasıl Kullanılır

Font Awesome Web siteleri ve Blog sitelerinde yazıların içerisinde veya ana sayfalarda oluşturulan menülere küçük simgeler ekleyerek daha belirgin ilgi çekici özellik sağlayan bir ücretsiz fonttur.Font Awesome kullanımı oldukça basittir,eğer Blogger siteniz varsa ve kısa süreli aralıklarda şablon değişikliği yapıyorsanız bu font belirli zaman sonra düzgün çalışmayabilir bunu unutmamak gerekir.

Web sitelerinde yazılan makalelerde de görmüş olduğunuz kadarı ile Font Awesome kullanılarak küçük iconlarla sitenizi şenlendirmek isterseniz yapılacak işlemleri aşağıdan takip ederek sahip olabilirsiniz.

Font Awesome Kurulumu :

1. Font Awesome Blogger sitelerinde çalışabilmesi için önce blog sitenize Font Awesome javascript kodunu ekleminiz gerekmektedir.Bu işlemi yapmak için Kumanda Paneli/Şablon/HTML Düzenle yolunu izliyoruz.
2. Daha sonra CTRL+F tuşları ile <head> kodunu aratıyoruz.
3. Bulmuş olduğunuz <head> kodunun hemen altına aşağıda ki kodu ekleyerek şablonu kaydedip çıkın.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet">

4. Bu işlem bittik den sonra artık Blog sitenizde yazılarınız içerisine istediğiniz simgeyi ekleyebilirsiniz.

Font Awesome Kullanımı:

Font Awesome Blog sitenizde kullanabilmek için önce bir kod kalıbına ihtiyacımız var.Şimdi yapılacak olan adımlar sırası ile aşağıdan takip ederek uygulayın.

1. Öncelikle yazılarımızın içerisinde Font Awesome iconlarını kullanabilmek ve çalışması için bize gerekli olan bir kod kalıbıdır.
2. Blogger yazı yazarken HTML kısmına tıklayarak altta ki kodu ekleyin ve yazınıza oluştur kısmından devam edin.

<i class="icon-cloud-download icon-large"></i>

3. Kırmızı renkli kısıma istediğiniz icon kodunu eklerseniz o icon yazınızda görünecektir.
4. Eğer iconun sağ tarafında ki kısıma yazı eklemek için yapacak olduğumuz işlem şöyledir.

<i class="icon-chevron-right icon-large">Buraya yazınızı yazın...</i>

5. Eğer iconlara animasyon vermek istiyorsanız o zaman üstteki kodun sonuna icon-spin kodunu eklememiz yeterlidir.

<i class="icon-cloud-download icon-spin">Buraya yazınızı yazın...</i>

6. Icona border vermek için.(çerçeve ekleme)

<i class="icon-cloud-download icon-border"></i>

İcon kodlarını indirmek için buraya tıklayın.

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Font Awesome İconlara Yön Verme

Font Awesome iconlarına farklı özellikler ekleyerek Blogger sitenizde nasıl kullanılacağına bakacağız şimdi.Font Awesome iconlarına değişik yön vermek,kendi etrafında dönmek gibi bir çok işlem yapılabilir.:Biz bu yazımızda bunların bir kaçının nasıl yapılır onu görcez.

1. İcon boyutlandırma:
İconlara boyut eklemek için kod kalıbına icon large,2x,3x,4x gibi yardımcı ek kodlar eklersek böylece iconların boyutlarını büyütmemize yardımcı olur.
Kırmızı renkli bölümlerde gördüğünüz gibi,mavi renkli bölüme istediğiniz metni ekleyebilirsiniz.

<p><i class=" icon-user icon-large"></i> icon-user</p>
<p><i class=" icon-user icon-2x"></i> icon-user</p>
<p><i class=" icon-user icon-3x"></i> icon-user</p>
<p><i class=" icon-user icon-4x"></i> icon-user</p>

icon-user
icon-user
icon-user
icon-user

2. İconlara yön verme:
İstediğiniz icona istediğiniz kadar yön vererek kullanabilirsiniz.

<i class=" icon-camera"></i>  normal<br>
<i class=" icon-camera icon-rotate-90"></i>  90 derece <br>
<i class=" icon-camera icon-rotate-180"></i>  180 derece <br>
<i class=" icon-camera icon-rotate-270"></i>  270 derece <br>
<i class=" icon-camera icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-camera icon-flip-vertical"></i>  icon-flip-vertical

normal
90 derece
180 derece
270 derece
icon-flip-horizontal
icon-flip-vertical

3. İconları döndürme
İconları döndürmek için yapacak olduğunuz işlem şöyledir.

<p><i class=" icon-user icon-2x icon-spin"></i></p>
<p><i class=" icon-user icon-3x icon-spin"></i></p>
<p><i class=" icon-user icon-4x icon-spin"></i></p>

4. İconlara Link verme
Yazınız içerisine eklemiş olduğunuz icona link atamak için şu şekilde yapınız.

<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-facebook icon-2x"></i> ornek link 1  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-twitter icon-2x"></i> ornek link 2  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-google-plus-sign icon-2x"></i> ornek link 3  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-phone icon-2x"></i> ornek link 4  </a></li>

Bizi Takip Edin...

Pinterest>>Facebook>>Twitter

Blogumuza Abone Olun

Yeni Yazılar e-posta Adresinize Gelsin