Cara Memasang Slide Demo dan Download Keren di Blog Ala Arlina Design

Cara Memasang Slide Demo dan Download Keren di Blog Ala Arlina Design -- Siapa yang tak kenal dengan Arlina? Blogger yang sudah mentasbihkan dirinya sebagai salah satu pembuat template dan design Blogger ternama negeri kita ini. Banyak dari hasil karyanya yang sudah dinikmati oleh blogger terutama di wilayah Indonesia. Design template yang simple namun elegan adalah ciri khasnya. Tak hanya itu feature template yang soft dan enak di pandang mata adalah salah satu kelebihannya. Alhasil banyak dari blogger penjuru negeri yang berbondong-bondong untuk meredesign karyanya. Mencari-cari apa sih rahasia yang dia miliki. Salah satu yang banyak di cari-cari adalah tombol demo dan download yang menarik yang telah dibuatnya.

[Baca Juga : Cara Memasang Script Adsense di Tengah Artikel]

Bagaimana sih cara membuat tombol demo dan download yang di miliki oleh Arlina? Itulah mungkin beberapa pertanyaan yang muncul dalam benak banyak blogger sekarang ini. Nah, untuk membantu menjawab itu admin hanya ingin sedikit berbagi tata cara membuatnya. Mau tahu bagaimana cara memasangkannya di blog agar terlihat menawan seperti halnya milik Arlina? Yuk mari bahas tutorialnya.

Cara Memasang Slide Demo dan Download Keren di Blog

Tombol demo dan download kali ini akan sama seperti milik Arlina yaitu memiliki efek slide. Tombol kali ini memiliki efek animasi yang unik sehingga menimbulkan efek bangga bagi penggunanya. Hati-hati nanti kecanduan. :-D

[Baca Juga : Cara Meningkatkan Jumlah Penonton Channel Youtube]

Ok yuk mari bahas dulu persyaratan yang harus di pasang sebelum memasang tombol slide demo dan download keren ini.

Syarat Pemasangan Tombol Slide Demo dan Download

Sebelum memasang tutorial kali ini sobat harus sudah "Memasang CSS font Awesome" Jika belum maka gunakan script berikut sebelum kode </head>.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Jika sudah berarti sobat sudah siap menerapkan tombol slide demo dan download yang keren. Kita mulai langkah-langkahnya.

Langkah-Langkah Memasang Slide Demo dan Download Keren di Blog

1. Buka Blog sobat masing-masing
2. Klik "Template" di dashboard blog milik sobat.
3. Tekan "Edit Template" kemudian terapkan kode berikut sebelum </style> atau ]]></b:skin. (Kode ada di bawah)
4. Klik Save/Simpan

#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;
}

Sampai disitu langkah memasang script kode sudah berhasil. Namun bagaimana untuk menerapkannya di blog? Ini adalah script pemanggil yang dapat digunakan. Masukkan di tab HTML saat menulis artikel bukan di tab Compose.

<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>

Ini hanya sekedar saran saja bagi kalian yang mau menggunakan tombol slide demo dan download keren ini agar nampak lebih rapi saat memasukkan kedalam artikel kode HTMLnya. Ikuti sesuai petunjuk.

Jangan lupa klik Simpan terlebih dahulu. Jika sudah selesai tahapan diatas untuk melihat demonya sobat dapat melihat hasilnya seperti dibawah ini.

Demo
Click here



Download
Click here

Bagaimana hasilnya? Sobat tertarik untuk menggunakan. Kalau mau silahkan praktekkan dan semoga bermanfaat bagi siapa saja yang menggunakannya.

[Baca Juga: Cara Meningkatkan Jumlah Pengunjung Blog 10k Perhari]

Salam Blogging