HTML kodu için nasıl kaydırma kutusu oluşturabilirim?

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:

BURAYA YAZIN

Bu, düğme ve ardından HTML kodunu içeren bir kutu olarak görünecektir (yukarıda gördüğünüz gibi).

bu

ve

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

tarayıcıya kutunun ekranda nasıl görünmesi gerektiğini söyler. Bu öğelerin her birini inceleyelim.

  • 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:

  LinkedIn'de Yaptığınız 5 Büyük Hata

<a href=”https://www.bloggingbasics101.com”><img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

(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 < her < işareti için ve > her > karakteri için. 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>

Bu işe yarıyor çünkü < < işareti için HTML kodudur ve > > karakteri için HTML’dir. Başka bir deyişle, hem editörünüz hem de tarayıcınız <'ı bir olarak okur <-teken (en geef het als zodanig weer) en > als een >imzalayın (ve bu şekilde gösterin). yer < tüm < yerine ve > all > yerine ham HTML’niz kutuda görünecektir çünkü < en > değiştirir. Bir tane olan her yerde < ve > olmalıdır. < of > kodunuzda.

NOT: Bu makaledeki kodu kesip yapıştırmayın. Sözde akıllı alıntılar kullanır ve bu alıntılar, blog platformunuzun düzenleyicisi veya bir web tarayıcısı tarafından doğru şekilde tanınmaz. Kodu elle yazmanız veya kesmeyi/yapıştırmayı seçerseniz, editörünüzde alıntıları manuel olarak değiştirmeniz gerekir.

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.

  1. git Tip listeleri > Yeni bir tür listesi oluştur.
  2. Seçme notlar liste tipi için ve ona bir isim verin.
  3. Tıklamak Yeni liste oluştur.
  4. İç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
  • Tıklamak Kayıt etmek.
  • Tıkla Yayımlamak sekmesine gidin ve kaydırma kutusunun hangi sayfalarda olmasını istediğinizi seçin.
  • Tıklamak Değişiklikleri kaydediyor.
  • Kaydırma kutusunun göründüğü yeri değiştirmek için Tasarım araç kutunuzdaki İçerik Sırası aracını kullanın.
  •   Wp-Ban eklentisi ile blog spam'ını durdurun!

    blog yazarı

    1. Blogger’da oturum açın.
    2. git Düzen > Şablon > Sayfa öğeleri > Bir sayfa öğesi ekleyin.
    3. görene kadar aşağı kaydırın HTML/Java betiği ve Seç bloga ekle.
    4. 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
  • Tıklamak Değişiklikleri kaydediyor.
  • Nasıl göründüğünü görmek için blogunuzu önizleyin. Öğeyi gerektiği gibi taşıyın (farenizle sürükleyip bırakın).
  • Tıklamak Kayıt etmek.