- Home>
- Blog sitesi kurulumu , Blog Yol Haritası , Blogunu Kur , dinamik blogger >
- Dinamik Blog Menü Linklerine Ayırıcı Çizgi Ekleme
Posted by : Unknown
4 Nisan 2013 Perşembe
Blogger, Dinamik Blog menü linklerine, ayırıcı dikey çizgiler ekleyerek görünümünüzü değiştirebilirsiniz.Menü linklerini birbirinden ayıran kesme dikey çizgi eklemek için yapılması gereken işlemler nelerdir aşağıda inceleyelim.
BLOG'UMUZUN İLK GÖRÜNÜMÜ
→ Daha önceden eklenmiş CSS kodunuz varsa dikkatli bir şekilde aşağıya kaydırın
→ Aşağıdaki 1 no’lu kodu kopyalayın ve yapıştırın
→ ( }) Bu işaretin bitiminde entere tıklayın
→ Tekrar Blog’a uygula tıklayın
→ Blog’u görüntüleye tıklayın.
Blog menüsü sağ taraf da çizgi yoktur, diğerlerinde çizgi vardır.Aşağıdaki resmi inceleyelim.
DEMO GÖRÜNTÜ
CSS KOD NO : 1
Dikkat ederseniz son menüden sonra çizgi yoktur.
BLOG'UMUZUN İLK GÖRÜNÜMÜ
→ Blog girişi yapın
→ Şablon → Özelleştir → Gelişmiş → CSS Ekle tıklayın→ Daha önceden eklenmiş CSS kodunuz varsa dikkatli bir şekilde aşağıya kaydırın
→ Aşağıdaki 1 no’lu kodu kopyalayın ve yapıştırın
→ ( }) Bu işaretin bitiminde entere tıklayın
→ Tekrar Blog’a uygula tıklayın
→ Blog’u görüntüleye tıklayın.
Blog menüsü sağ taraf da çizgi yoktur, diğerlerinde çizgi vardır.Aşağıdaki resmi inceleyelim.
DEMO GÖRÜNTÜ
CSS KOD NO : 1
#header #pages:before{
border-left: 0px !important;
}
#header .tabs li, .ss{
margin-left:0px !important;
padding-left: 10px !important;
padding-right: 5px !important;
border-left: 1px solid white;
}
CSS KODUNU EKLEDİKTEN SONRAKİ GÖRÜNÜMÜDikkat ederseniz son menüden sonra çizgi yoktur.
Aşağıdaki kodu CSS kodumuza eklediğimizde menü linkimizin sağ tarafındada çizgiyi elde edeceğiz.Bunu yapmak için aşağıdaki kodun başlangıç ve bitiş kısmındaki kodun içine aynı yere yapıştırıp blogumuzu kaydedip, blogu önizleme yapacağız.Bu değişimden sonraki görünüm aşağıdaki resim gibi olacaktır.
CSS KOD NO : 2#header .tabs li:last-child{
padding-right:10px !important;
border-right: 1px solid white;
}
CSS Kod 2 ‘yi ekleyeceğiniz kısmı mavi ile belirtim. Her iki görüntüden hangisini kullanmak isterseniz blogunuza uygulayabilirsiniz.Problem yaşarsanız yorumlarda belirtebilirsiniz.