Cara Menciptakan Tombol Slide Demo Dan Download Button
Biasanya tombol-tombol ibarat ini harus dimiliki oleh blog dengan tema download template dan tutorial blogger. Oleh alasannya blog aku sendiri mempunyai niche blog yang sama dengan yang disebutkan diatas maka aku akan membagikan tutorial nya kali ini.
 |
| zkrip |
Tutorial kali ini bukanlah dari admin sendiri melainkan dari blog anggasave yang mempunyai style yang lebih keren berdasarkan mimin.
Bagi anda yang berminat dengan cara berikut ini silahkan diikuti dan dibaca dengan seksama biar anda mengerti cara penggunaannya.
1. Pertama, pastikan blog anda sudah terpasang script dari font-awesome yang ditandai dengan adanya script berikut ini:<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>2. Kedua, masuk ke edit html template kemudian cari kode ]]></b:skin> atau </style> dan sesudah itu copy script dibawah ini kemudian letakkan diatas aba-aba yang telah anda cari sebelumnya.
#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide, .btn-slide2 { 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 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 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 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 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 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }3. Simpan Template
4. Untuk menambahkannya kedalama postingan kalian perlu memanggilnya dengan script berikut ini:
<div id="wrap"> <a href="#" class="btn-slide" 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" 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>Nah, kini anda sudah dapat melihat akhirnya bukan?. Mungkin cukup sekian saja postingan singkat kali ini dan semoga dapat menambah wawasan bagi para blogger sekalian.