How to Make Writing in the Post Shown in Sidebar

How to Make Writing in the Post Shown in Sidebar or Make Remarks what we usually see on the website to share templates such as Templateism, Soratemplates, ThemeXpose and sebaginya.

Author: Rhinokage Rio
In this tutorial script that I share not only the script to display the text in the post, but also information such as website content share Template . For example we can see in the picture above there is a buttonLive Preview along with its description, and underneath there is a separate content that is no button Buy Now , 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:

DEMO

Well for my friend who are interested to install it, please follow the tutorial below:

1. Go to Blogger> Template> Edit HTML> then put the code below 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}
#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}

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

3. Find the code for your blog's sidebar, for example, <aside id='sidebar-wrapper' or <div id='sidebar-wrapper' if it can put the code below just above the code earlier.

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

Sidebar wrapper tags in the template are not all the same, so my friend could search for like id='sidebar-right' or id='sidebar' and so on.

Laying example code in step 3 to see in the picture below:

Sample code placement on the 3rd step

Save Template. 

4. At the time of opening of new posts or posts click HTML editor and add the code below and place it in any part.

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

Later the above code will not appear on the post but will move to the sidebar.

Or if you want the original HTML (only written) code like the following:

<div style="display:none">
<div id="Theme-details">
/* The text you want displayed in the sidebar of the blog. */
<div style="clear:both">
</div>
</div>

Then Publish or Save.