Selamat datang agan atau aganwati kali ini saya akan berbagi tips dan trik blogging yaitu cara membuat tombol download dan demo show hide responsive, untuk menerapkannya di blog silakan ikuti beberapa langkah berikut ini;
Langkah
1. Login pada blog Anda masing-masing,
2. Pada menu dashboard blog pilih menu template,
3. Lalu pilih menu edit html,
4. Cari kode </head> dengan cara Ctrl
+F
,
5. Jika sudah ditemukan copy script di bawah ini, script ini berguna untuk mengaktifkan elemen font awesome, jika sudah memiliki script seperti di bawah dianjurkan tidak memasangnya kembali, agar berjalan sempurna dan tidak menimbulkan konflik elemen,
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
6. Jika sudah paste tepat di atas kode </head>,
7. Setelah itu cari kode </b:skin> dengan cara Ctrl
+F
,
8. Lalu copy script di bawah ini,
/* Download and Demo White Button Show Hide */
.whitebutton {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebutton a {
background: #fff;
color: #666;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
}
.whitebutton a:before {
content: '\f019';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -12px;
margin-right: 6px;
}
.whitebutton span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Arial', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebutton .up {
background: #e25734;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down {
margin: -30px auto;
opacity: 0;
border-radius: 5px 5px 0 0;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down:before {
content:'\f14a';
font-family: FontAwesome;
font-weight: normal;
margin-right: 6px;
color: #aaa;
}
.whitebutton:hover .up {
opacity: 1;
transform: translate(0,0);
}
.whitebutton:hover .down {
opacity: 1;
transform: translate(0,-90px);
}
.whitebuttondemo {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebuttondemo a {
background: #e25734;
color: #fff;
display: block;
font-size: 17px;
font-weight: 700;
font-family:'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
transition: 350ms;
}
.whitebuttondemo a:before {
content:'\f002';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -12px;
margin-right: 6px;
}
.whitebuttondemo a:hover {
color: #fff;
}
.whitebuttondemo span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Arial', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebuttondemo .up {
background: #444;
margin: -25px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebuttondemo:hover .up {
opacity: 1;
transform: translate(0,0);
}
9. Lalu paste tepat di atas kode </b:skin>,
10. Simpan.
Penerapan
1. Jika digunakan dalam artikel posting, ubah jenis artikel dahulu dari compose menjadi html,
2. Setelah itu copy script di bawah ini,
<div class="whitebuttondemo">
<a href="LINK DEMO" title="TITLE" target="_blank">JUDUL DEMO</a><br />
<span class="up">click to view</span></div>
<br />
<div class="whitebutton">
<a href="LINK DOWNLOAD" title="TITLE" target="_blank">JUDUL DOWNLOAD</a><br />
<span class="up">click to begin</span><br />
<span class="down">2210MB .rar</span></div>
<br />
<br />
Jangan lupa ubah link dan judul demo dan download Anda!
3. Selesai.
Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.
