Cara membuat button demo dan download dinamis ala idntheme
Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme dot com Arlina Design. Setelah sekian lama saya jarang posting tutorial, pada hari ini saya akan membuat tutorial mengenai Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme dot com Arlina Design.


Maksudnya apa button demo dan download di sidebar dinamis dari postingan itu?

Oke, jadi begini maksudnya. Button demo dan download dibuat dari artikel/postingan yang kita buat, namun akan ditampilkan pada sidebar blog kita. Bagus kan?

Untuk siapa tutorial button demo dan download di sidebar dinamis dari postingan?

Tentunya bagi sema orang yang suka blogger. Tapi tutorial ini sangat cocok untuk diterapkan pada blog yang ada fitur downloadnya terutama blog download theme blog. Selain itu juga cocok diaplikasikan di blog download buku pdf, lagu, video, dlsb.

Untuk contohnya seperti gambar dibawah, untuk demonya klik demo 

Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme.com



Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme Arlina Design

Ok sekarang saatnya saya memberikan tutorial mengenai Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme Arlina Design. Memasangnya cukup mudah, ada beberapa langkah yang perlu dilakukan oleh anda.


1. Memasukan source code skin dan Java script pada template

  1. Buka template blog anda > Masuk ke Edit HTML > Masukan kode dibawah sebelum kode </head> dengan cara mengcopy pastenya pada blog anda.
    2. <!-- CSS Ready BUTTON ASIDE FROM POST BY RIDOUS -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* BUTTON ASIDE FROM POST */
#demo-style, #download-style {
    background: #f6f8f9;
    display: block;
    overflow: hidden;
    padding: 20px;
    margin: 0 0 20px 0;
}
.button-demo-side, .button-downloadside {
    display: block;
    position: relative;
    background: #ff6550;
    color: #fff;
    text-align: left;
    font-size: 1rem;
    margin: 0;
    padding: 16px 20px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px rgba(0,0,0,.1);
    transition: all .3s;
}
a.button-demo-side,a.button-downloadside {
    color: #FFF;
}

.button-downloadside {
    background: #3498db;
}
.button-demo-side:hover, .button-downloadside:hover {
    background: #e55b48;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);
}
.button-downloadside:hover {
    background: #2f89c5;
}
.button-demo-side:after,.button-downloadside:after {
    content: &#39;f105&#39;;
    background: rgba(0,0,0,0.1);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    font-weight: normal;
    display: inline-block;
    margin: 0 0 0 10px;
    color: #fff;
    padding: 12px 20px;
    font-family: fontawesome;
    transition: all .3s;
    font-size: 1.4rem;
}
.about-side {
    overflow: hidden;
    margin: 0;
    background: #fff;
    display: block;
    padding: 10px;
    width: 100%;
    float: left;
    color: #888;
 font-size: 16px;
    line-height: 1.45;
}
.about-side-2 {
    overflow: hidden;
    line-height: normal;
    margin: 0;
    background: #fff;
    display: block;
    padding: 10px;
    width: 100%;
    float: left;
    color: #888;
}
.download-feature-list {
    background: #fff;
    display: flex;
    padding: 10px 5px;
    width: 100%;
    float: left;
    color: rgba(0,0,0,0.5);
    font-weight: 700;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    transition: all .6s;
}
.download-feature-list:before {
    content: &quot;f00c&quot;;
    font-family: FontAwesome;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    margin: 0 5px 0 0;
    transition: all .6s;
}
</style>
</b:if>
  2. cari kode seperti ini <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> Lalu masukan kode dibawah tepat dibawah kode tersebut
    3. <div id='sidebar-demo'/>
  <div id='sidebar-download'/>
  3. Setelah itu masukan kode Java Script dibawah sebelum kode </body>
    4. <script>
  document.getElementById(&#39;sidebar-demo&#39;).appendChild(
    document.getElementById(&#39;demo-side&#39;)
  );
  document.getElementById(&#39;sidebar-download&#39;).appendChild(
    document.getElementById(&#39;download-side&#39;)
  );
</script>
  4. Setelah itu, klik Save atau simpan

2. Membuat postingan

Setelah menerapkan source code skin dan js untuk membuat button demo dan download di sidebar dinamis dari postingan ala idnthemeArlina Design, saatnya kita membuat postingan.
Silahkan masukan kode dibawah pada mode HTML saat membuat postingan. 
<div id="demo-side">
<div id="demo-style">
<a class="button-demo-side" href="http://ridous.blogspot.com/" rel="nofollow" target="_blank">Live Preview</a>
<div class="about-side">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
</div>
<div id="download-side">
<div id="download-style">
<a class="button-downloadside" href="http://ridous.blogspot.com/" target="_blank">Download Gratis</a>
<a class="button-downloadside" href="http://ridous.blogspot.com/" target="_blank">$7 - Buy Now</a>
<div class="about-side-2">
<span class="download-feature-list">Support Template Update</span>
<span class="download-feature-list">Remove Footer Credits</span>
<span class="download-feature-list">For Unlimited Domains</span>
<span class="download-feature-list">No Encrypted Scripts</span>
<span class="download-feature-list">And Many More...</span></div>
</div>
</div>


Lihat langsung hasil dari Cara membuat button demo dan download di sidebar dinamis dari postingan ala idntheme Arlina Design.