Cara membuat Tombol Download dan Demo Keren di blog
Minggu, 10 Maret 2019
2 Komentar
Banyak tombol Download dan Demo yang bersebaran di Internet, sudah tau gitu kenapa Mimin masih posting tentang tombol live Download dan Demo? ini karena Mimin ingin share request/permintaan dari salah satu anggota group Blogging yang menginginkan tombol Download dan Demo yang keren.
Jika tertarik menggunakan tombol slide Download dan Demo seperti di atas silahkan ikuti tutorialnya sampai selesai.
1. Sobat harus memasang Font Awesome Icons diblog sobat, namun jika sudah ada nih, lewati aja langkah ini. Untuk memasangnya silahkan copy kode berikut tepat sebelum atau di atas kode </head>
2. Copy CSS berikut di atas kode ]]></b:skin> atau </style>
Jika tertarik menggunakan tombol slide Download dan Demo seperti di atas silahkan ikuti tutorialnya sampai selesai.
1. Sobat harus memasang Font Awesome Icons diblog sobat, namun jika sudah ada nih, lewati aja langkah ini. Untuk memasangnya silahkan copy kode berikut tepat sebelum atau di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Copy CSS berikut di atas kode ]]></b:skin> atau </style>
/* CSS Button Download ---- https://dirukana.blogspot.com */
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide-diru,.btn-slide2-diru{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2-diru{border:2px solid #efa666}
.btn-slide-diru:hover{background-color:#0099cc}
.btn-slide2-diru:hover{background-color:#efa666}
.btn-slide-diru:hover span.circle,.btn-slide2-diru:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2-diru:hover span.circle2{color:#efa666}
.btn-slide-diru:hover span.title,.btn-slide2-diru:hover span.title2{left:40px;opacity:0}
.btn-slide-diru:hover span.title-hover,.btn-slide2-diru:hover span.title-hover2{opacity:1;left:40px}
.btn-slide-diru span.circle,.btn-slide2-diru span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2-diru span.circle2{background-color:#efa666}
.btn-slide-diru span.title,.btn-slide-diru span.title-hover,.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{color:#efa666;left:80px}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{left:80px;opacity:0}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{color:#fff}
3. Klik SaveUntuk Cara Pemasangannya
Cara Pemasangan/Penggunaannya sih terbilang sangatlah mudah, terlebih dahulu ubah Compose menjadi HTML pada post sobat. Setelah itu masukkan kode berikut di tempat yang sobat inginkan.<div id="wrap">
<a href="#" class="btn-slide-diru" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2-diru" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
wah keren nih mas thanks info-nya btw jangan lupa berkunjung di www.irvansoft.com yah mas, disana ada banyak tools dan juga template blogger premium loh !
BalasHapusMakasih Telah Mengunjungi Web Kami Jangan Lupa Share ya...
Hapus