Cara Membuat Slide Demo dan Download Responsive Keren ala Arlinadesign

Hay sobat AS blogger! Kali ini saya akan membagikan tutorial cara membuat slide demo dan download di blog. Tutorial ini saya dapatkan dari salah satu blogger terkenal yaitu mbak Arlina. Slide demo dan download digunakan untuk para blogger template tapi sobat juga bisa menggunakannya untuk mempercantik tampilan blog sobat.

Namun sebelum anda menggunakan tutorial ini sobat sudah harus memasang kode font awesome,untuk pemasangan kode font awesome nanti ada tutornya juga jadi jangan cemas.

Ok langsung saja berikut langkah-langkahnya:

Langkah 1

Silakan salin kode font awesome dibawah ini dan letakkan diatas kode </head>

Kode HTML
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah 2
Masuk dasbor blogger > template > edit html
Salin kode dibawah ini dan letakkan diatas kode </style> atau ]]></b:skin> 

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

Simpan template...

Selanjutnya untuk memanggil slide demo downloadnya silakan buat postingan pada tab html bukan compose dan masukkan kode dibawah ini

Kode HTML

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

#Perhatian!!
Ganti kode kata yang berwarna merah dengan kata yang sobat inginkan
Ganti tanda # dengan alamat situs tujuan

Jika sudah lalu klik publikasikan....Dan lihat hasilnya

Slide Demo dan Download akan tampil seperti dibawah ini

Demo
Click here



Download
Click here

Itulah artikel yang bisa saya bagikan semoga bermanfaat bagi kita semua....