Membuat Sidebar Button Ala Dizigena Theme

Sidebar button

Untuk anda yang membuat blog dengan tema share template Gratis maupun berbayar, penerapan kode css dibawah ini sangatlah penting untuk memudahkan pengunjung yang ingin melihat demo atau mendownload template yang anda bagikan gratis maupun berbayar.

Kode script yang saya bagikan ini adalah kode yang di pakai pada template Dizigena dan tentunya anda yang sering utak-atik template pasti sudah tau siapa pembuat template dizigena ini.

Berikut penerapannya


Cari kode </style> dan letakan kode CSS berikut di atasnya

/* CSS Store Style */
#store-style{background:#f39c12;color:#fff;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
#store-style .storebutton{display:block;position:relative;overflow:hidden;background:#fff;color:#d35400;font-weight:700;border-radius:3px;text-align:center;margin:20px auto 0 auto;transition:all .4s ease-in-out}
#store-style .storebutton:before,#store-style .storebutton:before{content:&quot;&quot;;position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(255,255,255,.4);transform:translate(-50%,-50%)}
#store-style .storebutton:active:before,#store-style .storebutton:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}
#store-style .storebutton:hover,#store-style .storebutton:hover{background:#0eb1f0;color:#fff;position:relative;box-shadow:0 4px 10px rgba(0,0,0,0.15), 0 3px 3px rgba(0,0,0,0.12);}
.rio-ss{overflow:hidden;line-height:normal}.idb{line-height:normal;text-align:center}
#store-style .storebutton:hover{background:#d35400;color:#fff;}
.but1,.but2{padding:14px}
.storelist{background:#fff;display:block;padding:10px 5px;margin:0 0 5px 0;width:100%;float:left;color:#30373c;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
.storelist:before{content:&quot;f14a&quot;;font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s}
.storelist:hover:before{color:#f39c12;}

Simpan Template

Agar kode CSS diatas berfungsi kita memerlukan sebuah kode pemanggil, letakan kode HTML Pemanggil berikut di dalam postingan pada mode HTML bukan Compose

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="LINK-TUJUAN-ANDA" rel="nofollow" target="_blank">LINK-TUJUAN-ANDA</a>
<div class="rio-ss idb">
Isi deskripsi anda bebas di sini</div>
</div>
<div id="store-style">
<a class="storebutton but2" href="LINK-TUJUAN" target="_blank">LINK-TUJUAN</a>
<div class="rio-ss">
<span class="storelist">Deskripsi A</span>
<span class="storelist">Deskripsi B</span>
<span class="storelist">Deskripsi C</span>
<span class="storelist">Deskripsi D</span>
<span class="storelist">Deskripsi E</span></div>
</div>
</div>
</div>

Isi Kode yang ditandai dengan warna merah dengan link tujuan anda dan isi kode yang berwarna ungu dengan deskripsi anda.

Simpan postingan anda dan lihat hasilnya.

Anda juga dapat menyesuaikan warna sidebar button ini sesuai template yang anda gunakan dengan melihat kode warnanya disini.

Demikian Cara membuat Sidebar Button ala Dizigena Theme.

Backup Template terlebih dahulu sebelum menerapkan kode ini
Advertisement
Advertisement

Artikel Terkait

Jangan menunggu kemampuan sebelum anda bersedia Bertindak. Bertindaklah karena itulah yang kelak menjadikan anda mampu