Cara Membuat Tombol Slide Demo Dan Download Button

Biasanya tombol-tombol seperti ini harus dimiliki oleh blog dengan tema download template dan tutorial blogger. Oleh karena blog saya sendiri memiliki niche blog yang sama dengan yang disebutkan diatas maka saya akan membagikan tutorial nya kali ini.

Memebuat Demo dan Download Button di Blog
zkrip
Tutorial kali ini bukanlah dari admin sendiri melainkan dari blog anggasave yang memiliki style yang lebih keren menurut mimin.

Bagi anda yang berminat dengan cara berikut ini silahkan diikuti dan dibaca dengan seksama agar 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'/>
Jika belum ada silahkan tambahkan sendiri script diatas dengan cara meletakkannya di bawah kode <head>

 2. Kedua, masuk ke edit html template lalu cari kode ]]></b:skin> atau </style> dan setelah itu copy script dibawah ini lalu letakkan diatas kode 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, sekarang anda sudah bisa melihat hasilnya bukan?. Mungkin cukup sekian saja postingan singkat kali ini  dan semoga bisa menambah wawasan bagi para blogger sekalian.

Comments

Post a Comment

Popular posts from this blog

Investasi Pada Reksa Dana Untuk Pemula

Image
Sebenarnya ada dua jenis investasi, yakni riil dan non riil (investasi keuangan). Untuk investasi keuangan sendiri ada berbagai macam, mulai dari deposito, reksa dana, obligasi, dan saham. Jika Anda tertarik pada investasi di sektor keuangan, anda bisa memilih instrumen yang sesuai dengan kebutuhan. Artinya pahami risikonya. Untuk Anda yang sama sekali belum pernah berinvestasi di instrumen tersebut, jangan takut dan mengurungkan niat hanya jika tidak tahu caranya. Untuk pemula anda bisa mencoba investasi pada reksa dana, karena dianggap sebagai investasi yang paling mudah dijangkau dan dilakukan oleh para investor pemula. Lalu apa saja yang harus anda lakukan saat ingin berinvestasi di reksa dana bagi Anda yang pemula tanpa rasa khawatir dengan modal yang juga terjangkau? Dan diabawah ini adalah tips berinvestasi di reksa dana yang aman: 1. Kenali Apa Itu Reksa Dana Banyak orang yang tidak mengetahui adanya reksa dana sebagai investasi mudah yang bisa dijalankan ole...
Read more

Cara Melihat Orang Yang sudah Membaca Pesan Di Gruop Whatsapp

Image
Oke selamat pagi para sahabat oprek semua, kembali lagi di website sumber tips and trick ini. Dan kali ini admin akan membagikan tips bagaimana cara melihat siapa saja yang sudah membaca pesan kalian pad group whatsaap. Whatsapp Langsung saja ke inti pembahasan agar kalian tidak bosan dengan pengulangan kata yang sering dilakukan oleh banyak blog hamba adsense di luar sana. Pesan di group whatsaap sudah dilihat semua belum ya ? Ini caranya 1. Pastikan di android atau iOs kalian sudah terinstall aplikasi Whatsaap massagger, jika belum silahakan download di playstore . 2. Pastikan jika anda sudah tergabung ke salah satu group whatsaap, karena kalau kalian belum punya tips ini tak ada gunanya, ya kan? 3. Buka aplikasinya, lalu tap beberapa detik pada pesan yang sudah kalian kirim sebelumnya, maka akan ada warna biru transparan yang akan menyelimuti pesan anda 4. Setelah itu tap pada tiga titk sejajar yang ada di sudut kanan atas 5. Biasanya akan muncul kotak dialog kecil yang memberikan p...
Read more

Pengalaman Diterima Adsense Full Approve

Image
Di dunia blogger sudah sangat terkenal sekali bahwa untuk menjadi publisher adsense  itu susahnya minta ampun. Sudah berbagai cara dicoba oleh banyak blogger dan hanya sedikit yang diterima. Dan kali ini, disini saya akan menceritakan pengalaman saya ketika pertama kali di terima adsense. 1. Kesan dan Perjuangan Saya ngeblog sudah hampir satu tahun mungkin, dan sudah membuat 3 blog serius yang dua sudah collaps dan yang satu masih bertahan. Bung Kamis Carimata Totumuh Diatasa adalah nama-nama blog yang sudah saya buat. Awalnya mau ngeblog dengan serius pakai bungkamis , semua sudah saya lakukan dari membangun pembaca di facebook, membuat laman facebook, promosi sana-sini untuk mendapatakan viewers. Lalu ketika saya rasa sudah mantap untuk mendaftar ke adsense, saat itu juga saya langsung daftarkan dan setelah beberapa hari peninjauan hasilnya adalah tidak diterima. Namun saya tidak menyerah dan mengulanginya lagi, tapi tetap saja tidak diterima. Se...
Read more