How to Create a Store Style Button in the Blogger Sidebar

On this occasion, Enblog.us will provide blogger tips at the request of fellow bloggers here about How to Display the Store Style Button in the Sidebar on a Template.

For those of you who want to have a complete template with a Store Style Button in the Sidebar, it's quite easy! You just need to follow the steps below.

After you install it, you will see a live preview button and a download button, as well as other buttons in the sidebar on the article page of your blog, as shown in the image below.

 Okay, directly...

1. First, open the Blogger page > Click the Theme menu and click the Edit HTML button > Add the code below just above the ]]></b:skin> code or the  </style>  code.

/* Store Style */
#store-style{position:relative;background:#fff;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0;border-radius:22px;border:1px solid rgba(0,0,0,0.07)}.rio-ss{overflow:hidden;line-height:normal;margin:0;display:block;padding:0;width:100%;float:left;color:#000;font-size:14px;font-weight:700}#store-style .storebutton{display:block;position:relative;background:#E233FF;background-image:linear-gradient(to right,#E233FF 0%,#f58a21 51%,#E233FF 100%);color:#fff;font-weight:700;text-align:center;font-size:1rem;margin:0;padding:14px 20px;border-radius:99em;overflow:hidden;box-shadow:0 5px 10px -10px rgba(0,0,0,.3);transition:all 300ms cubic-bezier(0.250,0.100,0.250,1.000);transition-timing-function:cubic-bezier(0.250,0.100,0.250,1.000);background-size:200% auto}#store-style .storebutton.but2{color:#fff}#store-style .storebutton:hover,#store-style .storebutton.but2:hover{color:#fff;box-shadow:0 0 4px 0 rgba(0,0,0,.08),0 6px 12px 0 rgba(0,0,0,.08);background-position:right center}#store-style .storebutton:active{box-shadow:0 1px 0 rgba(0,0,0,0.1);background-position:right center}.but1,.but2{padding:14px}.storelist{display:flex;background:#fff;border:1px solid rgba(0,0,0,0.07);box-shadow:0 5px 10px -10px rgba(0,0,0,.3);padding:5px 16px;margin:0 auto 15px auto;width:100%;float:left;color:#000;font-weight:700;line-height:28px;border-radius:99em;transition:all .6s}.storelist:hover{box-shadow:0 1px 10px -10px rgba(0,0,0,.5)}.storelist:before{content:"\f046";font-style:normal;padding:5px;margin:0 5px 0 0;transition:all .6s;font-family:fontawesome;speak:none;font-weight:500;font-variant:normal;text-transform:none;line-height:1;color:#f39c12;margin-right:.5em;width:25px;height:25px;font-size:20px;-webkit-font-smoothing:antialiased}

 2. Then add the following jQuery code before the </head> code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

 3. Next, add both of the codes below before </body>.

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Endblog
$(document).ready(function(){$('a[name="details"]').before($("#Theme-details").html()),$("#Theme-details").html("")});
//]]>
</script>
</b:if>

 4. Next, install the code below just below the <aside class='sidebar-wrap'> code ( The style code for each template is different, just look for <aside ) or use your browser feature, namely: Inspect

 

<a name='details'/>

 5. For the HTML code ( Below is the html code for the post. )

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="YOU LINK" rel="nofollow noopener" target="_blank">Live Preview 1</a><br />
<a class="storebutton but1" href="YOU LINK" rel="nofollow noopener" target="_blank">Live Preview 2</a><br />
<a class="storebutton but1" href="YOU LINK" rel="nofollow noopener" target="_blank">Live Preview 3</a><br />
<a class="storebutton but1" href="YOU LINK" rel="nofollow noopener" target="_blank">Live Preview 4</a><br />
<a class="storebutton but1" href="YOU LINK" rel="nofollow noopener" target="_blank">Free Version</a><br />
<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">
<a class="storebutton but1 free" href="YOU LINK" rel="nofollow noopener" target="_blank">Free Download</a>
  <br />
<a class="storebutton but2" href="YOU LINK" target="_blank">USD 50$ - Buy Now</a>
  <br />
<div class="rio-ss">
<span class="storelist">Support Theme Update</span><br />
<span class="storelist">Remove Footer Credits</span><br />
<span class="storelist">For Unlimited Domains</span><br />
<span class="storelist">No Encrypted Scripts</span><br />
<span class="storelist">Blogger and Disqus</span><br />
<span class="storelist">Valid Schema.org</span><br />
<span class="storelist">And Many More...</span>
</div></div></div></div>

 Just replace all destination links with your own destination links. ( YOU LINK )

Publish the post and see the results. Okay, that's all, and thank you. If there's anything you don't understand, please leave a comment.