How to Show Demo and Download Button in Sidebar in Blogger Blog [Updated]

Are you going to start a template store on blogger. And you want to show your demo and download buttons in the side bar of blog. You are at right place!

If you visit a website that publishes a free download template for Blogspot kinds Soratemplates, Templateism, ThemeXpose, and so for, then you certainly understand the intent of this paper. From the website template provider that you can see, the description of a template as well as the words "Download Free" or "Buy This Theme" appears in the sidebar. Also do not understand? Consider the given box in the thumbnail.

In this tutorial, the script that I share not only the script to display the text in the post sidebar, but also information just like the websites that share templates. For example, we can see in the picture above there is a Live Preview button in the sidebar along with the description and Buy Now button or can be replaced with a Free Download, and under the existing button list of additional features for the premium version.

For those who are still confused to see the template description as shown above, please see the demo:

[##eye## Demo]

How to Show Demo and Download Button in Sidebar in Blogger Blog

1. Go to Blogger > Template > Edit HTML, then put the below code in the head section.

[<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>]

      2. Then put the below code right above ]]></b:skin> or </style>.

[/* CSS StoreStyle */ #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}]

      3. Place the code below just above the code </head>

[<script type='text/javascript'>

/*<![CDATA[*/

$(document).ready(function(){

$('a[name="details"]').before($('#Theme-details').html());

$('#Theme-details').html('');

});

/*]]>*/

</script>]

      4. Save the template.

      5. Place the below code on the side where you want to show the Demo and Download buttons.

[<a name='details'/>

<div class='clear'/>]

      6. Now it's time for the post content. Place the below code in the post HTML editor. This code will be shown in the sidebar.

• [message]
• ##check## Note
• The below code will not appear in the post but will move to the sidebar.

[<div style="display:none">

<div id="Theme-details">

<div id="store-style">

<center><a class="storebutton but1" href="#LINK-DEMO" 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-PURCHASE" 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>]

If you want the original HTML (only written) code, here it is:

[<div style="display:none">

<div id="Theme-details">

/* Text that you want to appear on the blog sidebar.*/

<div style="clear:both">

</div>

</div>]

      7. That's it! Publish the post or save.

Comment below your ideas. Thanks! 🤩

This article " How to Show Demo and Download Button in Sidebar in Blogger Blog [Updated]" is protected by