Cara Membuat Tombol Demo Efek Sliding. Sobat Histutor, pada kesempatan kali ini saya akan membagikan sebuah tutorial Cara Membuat Tombol Demo Efek Sliding, tombol ini memiliki tampilan yang cantik dengan efek sliding, sehingga membuat tampilan blog sobat bertambah keren.
Silahkan sobat ikuti langkah-langkahnya dibawah ini untuk memasangnya di blog kesayangan milik sobat sendiri.
1. Login ke akun blogger sobat |
| Cara Membuat Tombol Demo Efek Sliding |
2. Click On Template » Edit HTML
3. Gunakan Ctrl+F untuk menemukan kode
]]></b:skin> atau </style> 4. Setelah ketemu letakan kode
CSS script diatas kode ]]></b:skin> atau </style> #buttonx {margin:20px auto; text-align:center;}
#buttonx br { display:none; }
.demo-sliding,.download-sliding { position:relative; display:inline-block; height:40px; width:200px; line-height:40px; padding:0; background:#FAFAFA; border:2px solid #F9690E; margin:10px; transition:.5s; }
.download-sliding { border:2px solid #36D7B7; }
.demo-sliding:hover { background-color:#F9690E; }
.download-sliding:hover { background-color:#36D7B7; }
.demo-sliding:hover span.box,.download-sliding:hover span.box2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.download-sliding:hover span.box2 { color:#36D7B7; }
.demo-sliding:hover span.cabonx,.download-sliding:hover span.cabonx2 { left:40px; opacity:0; }
.demo-sliding:hover span.title-hover,.download-sliding:hover span.title-hover2 { opacity:1; left:40px; }
.demo-sliding span.box,.download-sliding span.box2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:32px; height:30px; width:30px; top:0; left:0; transition:.5s; }
.download-sliding span.box2 { background-color:#36D7B7; }
.demo-sliding span.cabonx,.demo-sliding span.title-hover,.download-sliding span.cabonx2,.download-sliding span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.download-sliding span.cabonx2,.download-sliding span.title-hover2 { color:#36D7B7; left:80px; }
.demo-sliding span.title-hover,.download-sliding span.title-hover2 { left:80px; opacity:0; }
.demo-sliding span.title-hover,.download-sliding span.title-hover2 { color:#fff; }5. Untuk dapat menampilkannya tambahkan
HTML/Javascript dibawah ini pada halaman postingan sobat.<div id="buttonx">
<a class="demo-sliding" href="http://histutor.blogspot.com/" target="_blank">
<span class="box"><i class="icon-external-link"></i></span>
<span class="cabonx">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="download-sliding" href="http://histutor.blogspot.com/" target="_blank">
<span class="box2"><i class="icon-download-alt"></i></span>
<span class="cabonx2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>Klik Simpan dan lihat hasilnya.
 |
| Cara Membuat Tombol Demo Efek Sliding |
HISTUTOR DEMO SAMPLE ×
SEMOGA BERMANFAAT
Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan tombol efek slider ini, mari kita bahas bersama!
Demikian sedikit penjelasan tentang Cara Membuat Tombol Demo Efek Sliding, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.
0 Comments: