Yazılarıma ait bağlantıları nasıl gösterir/gizlerim?
Not: Bu makalede, klasik şablon (Düzenler özelliklerine sahip olmayan) kullandığınız
varsayılır.
Özellikle çok uzun yazıların bulunduğu bloglar için faydalı bir yöntemdir. Okuyucu önce, yazılarınızın yalnızca başlıklarını görür; böylece başlıklara göz atabilir ve neyi okumak istediğine karar verebilir. Böylece bir yazıyı okumak istediğinde, tüm metni görmek için bir bağlantıya
tıklayabilir. Okumayı bitirdiğinde metin yeniden gizlenebilir. Bu işlemlerin tümü tek bir sayfada olur; böylece fazla gezinmeye veya başka sayfaların yüklenmesine gerek kalmaz. Bunu burada deneyebilirsiniz:
Bu Uzun Bir Yazıdır
Tamam kabul ediyorum, çok da uzun bir yazı olmadı. Ama söyleyecek çok şeyim yok. Ama sanırım makul bir paragraf eklemeliyim ki, her şeyin nasıl işlediğine dair bir
Bu özellikte bir araya gelen üç öğe vardır: CSS, Javascript ve tabi ki Blogger şablon etiketleri. Şimdi adım adım bu özelliklerin üzerinden geçelim.
fikir edinin. Güzel bir fıkra bilen var mı? Yapmayın, bilen birileri vardır. Her şeyi benim yapmam mı gerekiyor? Sanırım öyle. Aslında çok da büyük bir mesele değil. Ama uzatmanın anlamı yok. Geri dönüp, makalenin geri kalanını okuyun! (Bu girişi yeniden gizlemek için aşağıdaki bağlantıya tıklayabilirsiniz.)
[+/-] bu yazıyı göster/gizle
CSS
Bu en basit bölümdür. Yazıları göstermek veya gizlemek için birkaç sınıfa ihtiyacımız vardır. Bu iki satırı stil sayfanıza yapıştırmanız yeterlidir:
.posthidden
{display:none}
.postshown {display:inline}
Stil sayfanız genellikle şablonunuzun üst kısmına yakın bir yerde, <style>
ve </style>
etiketlerinin arasındadır. Stil sayfanız ayrı bir dosyadaysa, bu satırları şablonunuza eklemek yerine bu dosyaya eklemeniz gerekir.
Javascript
Aşağıdaki kodu şablonunuzdaki <head></head>
etiketlerinin arasına ekleyin:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Bir yazıyı göstermek veya gizlemek için aşağıda kullanacağımız işlev budur. Yalnızca bu belirli yazının kimlik numarasını veririz ve o da bu yazıyı bir CSS stilinden bir diğerine geçirir.
Blogger Etiketleri
Araçlarımız hazır olduğuna göre, bunları yazılarımıza uygulamaya başlayabiliriz. Şablonunuzdaki<Blogger></Blogger>
etiketleri arasında, yazıların görüntülendiği bölümü
göreceksiniz. Burada kullanacağımız kod şöyle görünür:
<BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber$>1">
<$BlogItemBody$><br />
</span>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a>
Tabi bu kodu, şablonunuza uyacak şekilde değiştirebilirsiniz. Örneğin, burada farklı biçimlendirme etiketleri ve belki de yayınlayan satırınız veya yorumlar için farklı kodlar isteyebilirsiniz. "[+/-] bu yazıyı göster/gizle" metni de değiştirilebilir.
Bu kodun en önemli bölümü <$BlogItemBody$>
etiketinin başında ve sonunda yer alan<span>
etiketidir. Bu bölümün gizlenmiş olarak başladığını ve benzersiz kimliği oluşturmak için <$BlogItemNumber$>1
etiketini kullandığını görebilirsiniz. (Ek olarak konulan "1", blog öğesi numarasının zaten kalıcı bağlantı gibi başka bir şey için kullanılıyor olması ihtimaline karşı bu tanıtıcının benzersiz olmasını garantiler.) Doğru yazıyı gösterip gizlediğimizden emin olmak için Javascript bağlantısı da aynı kimlik numarasını kullanır.
Şablonunuzu tamamladıktan sonra, değişiklikleri kaydedip yeniden yayınlamanız yeterlidir. Yeni biçim, başka hiçbir şeyi değiştirmenize gerek kalmadan tüm yazılarınıza otomatik olarak uygulanacaktır.
Notlar:
- Tüm şablon değişikliklerinde olduğu gibi, başlamadan önce şablonunuzun bir yedek kopyasını kaydettiğinizden emin olmalısınız. Kodunuzun tamamını kopyalayıp sabit
diskinizde bir metin dosyasına yapıştırın. Böylece, bir şeyler yanlış gittiğinde bu dosyadaki kodu yedek olarak kullanabilirsiniz. - Göster/gizle yöntemine bir alternatif olarak yazı özetleri yöntemini kullanabilirsiniz. Her
yöntemin kendine özgü avantajları ve dezavantajları vardır. - Bu yöntemin avantajları: Yazılarınızda değişikliğe gerek kalmadan yalnızca şablonun değiştirilmesi gerekir.
- Dezavantajları: Özet bilgileri olmadan yalnızca her yazının başlığı görüntülenir. Bu özellik, yazılarınızın arasından seçerek (örneğin, yalnızca uzun yazılarda) uygulamanıza gerek kalmadan tüm yazılara uygulanır.
0 Yorum Ekle: