Basit Önizleme ve İndirme Butonları

Blog sitenizde paylaştığınız yayınlarda PDF, CSS, HTML yada PNG ve JPG gibi dosyaların daha düzenli görünmesi için, blog sitesinin daha kullanışlı olması açısından yayınlarda butonlardan faydalanırız. Şimdi sizlerle küçük bir CSS kodu ile blogunuzda kullanableceğiniz ÖNİZLEME ve İNDİR butonu paylaşıyorum. Basit bir kullanıma sahip olan butonları blogunuza elemeden önce aşağıdaki butondan demosunu izleyebilirsiniz.

DEMO

Önizleme ve İndirme Butonları Nasıl Eklenir?

1. Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip edin ve blog şablon kodları sayfasını açın.

2. Blogunuzun şablon kodları sayfasında CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<style type="text/css">

.preview-download-btn, .preview-download-btn:after, .preview-download-btn:before {
    clear: both;
}
.btn-pre, .btn-dnld {
    color: #F7F7F6;
    font: 400 15px Arial,Helvetica,sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.29);
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}
.btn-pre {
    background-color: #D34507;
    background: url("https://cdn.rawgit.com/jquerycods/ren/master/preview.png") no-repeat scroll left 14px top 12px #D34517;
    border-color: #FF550B #F1581E #FF551B #FF551B;
    border-style: solid;
    border-width: 1px;
    padding: 15px 25px 15px 47px;
}
.btn-dnld {
    background-color: #C80000;
    background: url("https://cdn.rawgit.com/jquerycods/ren/master/download.png") no-repeat scroll left 15px top 12px #C80001;
    border-color: #FF1415 #FF1415 #FF1415 #A11011;
    border-style: solid;
    border-width: 1px;
    margin-left: 0;
    padding: 15px 25px 15px 47px;
}
.btn-pre:hover, .btn-pre:focus {
    background: url("https://cdn.rawgit.com/jquerycods/ren/master/preview-h.png") no-repeat scroll left 14px top 12px #542D2C;
    border-color: #39121F #E13701 #39120F #39121F;
    border-style: solid;
    border-width: 1px;
}
.btn-dnld:hover, .btn-dnld:focus {
    background: url("https://cdn.rawgit.com/jquerycods/ren/master/download-h.png") no-repeat scroll left 15px top 12px #542D2C;
    border: 1px solid #39121F;
}

</style>

3. Şimdi butonların nasıl kullanıldığı hakkında bilgi veriyorum. Blogunuzda paylaştığınız yayınlar ile ilgili bir dosya yada kod gibi paylaşımlarda ÖNİZLEME ve İNDİR butonları kullanmak için aşağıdaki HTML kodları yayınlarınız içerisinde kullanmalısınız. Mesela bu yayında ben farklı bir buton kullandım. Yukarıdaki yeşil DEMO butonu gibi siz de bu butonları yayınlarınızda kullanabilirsiniz.

<div class="preview-download-btn">
<a class="btn-pre" href="#" target="_blank"><span>ÖNİZLEME</span></a><a class="btn-dnld" href="#" target="_blank"><span>İNDİR</span></a>
</div>

4. HTML kod içerisinde bulunan href="#" ile gösterilen yerlere linklerinizi (bağlantılarınızı), yani önizleme yapıcağınız ve indirme işlemini yapacağınız bağlantıları href="#" kare (#) karekterinin yerine eklemeniz yeterli olacaktır.

Bu konu yada blogumunzda paylaştığımız eklenti veya yayınlar için yorum kısmından bize ulaşabilirsiniz.

Etiketler: Blogger Butonları, Blog Önizleme ve İndirme Butonları, Basit Blog Butonları