How to display Download Button in Sidebar Blogger

Posted on January 20th, 2018, 500 viewed

before I ever discuss the tutorial how to easily create custom meta boxes on wordpress, in tutorial metabox you can make download and demo buttons appear in the sidebar just using custom meta box example like my article about Fanstrap Blogger Templates in the article there are download button and demo themes which located in sidebar. but unfortunately this is only applicable to wordpress users only, because bloggers do not have plugin features like wordpress.

Is there still an alternative way for blogger users?
yes there are still alternatives that can do that and in this tutorial I will discuss it in detail hopefully you understand with my explanation.

we can outsmart to get the download button in the sidebar using Javascript AppendChild.

See Also :How To Make Preloader to Website with Jquery Preloadme
Kaskus Emoticons WordPress Plugins
How To Create a Recruitment Form on Blogger Page

What is Javascript AppendChild?
I quote from w3school. definition AppendChild or usage AppendChild is method appends a node as the last child of a node.
still do not understand? I give an example image of Js AppendChild works ..
download box

from within the picture we can know that the Download Element that should be in the article will move to the Sidebar by using JsAppend. where JsAppend functions to move the download element into the element that has been provided for download box on the sidebar.

if still less understand anymore please visit the site w3school here which is described how the work AppsChild Js

In conclusion that you can move the download button that should be inside the article will move into the sidebar. please follow the tutorial below.

Tutorial How to Show Demo and Download Button in Sidebar

1. Choose your blog
2. Click Menu Theme
3. Click Button Edit HTML
4. Find the </body> code
5. Add the code below just above the code </body>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var ykfrom  = document.getElementById("yk_dlbox"),
    ykto    = document.getElementById("yk_dlside");
ykto.appendChild(ykfrom);
//]]>
</script>
</b:if>
download box
6. Find the id='sidebar' code
7. Add the code below just above the code id='sidebar'
<div id="yk_dlside"/>
download box
8. Then Click Save

Usage Demo and Download Button in Sidebar

Every time you want to make a post type downloaded use the element below.

  <div id="yk_dlbox">
    <a href="#"><i class="fa fa-eye"></i> Demo</a>
    <a href="#"><i class="fa fa-download"></i> Download</a>
  </div>
you can edit as you please with the id element must be the same as the id in javascript

Result Download and Demo Button in Sidebar

please note the difference using js AppendChild and not using js AppendChild
Without Js AppendChild

With Js AppendChild

Themes Demo and Download Button

nah for buddy who do not have style for demo or download in sidebar. no need to worry because I have prepared several themes / styles that are ready to use.

Default 1

HTML

  <div id="yk_dlbox">
    <a href="#"><i class="fa fa-eye"></i> Demo</a>
    <a href="#"><i class="fa fa-download"></i> Download</a>
  </div>
href=”#” change # with your url
CSS
#yk_dlbox{margin:10px auto}
#yk_dlbox a{font-family:'Open Sans','Roboto',sans-serif;display:block;text-decoration:none;padding:13px 15px;margin-bottom:5px;background-color:#2f8ae4;border-radius:2px;color:#fff;font-weight:700;font-size:14px}
#yk_dlbox a i{padding-right:10px;font-size:15px;font-weight:400}
#yk_dlbox a:hover{background:#226fbd}
Result

Default 2

style by google images (http://all-free-download.com/free-psd/download/download-button-ui_271293.html)
HTML

  <div id="yk_dlbox">
    <a href="#"><i class="fa fa-eye"></i> Demo</a>
    <a href="#"><i class="fa fa-download"></i> Download</a>
  </div>
href=”#” change # with your url
CSS
#yk_dlbox{margin:10px auto}
#yk_dlbox a{font-family:'Open Sans','Roboto',sans-serif;display:block;text-decoration:none;padding:13px 15px 13px 60px;margin-bottom:5px;background-color:#2f8ae4;border-radius:2px;color:#fff;font-weight:700;font-size:14px;overflow:hidden;position:relative;transition:all .3s ease-in-out}
#yk_dlbox a i{font-size:15px;font-weight:400;background:#1f71c1;border-right:1px solid #1e5f9e;position:absolute;top:0;bottom:0;left:0;line-height:47px;padding:0 5px;width:35px;text-align:center}
#yk_dlbox a i:after{content:"";height:100%;position:absolute;top:0;right:-2px;border-right:1px solid #39f}
#yk_dlbox a:hover{color:#0e4780}
Result

Two Color

HTML

  <div id="yk_dlbox">
    <a href="#"><i class="fa fa-eye"></i> Demo</a>
    <a href="#"><i class="fa fa-download"></i> Download</a>
  </div>
href=”#” change # with your url
#yk_dlbox{margin:10px auto}
#yk_dlbox a{font-family:'Open Sans','Roboto',sans-serif;display:block;text-decoration:none;padding:13px 15px;margin-bottom:5px;border-radius:2px;color:#fff;font-weight:700;font-size:14px}
#yk_dlbox a i{padding-right:10px;font-size:15px;font-weight:400}
#yk_dlbox a:nth-child(1){background:#2f8ae4}
#yk_dlbox a:nth-child(1):hover{background:#226fbd}
#yk_dlbox a:nth-child(2){background:#45C528}
#yk_dlbox a:nth-child(2):hover{background:#4CB735}
Result

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– https://www.kompiajaib.com/2015/07/memindahkan-breadcrumbs-ke-luar.html

Related Post

Please wait....
Disqus comment box is being loaded