Cara Membuat Tombol Download Di Sidebar

Cara Membuat Tombol Download Di Sidebar - 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 Download Di Sidebar.

Catatan :

Ikuti Langkah - Langkah Dengan Baik Dan Benar

Membuat Tombol Download Di Sidebar

Masuk Ke Blog > 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 Button-Side Style */
#store-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}
#store-style .storebutton{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}
#store-style .storebutton.but2{background:#3498db}
#store-style .storebutton: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);}
#store-style .storebutton.but2:hover{background:#2f89c5}
#store-style .storebutton:after,#store-style .storebutton.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}
#store-style .storebutton:hover:after,#store-style .storebutton.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}
.storelist{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}
.storelist:last-child{border-bottom:0}
.storelist: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}
.storelist: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>

Selanjutnya kalian cari kode <asside id='sidebar-wrapper'> atau <div id'sidebar-wrapper'>, Lalu letakan kode dibawah ini tepat dibawah kode <asside id='sidebar-wrapper'> atau <div id'sidebar-wrapper'>

<a name='details'/>
<div class='clear'/>

Cara Pemasangannya

Pindah mode post dari Compose ke HTML dan letakkan kode dibawah ini.

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="LINK-TUJUAN" rel="nofollow" target="_blank">Preview</a>
<div class="rio-ss idb">
Your description here.</div>
</div>
<div id="store-style">
<a class="storebutton but2" href="LINK-TUJUAN" target="_blank">IDR 10K Download</a>
<div class="rio-ss">
<span class="storelist">Deskripsi 1</span>
<span class="storelist">Deskripsi 2</span>
<span class="storelist">Deskripsi 3</span>
<span class="storelist">Deskripsi 4</span></div>
</div>
</div>
</div>

Live Preview

Itulah Cara Membuat Tombol Download Di Sidebar, Semoga bermanfaat di tutorial kali ini, jangan lupa untuk berkomentar dan juga share ke sosial media.