Blogger İçin Pseudo- Elements CSS Düğmeler

       Hepimiz Blogger blogger sitesinde farklılık yaratarak site hitini ziyaretçi sayısını artırmak için çaba harcıyordur.Şimdi ise size gerekse ana sayfada gadget olarak yada yazılarınız içinde kullanabileceğiniz,ilgi çekici farklı kulanışlı CSS blogger düğmeleriniden yararlanabiirsiniz.

        Bu özelliği blogger sitelerimizde kullanabilmemiz için gerekli olan işlemleri yapmamız gerekir,bunun için aşağıdaki işlemleri sırası ile yapalım.

   

      1.  Blogger hesabınıza giriş yapın.
      2.  Kumanda Paneli>Şablon>HTML Düzenle yolunu izliyoruz.
      3.  Şablonumuzun yedeğini alıyoruz her ihtimale karşı.
      4.  Şablon kodlarınız içinde Ctrl+F tuşları ile ]]> </b:skin> kodunu aratıp buluyoruz.
        5.  Aşağıdaki kodu kopyalayıp  ]]> </b:skin> kodundan önce ki kısmına yapıştırıyoruz.

. Hb-düğmeleri { background-color: # 4b3f39; font-family: 'Verdana', sans-serif; font-size: 12px; text-decoration: none; color: # fff; position: relative; padding: 10px 20px; padding-right: 50px; background-image: doğrusal değişimli (alt, rgb (62,51,46)% 0, rgb (101,86,78)% 100); border-radius: 5px; box-shadow: 1px 0px 0px ilave # 9e8d84, 0px 0px 5px # 322620 0px, 0px 10px 5px # 999; } . Hb-düğmeleri: {aktif top: 3px; background-image: doğrusal değişimli (alt, rgb (62,51,46)% 100, rgb (101,86,78)% 0); box-shadow: 1px 0px 0px ilave # 9e8d84, 0px 0px 2px # 322620 0px, 0px 5px 3px # 999; } . Hb-düğmeleri: before { background-color: # 322620; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4H2ajvBToporYag_OJJBoz0o9-plS00UcYbO0sY2GOfa71EUxicEOe5ilJeKIc8S85vBknvaQ6yWgEkkoLYik3kcQHEqFFK_ucJbZP0Aio2dSPN5Eyvxn0zce9pVnOkR9VW0D5Ot1Uo/h80/helper-blogger-right-arrow.png); background-repeat: no-repeat; background-position: center merkezi; içerik: ""; width: 20px; height: 20px; position: absolute; Doğru: 15px; top: 50%; margin-top:-9px; border-radius:% 50; box-shadow: 1px 0px 0px ilave # 19120f, 0px 1px # 827066 0px; } . Hb-düğmeleri: aktif :: {önce top: 50%; margin-top:-12px; box-shadow: 0px 1px inset # 827066 0px, 0px 0px 3px # 19120f, 0px 6px # 382e29 3px; } - See more at: http://www.helperblogger.com/2012/02/cool-css-buttons-with-pseudo-elements_16.html#sthash.ugZwdoFs.dpuf

Şablonu kaydedip çıkıyoruz.

>a href="BURAYA LINK"class="BC-Düğmeler">Düğmede Göstermek İstediğiniz Metin</a>

BURAYA LİNK kısmına düğmeye tıklandığında açılmasını istediğiniz link
Düğmede Göstermek İstediğiniz Metin kısmına düğmeye verecek olduğunuz metin kısmıdır.




Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.