Çoklu Demo ve Download Butonları ~ Blog Düzenim

Her ne kadar blogger üzerinden film ya da illegal program paylaşımı Google yayıncılık ilkelerini ihlal etse de, kendi özgün çalışmaları ya da PSD dosyalarını paylaşanlar için işe yarar bir eklenti olan çoklu download ve demo butonları bir çok kullanıcının işini kolaylaştıracaktır.

Bu özellik aslında diğer şekillerde de kullanılabilir. Ama ben bu özelliği genellikle kod paylaşan siteler ve demo link veren kullanıcılar için paylaşacağım...

1. Blogger kumanda panelinden / şablon /HTML Düzenle / ]]></b:skin> kodunu aratarak hemen üzerine aşağıdaki kodları ekleyin.

/* Demo ve Download */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border-radius:3px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.download:hover h1{margin-left:100%;opacity:0.7;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}
.download-info{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.download-info h1{background-color:#20a3cb;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.demo:hover h1{margin-left:100%;opacity:0.7;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}
.demo-info{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.demo-info h1{background-color:#a3acb2;}

2.Temanızı kaydederek çıkın.

3.CSS kodlarımınızı ekledikten sonra butonların gözükmesi için yazılarınızın sonuna (HTML) kısmına gelerek eklemeniz yeterli olacaktır.

Her download adresi farklı olacağı için, HTML kodlarını her zaman elle yazı sonuna eklemeniz gerekir.

<div class="download download-info">
<h1> DOWNLOAD </h1>
<ul>
<li><a href="#" target="_blank"> DOWNLOAD 1</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 2</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 3</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 4</a></li>
</ul>
</div>
<div class="demo demo-info">
<h1> DEMO </h1>
<ul>
<li><a href="#" target="_blank"> DEMO 1 </a></li>
<li><a href="#" target="_blank"> DEMO 2 </a></li>
<li><a href="#" target="_blank"> DEMO 3 </a></li>
<li><a href="#" target="_blank"> DEMO 4 </a></li>
</ul>
</div>

Demo
click to view