Disqus Bağlantı Butonları

Disqus'un kendi web sitesinde kullanmış olduğu butonları, blog sitelerinde kullanılabilecek şekilde düzenledim ve bu yazımızda sizlerle paylaşacağım.

Disqus web sitesi düzenli ve kullanışlı bir tasarıma sahip, site içerisinde kullanılan menüler ve butonlarda gerçekten göze hoş görünüyor ve ziyaretçilerin ilgisini çekebilecek cazibe mi dersiniz çekicilik mi bilemiyorum her ikisi de aynı anlama geliyor ama önemli olan web sitesinde bulunan alanların kullanılabilirliğini artırmanın bir şekilde yolunu bulmak gerekiyor.

Web sitesi veya web sitesinde kullanılan menü ve butonlar gibi kısa kodekslerin iy bir CSS tasarımı ile ziyaretçilerin kullanımına sunulması, "kullanılabilirlik" oranının artmasında en önemli püf noktalar biridir. Tabi, web sitenizde tasarım çalışması yapmak ve geliştirmek için, web sitenizin görünümünü daha da bozmamaya dikkat edin.

Blog Sayfa ve Yayınlarında Kullanılan Butonlar

Disqus web sitesinde kullanılan bağlantı butonlarından 3 tanesini sizlerle paylaşacağım. Bağlantı butonlarını "Ön İzleme, İndirme ve Bağlantı" butonu olacak şekilde hazırladım, siz istediğiniz farklı isimler altında kullanabilirsiniz. Disqus bağlantı butonlarını sadece CSS kodların kullanarak düzenledim. Harika bir görünüme sahip olan Disqus butonlarına animasyon efektini de CSS kodları kullanarak ekledim.

Disqus Bağlantı Butonları Kurulumu

Disqus bağlantı butonlarını blog sitesine eklemek için aşağıdaki adımları takip edin.

1- Aşağıdaki CSS kodlarını blogunuzun şablon editör sayfasında bulunan ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

CSS

#rate_link {
    text-align: center
}
.rate_link:after {
    clear: both
}
a.rate_link {
    color: #65bc9c;
    font-size: 14px;
    border: 2px solid #65bc9c;
    padding: 8px 24px;
    margin:10px 6px;
    display: inline-block;
    font-weight: 600;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: ease background 0.5s;
    -o-transition: ease background 0.5s;
    transition: ease background 0.5s
}
a.link-down {
    color: #b85252;
    border-color: #f19595
}
a.link-contact {
    transition: all 0.5s ease!important;
    background: transparent;
    color: #3498DB;
    border: 2px solid #eaeaea;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px
}
a.rate_link:hover,
a.rate_link:focus {
    background: #65bc9c;
    color: #fff;
    text-decoration: none
}
a.link-down:hover,
a.link-down:focus {
    background: #f19595;
    color: #fff;
    text-decoration: none
}
a.link-contact:hover,
a.link-contact:focus {
    background: transparent;
    color: #3498DB;
    border-color: #3498DB
}

2- Aşağıdaki HTML kodları blog sayfalarınıza veya yayın içerisinde paylaşmak istediğiniz bağlantıları ekleyerek kullanabilirsiniz. Bağlantı HTML kodlarını yayın editör sayfasının HTML bölümünden ekleyebilirsiniz.

HTML

<div id="rate_link">
<a class="rate_link link-preview" href="#" rel="nofollow noopener" target="_blank"> Ön İzleme </a>
</div>
<div id="rate_link">
<a class="rate_link link-down" href="#" rel="nofollow noopener"> İndir </a>
</div>
<div id="rate_link">
<a class="rate_link link-contact" href="#" rel="nofollow noopener" target="_blank"> Bağlantı </a>
</div>

Disqus bağlantı butonlarını yan yana birlikte ve tek tek kullanabilirsiniz. Eğer, bağlantı butonlarını birlikte ve alt alta kullanmak istiyorsanız aşağıdaki HTML kodları kullanabilirsiniz.

Bağlantı butonlarını yan yana kullanmak için aşağıdaki kodları kullanın.

CSS

<div id="rate_link">
<a class="rate_link link-preview" href="#" rel="nofollow noopener" target="_blank"> Ön İzleme </a>
<a class="rate_link link-down" href="#" rel="nofollow noopener"> İndir </a>
<a class="rate_link link-contact" href="#" rel="nofollow noopener" target="_blank"> Bağlantı </a>
</div>

Bağlantı butonlarını alt alta kullanmak için aşağıdaki kodları kullanın.

CSS

<div id="rate_link">
<a class="rate_link link-preview" href="#" rel="nofollow noopener" target="_blank"> Ön İzleme </a>
</div>
<div id="rate_link">
<a class="rate_link link-down" href="#" rel="nofollow noopener"> İndir </a>
</div>
<div id="rate_link">
<a class="rate_link link-contact" href="#" rel="nofollow noopener" target="_blank"> Bağlantı </a>
</div>

Disqus bağlantı butonlarını aşağıdaki ön izleme butonuna tıklayarak inceleyebilirsiniz.

Ön İzleme

Bu yazımızda Disqus bağlantı butonlarını blog sayfalarınızda kullanabileceğiniz düzenlemeleri yaparak sizlerle paylaştım. Yayın ile ilgili soru ve görüşleriniz için yorum formunu kullanabilirsiniz.