Cara Membuat Tombol Slide Demo dan Download

Tombol Slide Demo dan Download - Kali ini saya akan memposting Cara Membuat Tombol Slide Demo dan Download, caranya sangat mudah silahkan ikuti tutorial berikut:

1. masuk ke blogger

2. Pilih Template >> Edit HTML

3. Cari Kode ]]></b:skin> atau </style>

4. Letakkan kode dibawah tepat diatas kode tersebut

/* CSS Slide Demo and Download Button */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#666;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:16px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.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:#444;font-size:14px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#666;color:#fff;}
.download-info{background:#f9f9f9;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#666;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:16px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.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:#444;font-size:14px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#666;color:#fff;}
.demo-info{background:#f9f9f9;}
.demo-info h1{background-color:#fff;}

5. Untuk menambahkan pada postingan
6. buat postingan baru
7. Copy kode dibawah ini

<div class="download download-info">
<h1>
DOWNLOAD</h1>
<ul>
<li><a href="LINKNYA" target="_blank">DOWNLOAD</a></li>
<li><a href="LINKNYA" target="_blank">DEMO</a></li>
</ul>
</div>

8. lalu pastekan di mode HTML pada postingan
9. untuk mengubah linknya pada huruf berwarna merah

Demonya di : http://cf-spiderman-reboot.blogspot.com

Terima kasih semoga bermanfaat...