Cara Membuat Efek Slide Demo dan Download Keren di Blog

Cara Membuat Efek Slide Demo + Download Keren di Blog ~ Halo sobat AS jelas nya kalian para Blogger kembali lagi ya seperti biasa nya dengan saya Aldi Andreansyah yang Alhamdulilah di kesempatan kali ini saya membagikan artikel mengenai blogger yang berjudul Cara Membuat Efek Slide Demo dan Download Keren di Blog.

Terkadang membuat efek demo dan download itu penting untuk para pembaca, karena efek demo dan download tersebut memudahkan untuk mengetahui apa yang di tampilkan seperti misalkan : review widget , review gambar , review animasi dan review yg lain nya.  Efek Demo dan Download ini sebelumnya di buat oleh seorang web designer yaitu mbak Arlina Design , dan saya pun disini hanya untuk sekedar berbagi saja efek tersebut , karena saya mencoba untuk menghargai karya orang dengan cara mencantumkan hasil karya nya sendiri melainkan bukan hasil karya sendiri hehe.

Sebelumnya Efek Demo dan Download ini bertujuan atau memiliki arti pada biasa nya yang saya ketahui yaitu jika Demo ini yaitu sebuah link fitur dimana kita diarahkan untuk memudahkan kita mengetahui review sesungguhnya seperti : review widget , review gambar , review animasi dan review lain nya yang bertujuan untuk mengarah kan fitur yang sesungguhnya . Jika efek Download disini yaitu sepertinya sudah tidak asing lagi ditelinga kita dengan nama nya yaitu download yang berarti sebuah link yang di dalam nya, kita di tujukan untuk mengunduh sebuah sesuatu seperti widget , gambar , musik , aplikasi , game dan masih banyak yang lainnya.  Efek Slide Demo dan Download ini memiliki fitur kelebihan yang terutama yaitu efek nya yang bila kita klik maka otomatis efek tersebut akan slide ( licin ) dengan sendiri nya ,
fitur lain nya adalah memiliki icon font awesome dan colour pada Efek slide Demo dan Download tersebut yang berarti kita dapat mengganti nya dengan sesuai keinginan kita dengan mengubah font awesome sendiri dan juga colour nya sesuai selera hehe.

Oke langsung saja kita ke TKP mengenai Cara Membuat Efek Slide Demo dan Download Keren di Blog di bawah ini , simak langkah nya di bawah ini dengan cermat :

Langkah Pertama :
Pastikan sobat sudah Login terlebih dahulu jika sudah langsung saja ke Menu Template -> Edit HTML -> CTRl+F lalu cari b:skin atau <style> jika sudah ditemukan langsung saja isi CSS di bawah ini tepat di dalam mode b:skin atau <style> tersebut :

 /* CSS DEMO dan DOWNLOAD SLIDE edited by aldiandreansyah */
#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;
} 

lalu klik simpan template

Langkah kedua :
Jika kalian ingin memunculkan Efek Demo dan Download ini maka kalian ke Menu Entri ( buat posting ) lalu kita beranjak ke mode HTML melainkan bukan mode Compose yaa , jika sudah di mode HTML langsung saja isi script HTML di bawah ini isi nya bisa sesuka hati kalian ya hehe , berikut script HTML nya :

 <div id="wrap">
<a class="btn-slide" href="https://www.blogger.com/blogger.g?blogID=7559214632370258218#" 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 class="btn-slide2" href="https://www.blogger.com/blogger.g?blogID=7559214632370258218#" 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> 

Langkah ketiga : jika sudah di isi Script HTML dan CSS di atas maka kalian coba klik publikasi kan untuk mencoba nya jika sudah lalu periksa di postingan sobat apakah bekerja atau tidak Efek Demo dan Download tersebut ? Ya saya harapkan bekerja ya , amin

Demo Click here Download Click here

Oke mungkin cukup sekian dari artikel yang dapat saya bagikan yang mengenai Blogger yang berjudul Cara Membuat Efek Slide Demo dan Download Keren di Blog , semoga bermanfaat dan bekerja semaksimal mungkin , amin

Share this post