Bu gönderi, bir yılı aşkın bir süre önce yazdığımdan beri Blogging Basics 101’deki en popüler gönderi. Bununla birlikte, HTML ile ve blog platformunuzun ve web tarayıcılarınızın bu HTML’yi nasıl okuduğuyla ilgili olduğu için okuyucularım için en kafa karıştırıcı olanıydı. Bu yüzden, bu sorunları biraz daha açıklığa kavuşturabileceğimi umarak bu gönderiyi düzenleyip yeniden yayınlıyorum.
Bazen bir blogun kenar çubuğunda, altında bir HTML kodu kutusu bulunan bir düğme bulunur, buna benzer:
Düğmeyi kenar çubuğunuza nasıl yerleştireceğinizi ve HTML’yi nasıl bulacağınızı ve görüntüleyeceğinizi zaten biliyorsunuz. Şimdi bu HTML’yi kullanışlı bir kaydırma kutusuna koyalım.
Aşağıda, kodu kenar çubuğunuza nasıl yerleştireceğiniz konusunda size yol göstereceğim. Ama önce size kullanacağımız kodu göstermek ve nasıl çalıştığını açıklamak istiyorum.
Bu, kenar çubuğunuza koyduğunuz koddur:
Bu, düğme ve ardından HTML kodunu içeren bir kutu olarak görünecektir (yukarıda gördüğünüz gibi).
bu
kaydırma kutusunu oluşturmak için ihtiyacınız olan açılış ve kapanış HTML etiketleridir. Etiketteki tırnak işaretleri arasındaki her şey
- kenarlık: 3 piksel sabit yeşil — Bu, tarayıcıya üç piksel kenarlıklı kutuyu yeşil yapmasını söyler. Farklı bir renk yazarak (örn. kırmızı, turuncu vb.) rengi değiştirebilir veya noktalı veya noktalı yazarak çizgi tipini değiştirebilirsiniz.
- yükseklik: 100 piksel – Bu, tarayıcıya kutuyu 100 piksel yüksekliğinde yapmasını söyler. Farklı bir sayı yazarak (örneğin 200) bu değişkeni değiştirebilirsiniz. Görünümü beğenene kadar bununla oynayabilirsiniz.
- genişlik: 150 piksel — Bu, tarayıcıya kutuyu 150 piksel genişliğinde yapmasını söyler. Yine, farklı bir sayı girerek genişliği kontrol edebilirsiniz.
- renk siyah — Bu, kutudaki metnin rengidir. Herhangi bir rengin adını buraya yazabilirsiniz (örn. kırmızı, turuncu, yeşil vb.).
- arka plan rengi: beyaz — Bu, kutunuzun içinin rengidir. Okuması en kolay olduğu için beyaz zemin üzerine siyah metin kullanmanızı tavsiye ederim. Ancak, yerine farklı bir renk adı yazarak bu rengi değiştirebilirsiniz. beyaz.
Artık etiketin nasıl çalıştığını anladığınıza göre, kutunun kişiselleştirilmiş HTML’nizi gösterdiğinden emin olmak için hangi HTML’nin kullanılacağına bakalım. Yerine BURAYA YAZIN HTML kodunuzu yazmanız gerekir. Örneğin, sitenize BB101 düğmesini koymak için HTML’yi yerleştirecekseniz, şöyle görünecektir:
(Kalın karaktere ihtiyacınız olmadığına dikkat edin, bunu yalnızca kodunuzun nereye gittiğini görmeyi kolaylaştırmak için ekledim. Hangi koda ihtiyacınız olduğu konusunda daha fazla yardıma ihtiyacınız varsa, düğmeler için HTML koduyla ilgili bu gönderiye göz atın.)
HTML’ye biraz aşina iseniz, yukarıdaki kodun normal kod olmadığını fark edeceksiniz. < en > genellikle bağlantılar ve resimler eklerken görürsünüz. Düğme kodunuz, HTML oluşturma sekmenize yazdığınızda normalde şöyle görünür:
>img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” />/a>
Ancak, yukarıdaki HTML’ye sahipseniz, oluşturmak sekmesi veya HTML’yi düzenle sekmesinde, HTML olarak işlenecek ve okuyucularınıza doğru şekilde görüntülenmeyecektir (kutuda HTML kodu yerine yalnızca düğmeyi gösterecektir). O tarafta dır-dir geçici bir çözüm: Tür < HTML kodu burada > . Düğme HTML’nizin kodu şöyle görünür:
<a href=”https://www.bloggingbasics101.com”><img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>
(Not: Kalın yazmak gerekli değildir, yalnızca < ve > işaretlerini nereye koyduğumu size gösterme yöntemimdir)
Bu işe yarıyor çünkü < < işareti için HTML kodudur ve > > karakteri için HTML’dir. yer < tüm < yerine ve > all > yerine ham HTML’niz görünür hale gelir çünkü içerdiği < en > değiştirir. Bir tane olan her yerde < ve > olmalıdır. < of > kodunuzda.
Başka geçici çözümler de vardır. Kod snippet’inizi aşağıdaki etiketlere koymayı deneyebilirsiniz:
en
etiketler VEYA
VEYA
en
Şimdi bu kodu kenar çubuğunuza koyalım!
TipPad
Kodu kenar çubuğunuza eklemek için yeni bir Not türü listesi oluşturmanız gerekir.
- git Tip listeleri > Yeni bir tür listesi oluştur.
- Seçme notlar liste tipi için ve ona bir isim verin.
- Tıklamak Yeni liste oluştur.
- İçinde açıklama alan yazın bu kodu kopyalayıp yapıştırın:
genişlik: 150 piksel; siyah renk; arka plan rengi: beyaz;”>MESAJIN
BURADA
blogger
- Blogger’da oturum açın.
- git Düzen > Şablon > Sayfa öğeleri > Bir sayfa öğesi ekleyin.
- görene kadar aşağı kaydırın HTML/Java betiği ve Seç bloga ekle.
- Aşağıdaki kodu kesip İçerik alanına yapıştırın (Başlık alanını boş bırakabilirsiniz):
genişlik: 150 piksel; siyah renk; arka plan rengi: beyaz;”>MESAJIN
BURADA