Cara Membuat Button Download Di Sidebar

Cara Membuat Button Download Di Sidebar - Tampilan button download di sidebar ini biasanya digunakan untuk blog yang membagikan template atau lain sebagainya. Button download di sidebar ini pertama kali digunakan oleh blog IDNTHEME. Berikut ini tutorial untuk membuat button download di sidebar.

Pertama

Login Blog > Tema > Edit HTML > Copy lalu paste kode di bawah ini tepat di atas kode </head>
Kode CSS Button Download di Sidebar
<!-- CSS Ready BUTTON ASIDE FROM POST https://caritutorialblog.blogspot.com/ --> <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>

Kedua

Cari kode yang hampir sama dengan ini <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> > Copy lalu paste kode di bawah ini tepat di bawahnya.
Kode HTML Button Download di Sidebar
<div id='sidebar-demo'/> <div id='sidebar-download'/>

Ketiga

Masukkan kode Java script di bawah ini tepat di atas kode </body>
Kode Javascript Button Download di Sidebar
<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>

Keempat

Entri Baru >  HTML > Copy lalu paste kode di bawah ini.
Kode HTML Button Download di Sidebar
<div id="demo-side"> <div id="demo-style"> <a class="button-demo-side" href="http://caritutorialblog.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://caritutorialblog.blogspot.com/" target="_blank">Download Gratis</a> <a class="button-downloadside" href="http://caritutorialblog.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>

Kelima

Publikasikan > Refresh > Buka Blog > Done.

Komentar

Posting Komentar

Postingan populer dari blog ini

Download Vienna Lite 2 Responsive Blogger Template

Gambar
Featured Template : Responsive SEO Friendly Google Testing Tool Validator Mobile Friendly Dynamic Heading Personal Blog 2 Column Style Custom Threaded Comment Responsive Ad Slot Light Base Theme Color Breadcrumbs Top Navigation Responsive Dropdown Menu Related Posts with Thumb Search Box Social Share Button Smooth Scroll back To Top Custom Subscribe Box Widget Custom Contact Form Widget Custom Sitemap Widget Multi Author Box Well Documentation Live Preview Lihat langsung dengan semua fitur yang ada, baik di beranda maupun halaman posting. Download Gratis Langsung download templatenya disini secara gratis.
Baca selengkapnya

Cara Membuat Logo Google Drive Di CorelDraw

Gambar
      Bang Jariwis ~ Baiklah , kali ini saya akan membagikan tutorial cara membuat logo Google Drive dengan mudah di CorelDraw. Mungkin dari kalian semua , membuat logo Google Drive ini susah. Tetapi setelah saya desain sendiri ternyata sangatlah mudah. Cara membuat logo Google Drive ini mungkin tidak di minati oleh kalian semua. Langsung saja kita simak baik - baik tutorial yang saya berikan di bawah ini. Pertama - Buatlah bentuk segitiga terlebih dahulu menggunakan Polygon Tool (Y) . Contohnya seperti gambar di bawah ini. Kedua - Setelah itu Copy lalu Paste menjadi tiga bagian. Lalu , buatlah seperti bentuk pada gambar di bawah ini. Ketiga - Jika sudah menyelesaikan langkah - langkah di atas . buatlah garis - garis tepi agar tidak berlobang menggunakan 2-Point Line Tool . Pastikan gambarnya sama seperti contoh gambar di bawah ini. Keempat - Potonglah / buanglah bagian - bagian tertentu menggunakan Virtual Segment Delete Tool dan sekarang bentuknya seperti contoh pada gambar di b
Baca selengkapnya

Cara Membuat Logo Xiaomi Di CorelDraw

Gambar
      Bang Jariwis ~ Baiklah kali ini saya akan membuat tutorial cara membuat logo Xiaomi . Saya mendapatkan inspirasi tentang Cara membuat Logo Xiaomi dengan mudah di CorelDraw ini dari anggota grup chat Facebook saya. Yaitu grup KAMPANG . Grup ini memang tidak terkenal sih , karena Grup Facebook chat ini baru saja dibuat. Langsung saja kalian ikuti Tutorial - tutorial yang telah saya buat untuk kalian semua. Pertama - Kalian buatlah bentuk persegi empat seperti gambar di bawah ini menggunakan Rectangle Tool (F6) . Pastinkan bentuk yang kalian buat adalah persegi empat sama sisi .  Kedua - Copy dan Paste Bentuk persegi empat yang telah kalian buat tadi . Agar lebih mudah tekan Ctrl + C lalu Ctrl + V . Setelah itu gunakan Shape Tool (F10) . Lalu tarik kebawah agar bentuk perseginya menjadi tumpul. Ketiga - Potonglah bagian - bagian yang tidak diperlukan sehingga bentuknya berubah menjadi seperti gambar di bawah ini menggunakan Virtual Segement Delete Tool . Keempat - Setelah itu
Baca selengkapnya