Blogger Manuel DEMO ve DOWNLOAD Butonları

Bu yazımızda sizlerle blogunuzda kullanacağınız kurulumu ve kullanımı çok kolay olan DEMO ve DOWNLOAD butonları nasıl eklenir ve kullanılır ipuçlarını paylaşıyoruz.

 Blogunuzun yayınlarına görsellik yani örnek olarak gösterebileceğiniz bir site, kitap, indirme, canlı önizleme, blog yada eklentileri blogunuzda paylaşabilmek için kullandığımız butonlardır.

Blogger Manuel DEMO ve DOWNLOAD Butonları Nasıl Eklenir?

1. Blogger hesabınıza giriş yapın ve blogunuzu seçin. Seçmiş olduğunuz blogun kumanda panelinden (arayüz) Şablon > HTML'i Düzenle yolunu takip edin ve CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

.post-body ul.button {list-style:none;text-align:center;margin:20px auto;padding:2px;font-size:14px;clear:both;z-index:2;}
.button li{display:inline;margin:0 5px;padding:0;list-style:none;}
.post-body ul.button a.demo,.post-body ul.button a.download{display:block;background:#97b28e;max-width:180px;padding:8px 12px;color:#fff;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border-radius:3px;transition:all .3s}
.post-body ul.button a.demo{background:#5c7dc2;}
.post-body ul.button a.download{background:#da972d;}
.post-body ul.button a.demo:hover,.post-body ul.button a.download:hover {opacity:.9;color:#fff}

Şablonu kaydedin.

2. Aşağıdaki HTML kodları oluşturmuş olduğunuz yayınların altına yada görünmesini istediğiniz yere ekleyerek kod içerisinde belirtilen yere linklerinizi ekleyin.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="LİNKİNİZİ BURAYA EKLEYİN" target="_blank">DEMO</a></li>
<li><a class="download" href="LİNKİNİZİ BURAYA EKLEYİN" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

Sadece DEMO butonunu kullanmak için;

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="LİNKİNİZİ BURAYA EKLEYİN" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear"></div>

Sadece DOWNLOAD butonunu kullanmak için aşağıdaki kodu kullanın.

<div style="text-align: center;">
<ul class="button">
<li><a class="download" href="LİNKİNİZİ BURAYA EKLEYİN" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

• DEMO
• DOWNLOAD