Cara Membuat Tombol Link Keren di Sidebar Untuk Blogger
Cara Membuat Tombol Link Keren di Sidebar Untuk Blogger

Cara Membuat Tombol Link Keren di Sidebar Untuk Blogger


Awalnya saya membuat banner untuk promosikan beberapa postingan jual beli aplikasi pendidikan seperti kas umum versi BOS atau BOP RA, dan aplikasi tabungan siswa. Hanya saja dengan menggunakan banner berupa gambar akan menambah berat loading blog, dan akhirnya saya berinisiatif untuk menggantinya dengan sebuah tombol / bottom yang mengarah ke postingan tersebut dan saya pasang di sidebar blog ini supaya loading lebih cepat. Anda bisa melihat sendiri seperti apa (jika tidak dihapus).

Dan beberapa hari yang lalu ada pembaca yang bertanya via email bagaimana cara membuat tombol yang ada di sidebar blog ini?  namun baru hari ini saya ada waktu untuk membuat postingannya.

untuk lebih jelasnya anda bisa lihat demo berikut ini:


bagaimana anda tertarik untuk mencobanya? silahkan simak pesan-pesan berikut ini:

Simpan kode CSS dibawah ini diatas </head>

<style>
/*<![CDATA[*/
.bottom-sidebar{display:inline-block;box-sizing:border-box;width:300px;height:auto;background:#3f474e;padding:10px 10px 5px;margin:0;border:1px solid #e9ebee}
.bottom1,.bottom2,.bottom3{color:#fff!important;display:inline-block;padding:6px 12px;margin-bottom:5px;font-size:16px;font-weight:600;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;text-decoration:none;width:100%;box-sizing:border-box}
.bottom1{background-color:#d9534f;border-color:#973A37}
.bottom2{background-color:#337ab7;border-color:#245580}
.bottom3{background-color:#c09;border-color:#8E006B}
.bottom1:hover{background-color:#973A37}
.bottom2:hover{background-color:#245580}
.bottom3:hover{background-color:#8E006B}
/*]]>*/
</style>

kemudian simpan kode berikut ini di widget sidebar

<div class="bottom-sidebar">
<a class="bottom1" href="URL-TUJUAN" target="_blank" title="TITLE">JUDUL</a>
<a class="bottom2" href="URL-TUJUAN" target="_blank" title="TITLE">JUDUL</a>
<a class="bottom3" href="URL-TUJUAN" target="_blank" title="TITLE">JUDUL</a>
</div>

Anda juga bisa menambah bottom 4 5 6 dan seterusnya jika masih kurang
Selesai dan selamat mencoba ...
Advertisement

Baca juga:

Your Reactions:

Admin
Hanya ahli tidur yang ingin berbagi saat bangun, itu saja!!!