Cara Membuat Tombol Demo dan Download Dengan Efek Slide

Cara Membuat Tombol Demo dan Download Dengan Efek Slide | Download adalah salah satu hal yang paling sering dilakukan oleh seseorang di Internet. Oleh karena itu, Para Blogger juga banyak merancang Berbagai Macam Tombol Download Yang Diberi Efek. 

Seorang Blogger juga sering mendownload. Terutama Download Template. Nah, dalam mendownload Template, tentunya kita juga ingin melihat Demo atau Preview dari template yang akan kita download.

Nah, di Artikel kali ini, Saya akan membahas Cara Membuat Tombol Demo dan Download Dengan Efek Slide yang cocok untuk dipasang pada Postingan Download Template. Let's Check It Out!

• Masuk Ke Dashboard Blogger Anda
• Pilih Option Template -> Edit HTML
• Cari Kode ]]></b:skin> (Gunakan CTRL+F Agar lebih mudah)
• Copy CSS Dibawah ini tepat diatas kode ]]></b:skin>

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;<br /> width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}<br /> .download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;<br /> padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}<br /> .download:hover h1{margin-left:100%;}<br /> .download ul {display:inline-block;margin:0;padding:0;}<br /> .download ul li {position:static;display:inline-block;padding:0 .1em;}<br /> .download ul li::before {display:none;}<br /> .download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;<br /> background:none;transition:all 0.5s ease;}<br /> .download ul li a:hover {background:#fc8675;color:#fff;}<br /> .download-info{background:#e27869;}<br /> .download-info h1{background-color:#fff;}<br /> .demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;<br /> width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}<br /> .demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;<br /> padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}<br /> .demo:hover h1{margin-left:100%;}<br /> .demo ul {display:inline-block;margin:0;padding:0;}<br /> .demo ul li {position:static;display:inline-block;padding:0 .1em;}<br /> .demo ul li::before {display:none;}<br /> .demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;<br /> background:none;transition:all 0.5s ease;}<br /> .demo ul li a:hover {background:#48596d;color:#fff;}<br /> .demo-info{background:#333c4b;}<br /> .demo-info h1{background-color:#fff;}

• Lalu Simpan Template
• Selanjutnya, Tinggal buat sebuah Postingan Bertema Download, dan Masukkan Script tempatkan script dibawah ini ditempat anda ingin menaruh tombol Demo dan Download tersebut

<div class="download download-info"> <h1> DEMO & DOWNLOAD</h1> <ul> <li><a href="http://www.bloggerindo.net/" target="_blank"> DEMO </a></li> <li><a href="http://www.bloggerindo.net/" target="_blank"> DOWNLOAD </a></li> </ul> </div>

• Jangan lupa Ganti Link http://www.bloggerindo.net/ diatas menjadi Link Demo dan Download yang anda inginkan
• SELESAI!! Anda bisa langsung cek hasilnya di Postingan yang telah Anda Buat.

UNTUK MELIHAT PREVIEW TOMBOL DEMO DAN DOWNLOAD DENGAN EFEK SLIDE BISA KLIK DISINI

Itulah Cara Membuat Tombol Demo dan Download Dengan Efek Slide. Bagaimana? Sangat mudah bukan? Temukan berbagai Tutorial, Tips, dan Trick Blogging Lainnya hanya di Bloggerindo! Jangan lupa Share Artikel ini ke Social Media Facebook, Twitter, dan G+ Anda. Jangan Lupa Tinggalkan Komentar Anda dikolom Komentar yang ada dibawah.

Share :