Jadi Pintar Cara Menciptakan Tombol Link Keren Di Sidebar Untuk Blogger

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

Dan beberapa hari yang kemudian ada pembaca yang bertanya via email bagaimana cara menciptakan tombol yang ada di sidebar blog ini?  namun gres hari ini aku ada waktu untuk menciptakan postingannya.

untuk lebih jelasnya anda dapat lihat demo berikut ini:

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

Simpan arahan 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 arahan 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 dapat menambah bottom 4 5 6 dan seterusnya jikalau masih kurang
Selesai dan selamat mencoba ...