Cara Membuat Tombol Demo dan Download di Sidebar Blogspot - Pasti kalian pernah mengunjungi Website Idntheme?, bila pernah pasti kalian pernah melihat tombol Pembayaran/Download berada di Sidebar, dengan tampilan yang begitu Responsive dan juga enak dilihat. Sekarang saya akan membagikan Tutorial Cara Membuat Tombol Demo dan Download di Sidebar Blogspot.
- Masuk ke Akun Blogger > Pilih Tema > Edit HTML
- Cari kode ]]></b:skin> atau </style>, bila sudah ketemu kalian masukan kode css dibawah ini tepat di atas kode ]]></b:skin> atau </style>
/* CSS Winfoku-Download-Button-Side Style */
#winfoku-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
.rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;float:left;color:#888}
#winfoku-style .winfokubutton{display:block;position:relative;background:#ff6550;color:#fff;text-align:left;font-size:1rem;margin:0;padding:16px 20px;border-radius:4px;overflow:hidden;box-shadow:0 1px rgba(0,0,0,.1);transition:all .3s}
#winfoku-style .winfokubutton.but2{background:#3498db}
#winfoku-style .winfokubutton:hover{background:#e55b48;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);}
#winfoku-style .winfokubutton.but2:hover{background:#2f89c5}
#winfoku-style .winfokubutton:after,#winfoku-style .winfokubutton.but2:after{content:'\f105';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;bottom:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:12px 20px;font-family:fontawesome;transition:all .3s;font-size:1.4rem}
#winfoku-style .winfokubutton:hover:after,#winfoku-style .winfokubutton.but2:hover:after{background:rgba(255,255,255,.15);-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
.but1,.but2{padding:14px}
.winfokulist{background:#fff;display:flex;padding:10px 5px;width:100%;float:left;color:rgba(0,0,0,0.5);font-weight:700;border-bottom:1px dashed rgba(0,0,0,0.05);transition:all .6s}
.winfokulist:last-child{border-bottom:0}
.winfokulist:before{content:'\f00c';font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s}
.winfokulist:hover:before{color:#e67e22;}
- Selanjutnya Kalian Cari Kode </head>, Bila sudah ketemu kalian letekan kode dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script>
- Jika sudah simpan.
- Selanjutnya kalian buka Tata Letak > Tambahkan Gadget di Sidebar > Pilih HTML/JavaScript. Tempel kode dibawah ini, lalu simpan.
<a name='details'/>
<div class='clear'/></div></a>
- Langkah terakhir masukan kode dibawah ini dipostingan yang akan ditampilkan Tombol Demo dan Download di Sidebar Blogspot.
<div style="display: none;">
<div id="Theme-details">
<div id="winfoku-style">
<a class="winfokubutton but1" href="#" rel="nofollow" target="_blank">Demo</a>
<div class="rio-ss idb">
<div style="text-align: justify;"> Deskripsi Demo</div></div>
</div>
<div id="winfoku-style">
<a class="winfokubutton but2" href="#" target="_blank">Download</a>
<div class="rio-ss">
<span class="winfokulist">Deskripsi 1</span>
<span class="winfokulist">Deskripsi 2</span>
<span class="winfokulist">Deskripsi 3</span>
<span class="winfokulist">Deskripsi 4</span>
<span class="winfokulist">Deskripsi 5</span></div>
</div>
</div>
</div>
- Jika sudah simpan, dan lihat hasilnya.
EmoticonEmoticon