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.

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 ...