1 Langkah agar Widget Sidebar Blogspot Responsive

Untuk memenuhi trending style di abad internet, menyesuaikan dengan pasar teknologi yang lagi dibanjiri oleh berbagai perangkat multi media, maka selayaknya seorang blogger yang aktif juga kudu turut kebagian tugas mengikuti perkembangan pangsa pasar. Tujuannya guna memberikan kemudahan kepada user secara visual, dalam rangka menerapkan kesesuaian tampilan website atau blog dengan layar device. Salah satunya dengan cara pemilihan template responsive, dan umumnya baru-baru ini jenis template tersebut sudah cukup melimpah, baik yang gratisan sampai yang berbayar. Tetapi kadang, tampilan sidebarnya perlu mendapat sentuhan khusus agar responsive. Efeknya, tampilan blog jadi lebih menarik sejuk dipandang dan enak dilihat. Tentunya, ini adalah salah satu cara memanjakan pandangan mata, bagian dari memberi kenyamanan pada visitor agar mereka betah berlama-lama.

Jika sudah mengatur template ke posisi responsive, maka otomatis widget pada sidebar blog secara otomatis akan mengikutinya. Salah satu langkah agar tampilan template responsive adalah memberi kode tambahan pada sticky widget. Caranya sebagai berikut.

Sign in ke dasbor blog anda, pilih menu “Template”, lalu klik “Edit HTML”. Perhatikan kode sticky widget, struktur penulisan biasanya seperti di bawah ini. Walaupun anda beberapa template yang berbeda, tapi jika template tersebut tergolong kategori responsive maka setidaknya cara penulisan elemen agak-agak mirip. Misalnya;

.sticky {
position:fixed;
top:10px;
z-index: 100;
}

Kode “position:fixed;" adalah posisi dari elemen yang akan tetap berada posisi yang ditentukan, walaupun browser di zoom-in/out atau di scroll ke atas/bawah. Maka ubahlah penulisan kode tersebut menjadi “position:relative;”. Tujuannya, agar tampilan blog mengikuti ukuran device yang digunakan. Sehingga cara penulisan kode jadi seperti ini;

.sticky {
position:relative;
top:10px;
z-index: 100;
}

Cari kode yang mirip dengan di bawah ini. Disebut mirip karena bisa saja tulisan angka-angkanya berbeda, tentunya itu disebabkan oleh ukuran template yang tidak sama.

@media screen and (max-width: 759px) {.tinynav2,#search-top,.tinynav1{display:block;}}
@media screen and (max-width: 634px) {.tinynav2{width:550px;}}
@media screen and (max-width: 594px) {.tinynav2{width:430px;}}
@media screen and (max-width: 474px) {.tinynav2{width:370px;}}
@media screen and (max-width: 394px) {.tinynav2{width:294px;}}
@media screen and (max-width: 314px) {.tinynav2{width:218px;}}

Setelah itu tambahkan kode;
.sticky{position:relative;width:100%;right:auto;}

Maka akan menjadi seperti ini;

@media screen and (max-width: 759px) {.tinynav2,#search-top,.tinynav1{display:block;}.sticky{position:relative;width:100%;right:auto;}}

@media screen and (max-width: 634px) {.tinynav2{width:550px;}.sticky{position:relative;width:100%;right:auto;}}

@media screen and (max-width: 594px) {.tinynav2{width:430px;}.sticky{position:relative;width:100%;right:auto;}}

@media screen and (max-width: 474px) {.tinynav2{width:370px;}.sticky{position:relative;width:100%;right:auto;}}

@media screen and (max-width: 394px) {.tinynav2{width:294px;}.sticky{position:relative;width:100%;right:auto;}}

@media screen and (max-width: 314px) {.tinynav2{width:218px;}.sticky{position:relative;width:100%;right:auto;}}

Cek ulang kembali seluruh perubahan yang sudah dilakukan, supaya tidak terjadi kesalahan penulisan. Kemudian simpan template. Selanjutnya, bisa anda lihat sendiri hasilnya.