Cara Membuat Tombol Download Dan Demo Show Hide Responsive

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

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

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.

Catatan pinggir

Obrolan pembaca 12

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

Satriyo Katrox5 March 2015 at 11:29
Keren nih..cocok banget buat blog download bro
fadhilakbarblogger5 March 2015 at 11:38
Keren gan... lu nipu ane ya :3
Unknown5 March 2015 at 11:51
thanks bro .. ijin coba
Putuberbagi11 March 2015 at 14:11
Ternyata seperti ini ya cara membuat link download dengan demo itu. Oke, thanks ya gan tutorialnya.
Jangan lupa mampir balik.
Khoirun Naim20 March 2015 at 03:15
mantaap tamilan kotak downloadnya , harus disimpen nih buat referensi tutorail hehe , izin nyoba ya gan ...
LeonSoftware26 May 2015 at 19:36
Keren Tutornya Ijin Coba Ok

Cara Membuat Tombol Download Dan Demo Show Hide Responsive

Langkah

Penerapan

Obrolan pembaca 12

Comments

Post a Comment

Kontak

Cari tulisan

Pantau tulisan baru

Paspor Pembacaku

Langkah

Penerapan

Baca juga

Comments

Post a Comment

Kontak