Blogger Yazılarda Klavye Tuşlarını Görüntüleme Eklentisi

Birçok web sitesi sahibi, ziyaretçilerin dikkatini çekmek için resimler, fotoğraflar veya basit metin biçimi yerine web sayfalarına dinamik olarak klavye tuşları eklemek istiyor. Klavye Tuşlarını göstermek için herhangi bir görüntü kullanırsanız, blog yazılarınızın yüklenme süresini olumsuz etkileyecektir.

Böylece, SWT CSS3 numaralarını kullanarak herhangi bir Metin veya sembole orijinal klavye tuşu efekti verebilirsiniz. Bu nedenle, sadece bu prosedürleri takip edin ve Yazılarınızı daha dinamik ve gösterişli hale getirin. Yazılarınızda klavye tuşlarını görüntüleyin.

Yazılarda Klavye Tuşu Düğmesini Görüntüleme

Yazılarınızda klavye tuşunu görüntülemek için çok basit bir adım var. Sadece CSS kodlarını sitenize yapıştırın ve klavye tuşunu görüntülemek istediğiniz yere gösterin.

Her şeyden önce bu CSS kodlarını web sitenize veya blogunuza eklemeniz gerekir. Klavye tuşlarını görüntüleme. Css dosyası oluşturduysanız, kodu kopyalayın ve css dosyasına yapıştırın. Birçok WordPress teması, kullanıcıların özel CSS kodları yapıştırmasına izin verir.

Öncelikle Blogger şablon editör sayfamızı açalım ve Html-Düzenle'ye tıklıyalım.

Ve şablon editör sayfamızda Ctrl+f yardımıyla ]]></b:skin> kodunu aratalım.

Şimdi bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

Siyah Klavye Tuşları İçin

Klavye tuşunu siyah renkli görüntülemek için bu css kodlarını kullanın.

HTML... swt-black-kbk {/* Black Keyboard Key Style by www.superwebtricks.com */
color:#fff;
margin:0 5px;
padding:1px 5px;
font-size:1.2em;
font-family:courier new;
border:1px #fff;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #000),
  color-stop(25%, #111)
/* Black Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #000 0%, #111 25%);
background:-moz-linear-gradient(left, #000 0%, #111 25%);
background:-webkit-linear-gradient(left, #000 0%, #111 25%);
background:-ms-linear-gradient(left, #000 0%, #111 25%);
background:linear-gradient(left, #000 0%, #111 25%);
-webkit-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
   -moz-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
        box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
/* Black Keyboard Key Style by www.superwebtricks.com */}
swt-black-kbk:hover {opacity:1;cursor:pointer}

Beyaz Klavye Tuşları İçin

Klavye tuşunu beyaz renkte görüntülemek için bu css kodlarını kullanın.

CSS swt-white-kbk {/* White Keyboard Key Style by www.superwebtricks.com */
color:#000;
margin:0 5px;
padding:1px 5px;
font-family:courier new;
font-size:1.2em;
border:1px #fff;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #fff),
  color-stop(25%, #fff)
/* White Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #fff 0%, #fff 25%);
background:-moz-linear-gradient(left, #fff 0%, #fff 25%);
background:-webkit-linear-gradient(left, #fff 0%, #fff 25%);
background:-ms-linear-gradient(left, #fff 0%, #fff 25%);
background:linear-gradient(left, #fff 0%, #fff 25%);
-webkit-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
    -moz-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
             box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
/* White Keyboard Key Style by www.superwebtricks.com */}
swt-white-kbk:hover {opacity:1;cursor:pointer}

Veya iki anahtar grubunun üstüne eklemek yerine, bu dosyayı blog şablonu HTML'nizin Başlık Etiketini </head> kapatmadan hemen önce ekleyebilirsiniz.

HTML <link href="https://img.superwebtricks.com/files/swt-keyboard-keys.css" rel="stylesheet" type="text/css" />

İkinci olarak, bu kodları Klavye tuşunu görüntülemek istediğiniz yere blog yayınlarınıza / sayfalarınıza veya başka bir yere eklemeniz gerekir.

HTML görünümünde kod eklemeniz gerektiğini hatırlatın. Ancak, Oluşturma modunda kod eklemek istiyorsanız, sağ taraftaki seçenek menüsünden “Yazılan HTML'yi yorumla” yı düğmesine tıklayın.

Siyah Klavye Tuşları için

HTML <swt-black-kbk>A</swt-black-kbk>

Beyaz Kalvye Tuşları için

HTML <swt-white-kbk>A</swt-white-kbk>

Herkese kolay gelsin umarım faydalı bir makale yazısı olmuştur.

Kaynak: superwebtricks