20.8.13

Blog Öğreticileri#1: Post Divider

Evet, uzun zamandır bir takım işlerimden dolayı blog derslerime başlayamadım ama nihayetinde sizler için kolay bir dersle öğreticilerime başlamaya karar verdim. İlk dersimizde sizlere blog konu ayıracı nasıl eklenir onu öğreteceğim ve birkaç tanede kendi yaptığım ayracı size sunacağım. Derse başlayalım mı?
Evet, hadi başlayalım!

Bir post Divider'i (İngilizce adıyla yazıyorum ki benim yaptıklarımı beğenmezseniz internette rahatça arayıp yenilerini bulun diye.) bloğunuza eklemek için sırasıyla şu şekilde ilerlemelisiniz.

Kumanda Paneli > Şablon > Html Düzenle 

Bunları yaptıktan sonra karşınıza bir takım kodlar çıkacak ve acaba benim verdiğim kodu nereye eklesem diye düşüneceksiniz. Buraya dikkat! Fazla düşünmeyin ve önce kodların bulunduğu kutuya bir kere tıklayıp "Ctrl" ve "f" tuşuna aynı anda basın. Böylelikle karşınıza kodların bulunduğu kutunun hemen sağ üst köşesinde küçük başka bir kod çıkacak. Eğer o kısma aşağıdaki kodu yazıp Enter tuşunu yazarsanız anında kodu bulabilirsiniz.

Kod: ]]></b:skin>

Kodu bulduktan sonra hemen üstüne ise bu kodu ekleyin:

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(RESİM URL);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;

}

RESİM URL yazan kısıma beğendiğiniz ayracın URL'sini yapıştırıp kaydet diyebilirsiniz. 

Resmin Urlsini almak için: resmin üzerine gelin > sağ tıklayın > Resim URL kopyala diyin. 

Bunlarda size sunduğum Post Divider'lar:







Başka bir derste görüşmek dileğiyle.  Hoşçakalın. Güle Güle kullanın.

DİKKAT!: Blog dersleri hakkında bir şeyler öğrenip gerçekten blogunuzu renklendirmek istiyorsanız mutlaka ]]></b:skin> kodunu ezberleyin. Zira blog Html ve CSS kodlarının %90'ı bu kodun hemen üzerine eklenir. Ezberledikten sonra Ctrl+F uzantısyla açılan kutuya kısa bir biçimde " ]] " yazarakta bu kodu aratabilirsiniz.

1 yorum: