How To Add Live Preview Button on Sidebar in Blogger

Hello Everyone, Today in this post I am going to share a tutorial on How To Add Live Preview Button on Sidebar in Blogger. Are you openning a blog to sell a product?, for example, if you sell Blogger templates, then you need a live preview / demo and buy button to convince your buyers that this is the template that I sell.

If you are agree, you need to install the preview and buy buttons on sidebar of the blog. The purpose of installing this button is to make it easier for your buyers to see and buy your work and its very strategic location, besides that, it is also comfortable to see.

You can install this buttons only in Blogger platform not available for Wordpress. Only HTML, CSS and JavaScript have been used to make it. If you want to install it on your blogger website then follow the step by step below:-

How To Add Live Preview Button on Sidebar in Blogger

Note :- Before starting this tutorial backup your blogger theme to avoid from any errors and problems.

How to Install Preview and Buy Buttons in Blogger

/* All Code of www.idblanter.com */ 
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px} 
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}
.rio-ss{padding-top:15px;overflow:hidden}
.idb{line-height:1.5;padding:25px 0 5px} 
#store-style .storebutton:hover{background:#333;color:#fff}
.but1{padding:10px 95px}
.but2{padding:10px 84px} 
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left} 
.storelist:last-child{border-bottom:none} 
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script>

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

How to Apply in Blogger Post

<div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="storebutton but1" href="#LINK-Preview" target="_blank">Live Preview</a></center>
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<center><a class="storebutton but2" href="#LINK-Buy" target="_blank">$5.20 - Buy Now</a></center>
<div class="rio-ss">
<span class="storelist">Support Template Update</span>
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">Support Color Change</span>
<span class="storelist">And Much More...</span>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>

Conclusion

I hope you liked this post a lot. This is a best tutorial on How To Add Live Preview Button on Sidebar in Blogger. if you have face any error and problem you can ask in the comment section without any hesitate. Thanks For Reading This Post.

Reference:
www.techyjeeshan.xyz

Our Posts Are Protected with Google Removal Tool. Don't Copy Our Post. Techy Jeeshan All Rights Reversed.