Cara memasang Slide Tombol Demo Dan Dwonload Di Blog

Pada kesempatan kali ini Riziq Design akan membahas cara memasang slide tombol demo dan dwonload pada blog, kalian pasti tahu kan seberapa penting nya memasang tombol demo dan dwonload? pastinya sangat penting sekali karena bisa untuk membuat tampilan blog kita rapih dan terlihat sangat elegan.

Tombol demo dan dwonload yang akan admin bahas kali ini adalah tombol slide demo dan dwonload, jadi ketika kita klik tombol tersebut maka otomatis akan menggeser dengan sendirinya. Dan untuk demo dari tampilannya kalian bisa lihat di bawah ini.

Demo Click here Download Click here

Gimana keren kan tampilan nya? tombol demo dan dwonload ini juga tidak sama sekali memperberat loading blog jadi kalian tidak usah takut blog kalian jadi lemot, oke lah dari pada kita ngebahas pembahasan yang tidak jelas seperti ini:v kita langsung saja menuju ke tutorialnya silahkan lihat di bawah ini.

1) Masuk Blogger.
2) Pilih Tema => Edit HTML.
3) Lalu cari kode ]]></b:skin> atau bisa juga kode </style> gunakan tombol Ctrl-f untuk mempermudah pencarian.
3) Jika sudah ketemu kalian copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin> atau </style> tadi.

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

4)  Simpan Template.

Dan untuk cara menggunakan nya cukup mudah sekali karena kalian hanya harus mengcopy kode di bawah ini tepat di mode HTML bukan Compose.

<div id="wrap"> <a href="masukkan link tujuan di sini" 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="masukkan link tujuan di sini" 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 ituh dia cara memasang slide tombol demo dan dwonload di blog, gimana mudah sekali bukan? dengan cara ini blog kalian akan terlihat lebih rapih dan profesional di mata pengunjung blog kita.

Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya. 

Facebook Twitter Google+