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.
