Twitter Card Etiketleri

    Twitter cards URL'in tweet atıldığında tasarımın istediğiniz gibi düzenlemenize olanak sağlayan bir dizi meta etikettir. HTML dökümanına eklenen birkaç meta etiketiyle, twitter dan atılan twitlerin zengin bir içerikle görüntülenmesini sağlıyor. Twitter kartları, tweet içeriğimizi daha çekici göstermenin yeni bir yoludur.URL'in başlık, resim, resin boyutu, açıklama alanı gibi etiketleri bulunuyor.


    Bütün meta etiketleri gibi, bu etiketler de başlık etiketleri(<head></head>) arasına alınıyor. Twitter kartlarını eklentileri kullanarak wordpress, joomla, blog temanıza gömebilirsiniz. Bunun için eklenti kurmanız gerekebilir. Nasıl yapacağınızı görmek için tıklayın. Bu SEO açısından da büyük bir önem kazandırıyor.

See the Pen veLgJw by mefistof3l3s (@kubilay) on CodePen.
 
    Sitenizin nasıl görüntülendiğini, twitter'ın card validator aracı ile test edebiliyorsunuz.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

CSS Arkaplan Resmini Boyutlandırma

    Yeniden merhabalar.. Bu yazıda arkaplan resimlerimizi boyutlandırmayı, bir içeriğe birden fazla arkaplan dahil etme konularını ele alacağız.     CSS3 ile gelen background-size özelliği arkaplanlarımızı boyutlandırmamızı olanak sağlıyor. Background-size özelliği resim editörlerine olan bağlılığı bir nebze azalttı. Background-size değerlerini px , em veya % girerek arkaplanımızı istediğimiz boyutlara uygun hale getirebiliriz. See the Pen YrxRJo by mefistof3l3s ( @kubilay ) on CodePen .     Pixel ve yüzdeler haricinde contain , cover ve auto değerlerini kullanabiliriz. Contain, arkaplan resmimizi belirlediğimiz içerik alanına sığacak şekilde boyutlandırır. Resmimizin her bir pixeli görünür. Resmimiz en veya boy olarak bulunduğu içeriğin en veya boyundan birine bile erişirse, boyutlandırma durur. Bu değere arkaplan resmimizde bütün pixellerimizi korumamızı sağlar. See the Pen mBMaMO by mefistof3l3s ( @kubilay ) on CodePen .       Cover değeri arkaplan resmimizi içe
Devamı

Philips 6x6 Yöntemi (Kötü Çizimler ve Basit Anlatım Eşliğinde)

Resim
    Philips 6x6 yöntemi bir tartışma tekniğidir. Bir iş toplantısı sırasında, daha verimli ve üretken olabilmek açısında geliştirilmiştir. Yöntem adını Donald Philips üzerinden almıştır.     Üretkenlik ve farklı bakış açılarından bakma çeşitliliği sağlar. Liderin ön plana çıktığı bir yöntemdir. Ancak sınıf üzerinde dışa kapalı öğrenciler için etkili bir yöntem değildir.      Öğrenci mevcudu fazla olan sınıflarda, uygulanması zordur. Öğrencilerin bilgiyi kavraması zorlaşır. Tartışmanın süresi, verilen konuya göre 5-30 dakika arasında tutulabilir.     Öğretici, genel olarak pasifdir. Bazı noktalarda alfa karakter rolüne bürünebilir. Philips 6x6 yöntemine benzer olarak Buzz grupları(vızıltı) yöntemi de vardır. Philips yöntemine çok benzemekle birlikte, oyun niteliğinde olduğu için küçük yaşlar açısından daha uygundur.     Tartışma yöntemi bazı öğrenciler açısından doğru yöntem olmayabilir.      Philips yöntemi yeni bir bilgiyi öğrenmekten ziyade, öğreni
Devamı

CSS Selector Kullanımı

Resim
    CSS üzerinde class, id gibi elemanları göze hitap eden, okunabilir, kitlemize uygun bir stil oluşturma amacıyla kullanıyoruz. Classlar bunu sağlayabilmemiz için aracı oluyor. Uygulamak istediğimiz stili, uygulayacağımız bölgeye erişimi sağlıyorlar. Bu özelliğinden dolayı class,etiket seçici olarak adlandırılabilir.     CSS'de onlarca seçici mevcuttur. Bunlardan en bilindik olanlar; class, id ve etiketlerdir. Mouseclick olayları için de fazla kullanılan hover, active ve focus seçicilerini de bu listeye dahil edebiliriz. Bu yazıda yukarıdakilerin dışında kalan seçicileri inceleyeceğiz. :first-child, :last-child:     Birden fazla eleman varsa ve biz bunlardan sadece birincisine stil uygulamak istediğimizde kullanabiliriz. See the Pen zEyJZR by mefistof3l3s ( @kubilay ) on CodePen .       Aynı şekilde son elemana stil uygulamak için, :last-child seçicisini kullanabiliriz. See the Pen KXbxva by mefistof3l3s ( @kubilay ) on CodePen . :nth-child() :   Y
Devamı