Selamat malam sobat,.. Apa kabar,??Untuk malam ini saya akan membagikan trick yang cukup keren dan menarik, Kalau sebelum nya kan saya pernah membuat tutorial tentang "Cara membuat tombol Demo dan Download" nah untuk yang ini beda lagi tombol nya gan kalau fungsi tetap sama cuma beda di tombol nya ajah kalau yang kemarin kan tombol cuma sekedar CSS untuk yang ini menggunakan efek slide,..
Demo nya seperti ini:
Gimana keren kan,..???
Jika sobat berminat memasang CSS slide Demo and Download button tersebut silahkan sobat,
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode
]]></b:skin> atau </style> 4. Lalu tambahkan kode
CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> /* 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;border:1px solid #e9e9e9;}
.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;
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:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.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;border:1px solid #e9e9e9;}
.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;
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:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}
5. Kemudian simpan template sobat
EittzZ belum selesai gan,..6. Untuk kode pemanggil nya sobat COPAS kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML)
<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://irvan-efendy.blogspot.com/" target="_blank"> DEMO </a></li>
<li><a href="http://irvan-efendy.blogspot.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>
Okey,.. Cukup sekian tutorial dari saya,..Semoga Bermanfaat,......