Cara Memasang Slide Demo Dan Download Button Di Blog
 |
| Cara Memasang Slide Demo dan Download Button |
Cara Memasang Slide Demo dan Download Button di Blog - Pada kesempatan kali ini akan membahas bagaimana Cara Memasang Tombol atau Button Demo dan Download Button di Blog dengan Efek Slide.
Misalkan kalian punya blog download tamplate terus mau menampilkan Button Demo dan Download nah Tutorial kali ini mungkin sangat pas untuk di terapkan di blog agan! hehe
1.Buka Blogger>Tamplate>Klik Edit Html dan terapakan Kode di bawah ini sempurna sebelum </style> atau ]]></b:skin>
#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }2. Simpan Tamplate
3. Selanjutnya untuk Kode Pemanggil di Bawah terapkan di Tap HTML ketika menciptakan atau mengedit Artikel Sobat
<div id="wrap"> <a href="#" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="#" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>Untuk Memperapi Postingan ketika memasukan aba-aba HTML ke dalam postingan sebaiknya gunakan Tekan "Enter" untuk baris gres pada sajian "Pilihan" di samping kiri menyerupai gambar di samping
 |
| Pilih "Enter" semoga tampilan menjadi Rapi |
Hasilnya:
Sekian Tutorial dari , Semoga Bermanfaat