Add sidebar with buttons in the blogger for templates

How to make buttons in Sidebar of blogger site to display download demo and purchase for templates , usually this addition is found on sites that provide templates in general, and today we will talk about how to add them. I will not only share with you the script that makes the box on the left, but also accompanied by boxes and buttons. We also use it to download templates and accessories, and based on your requests, we have put a post for it I think it's a nice touch for webmasters who have download links in abundance.
Now you can see the preview before we go into the explanation

Explain how to install
1. Place the following code above ]]></b:skin> or place it between <style> </style> above </head>

/*Download preview */
    #store-style{overflow:hidden;font-family:Droid Arabic Naskh,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}
    a.storebutton.but3,a.storebutton.but2 { display: inherit; padding: 10px 0; margin: 20px auto; width: 97%; background: #4F4F52!important; }
    a.storebutton.but2 {background: #F9A741!important;margin:0 auto!important}
    #store-style .storebutton:hover,a.storebutton.but3:hover{background:#333!important;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
    .storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:right}
    .storelist:last-child{border-bottom:none}
    .storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}
    

2. Place the following code above </head>

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

3. Find your sidebar code The code varies from template to template and may be like this: <aside id='sidebar-wrapper' or like this: <div id='sidebar-wrapper' and if it is the opposite and you don't know it, just search for the name of the first tool It will direct you to it, then put the following code below

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

4. Save the form
Installing buttons
1. Edit a topic and then go to the HTML tab and put the following code anywhere

<div style="display: none;">
    <div id="Theme-details">
    <div id="store-style">
    <center>
    <a class="storebutton but1" href="Preview link" target="_blank">Live preview</a>
    <a class="storebutton but3" href="Download Link" target="_blank">Download Template</a>
    </center>
    </div>
    <div id="store-style">
    <center>
    <a class="storebutton but2" href="Purchase link" target="_blank">$5 - Paid version</a></center>
    <div class="rio-ss">
    <span class="storelist">permanent support</span>
    <span class="storelist">Design rights removed</span>
    <span class="storelist">used by any blog</span>
    <span class="storelist">There are no encrypted scripts</span>
    <span class="storelist">Change template colors</span>
    <span class="storelist">more...</span>
    </div>
    </div>
    <div style="clear: both;">
    </div>
    </div>
    </div>
    

2. Change the links and words and then post the topic