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

Step 1 :- First of All You Need to Go to Your Blogger.com

Step 2 :- Then Login with Your Blogger Account.

Step 3 :- After This Click on Theme Menu.

Step 4 :- Now Click on Edit HTML.

Step 5 :- Then Copy the Code Provided Below and Paste it Above the ]]></b:skin> tag in Your Theme.

/* 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}

Step 6 :- Then Copy The Given JavaScript Code and Put it Above The </head>.

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

Step 7 :- Now Look for the code for the blog sidebar, for example <aside id='sidebar-wrapper'> or <div id='sidebar-wrapper> . You can put the Given code below right the Sidebar code.

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

Step 8 :- Then Don't Forget To Click on Save Button to save your work.

How to Apply in Blogger Post

After you finishing the article, change the writing mode from Compose to HTML. Then, paste the code below, right at the end of your article.

<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>

1. Replace #LINK-Preview with a live preview link and Live Preview with a word you like.
2. Replace #LINK-Buy with the purchase page link and $5.20 - Buy Now with the word you like.

Step 2 :- Now publish your article and see the results. Results looks like a theme store.

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.insurancefinances.com

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