Membuat Icon Link Sidebar Blog

Selain SEO untuk mengoptimalkan blog juga dibutuhkan keindahan, baik dari segi kecocokan warna dan kontras, variasi tampilan dan juga loading yang cepat. Tampilan sebuah blog/website sangat berpengaruh bagi para pengunjung begitu juga google. Sidebar sebagai kolom tempat berkumpulnya link artikel yang ada disebuah blog selalu menjadi target utama pandangan setiap orang yang mengunjungi blog. Maka tidak heran jika blog yang tidak menampilkan Widget link artikel (widget label, list archive dan populer post) kebanyakan ditolak oleh adsense.

Berbicara tentang keindahan tampilan sebuah blog disini kita akan coba membuat hiasan berupa membuat icon link pada setiap link yang ada disidebar blog.

Langkah-langkah

Masuk ke edit html blog, sebelum backup dulu seluruh template bilamana terjadi kesalahan.

Cari kode .sidebar li{, caranya tekan Ctrl+F dan masukkan .sidebar li{ pada kolom search, kira-kira kodenya seperti ini 

.sidebar li {
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}   

 

Jika sudah terlihat gantikan kode tersebut dengan kode berikut

.sidebar li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEYZS_fwZcVnYigJ0u5MMLLeskvG_ERdykDH1tUOVgsFy_P78WjD4lTMqJ9IcIDIYV7Y7b3yJV7Xd0ia_RQo9HWSm6hFA7hp1kcRCMSXAbhIkW4Sm7CiT4EwkDCVb9tGDX_iBIRY0preV/s1600/bullet.png) no-repeat 1px 4px;font:normal 12px Arial;color:#626262;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 3px 17px;border-bottom:1px dashed #ddd}

Kemudian save template anda dan lihat hasilnya

Keterangan:

• Link warna merah adalah link icon anda bisa menggantinya dengan icon yang anda inginkan.
• Warna biru adalah garis putus-putus yang ada dibawah link, untuk mengatur ketebalannya silahkan ganti 1px dengan ukuran yang anda inginkan, untuk mengatur warna garisnya silahkan ganti #ddd dengan warna sesuai selera anda