Basit kodlarla HTML'de buton yapmak

18 Şubat, 2017
Basit kodlarla HTML'de buton yapmak
HTML buton kodu
Blogger'da sayfa içerisine ya da yayın içerisine nasıl buton ekleriz? Blogger'da önizleme (demo) ve indir (download) butonları nasıl eklenir? HTML'de basit kodlarla buton yapma...

Blogger sayfaları içinde veya yayınların içinde buton yapmak oldukça basittir. Tabi alternatif buton kodları mevcut, birbirinden şık, güzel. Ama uzun uzun yazılmış, içerisinde script kodlarının yer aldığı butonları birden fazla kez Blogger sayfalarında veya yayın sayfalarında kullanmak, siteyi oldukça yavaşlatacaktır. Hatta sayfayı tekrar düzenlemek istediğinizde bile sorun yaşayabilirsiniz. Bu karmaşık kodların yerine HTML'de basit CSS kodları ile buton yapmak oldukça basittir. Ücretsiz Blogger temalarını listelediğim şu sayfada, oluşturduğum basit butonları test edebilirsiniz. Aşağıya da ekledim..

Bu gördüğünüz buton oldukça basit bir kod ile yapılır. Bu kod:
<button type="button">BUTON</button>
şeklindedir. Bu koda eklemeler yapabiliriz tabi. Örneğin link ekleyelim.

<a href="http://blogtecrubem.blogspot.com/" ><button type="button">BUTON</button></a>
Link eklemek istediğimizde de gereken kod bu şekilde. Ayrıca
target="_blank"
koduyla da tıkladığımızda yeni bir sekmede açılmasını sağlayabiliriz.

<a href="http://blogtecrubem.blogspot.com/" target="_blank"><button type="button">BUTON</button></a>
Tıkladığımızda yeni bir sekmede sayfa açan buton kodu da bunlardı.

Tabi biraz daha geliştirmek bizim elimizde. Aşağıda yanyana iki buton ekledim. Bu butonların kodları...
aşağıda yer almaktadır.
<div style="text-align: center;">
<a href="canlı-demo-buton-linki-buraya" rel="nofollow" target="_blank"><button type="button">CANLI DEMO</button></a>&nbsp;<a href="temayi-indir-butonu-linki-buraya" rel="nofollow" target="_blank"><button type="button">TEMAYI İNDİR</button></a></div>
Bu yan yana iki buton özellikle tema paylaşımında bulunan arkadaşlar için oldukça idealdir. Bu buton kodlarını eklemek için ise, aşağıdaki resimde gösterdiğim gibi...
HTML buton kodu
HTML buton kodu
Yayınlarınızı hazırladığınız sayfada sol üst köşede olan HTML butonuna tıklayarak kodların arasına eklemeniz yeterli olacaktır. Konu ile ilgili sorularınız olursa yorum kısmından bana bildirebilirsiniz. Ayrıca bu konudan sonra "Bloggerlar için bilinmesi gereken basit HTML öğretisi" adlı yazımı da okumanızı tavsiye ederim.

Görsel açıdan daha zengin bir buton eklentisi için bu sayfayı inceleyebilirsiniz.

10 yorum:

  1. Şuan bana gerekmiyor ama bazen makalelerimde link verme işlemleri oluyor belki onların bazılarında kullanabilirim. Lazım olabilecek bi şey yani. İlaveten Google Amca'da bunu arayan çok blogger vardır diye düşünüyorum.
    Güzel ve sade bir anlatım olmuş, web tasarım bilgisi olmayan blog yazarları dahi alıp uygulayabilir. Teşekkürler...

    YanıtlaSil
    Yanıtlar
    1. Rica ederim, ben teşekkür ederim güzel yorumunuz için..

      Sil
  2. Hem kolay hem de kullanışlı..herkesr lazım olabilir..link vermek yerine buton şeklinde yönlendirmek daha cazip..teşekkürler

    YanıtlaSil
  3. nasıl yapıldığını hep merak ederdim öğrenmiş olduk teşekkürler :)

    YanıtlaSil
  4. Ay bu kodlar öldürüyor beni :) Değerli bilgiler :) Teşekkürler :)

    YanıtlaSil
  5. Notumuzu aldık :) Teşekkürler

    YanıtlaSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.