Cara Membuat Tombol Download Dan Demo Show Hide Responsive

11:20:00
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
+
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,

Cara Membuat Tombol Download Dan Demo Show Hide Responsive

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.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

12 Comments

Zoomx Satriyo 5 March 2015 at 11:29

Keren nih..cocok banget buat blog download bro

Renaldy Ramadani 5 March 2015 at 11:33

:2thumbup iya bro cocok banget

fadhilakbarblogger 5 March 2015 at 11:38

Keren gan... lu nipu ane ya :3

Dion VFX 5 March 2015 at 11:51

thanks bro .. ijin coba

Renaldy Ramadani 5 March 2015 at 12:07

:2thumbup nipu apaan :3

Renaldy Ramadani 5 March 2015 at 12:09

:2thumbup wokeh bro :v

Putuberbagi 11 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.

Renaldy Ramadani 11 March 2015 at 16:31

:2thumbup sip gan

khoirun naim mian 20 March 2015 at 03:15

mantaap tamilan kotak downloadnya , harus disimpen nih buat referensi tutorail hehe , izin nyoba ya gan ...

Renaldy Ramadani 20 March 2015 at 17:44

Yoi gan :3 silakan :)

LeonSoftware 26 May 2015 at 19:36

Keren Tutornya Ijin Coba Ok

Renaldy Ramadani 27 May 2015 at 13:17

yoi gan silakan :2thumbup