Cara Membuat Dan Menambahkan Sidebar Widget Di Bagian Kiri Post

Setiap tema atau template blog mempunyai gaya yang berbeda-beda khususnya dalam tampilan. namun secara umum rata-rata tampilan blog menggunakan 2 kolom, bagian kolom pertama untuk area posting dengan posisi di bagian kiri dan bagian kolom kedua untuk sidebar widget.dengan posisi kanan.

Seperti template yang di gunakan oleh Tipdantrik. tema ini buatan mas sugeng yang di beri nama Evo Magz yang bisa anda dapatkan dengan 2 cara gratis dan berbayar, template ini juga menggunakan 2 kolom dengan pembagian kiri untuk posting dan kanan untuk sidebar.

Oh ya, template ini saya beli langsung dari mas sugeng jadi bukan gratisan dan saya berhak untuk melakukan modifikasi sesuai dengan keinginan saya, jika terjadi kerusakan gara-gara modifikasi yang saya lakukan maka akan menjadi tanggung jawab saya sendiri.

Jarang sebuah template menggunakan 3 kolom, kalaupun ada biasanya letak dan posisi kolom tersebut tidak sesuai dengan harapan yang diinginkan. Oleh karena itu saya berusaha belajar mencari tahu bagaimana membuat sidebar kiri sehingga sesuai dengan apa yang di harapakan, jadi alasan utama ingin menambahkan sidebar kiri karena faktor berikut :

1. Ingin menempatkan Iklan Adsense karena saya pikir posisi ini sangat strategis, pengunjung akan selalu fokus dengan iklan yang selalu berada di samping kiri baik pada Home page maupun di halaman artikel. Jadi, kemungkinan akan meningkatkan CTR akan sangat besar.
2. Belajar melawan ketakutan. Jujur saya tidak percaya diri ketika modifikasi template evo magz ini karena saya sadar dengan kemampuan yang saya miliki masih jauh dari kata lumayan. Apa lagi harus mempelajari struktrur secara keseluruhan sehingga sidebar kiri bisa berdampingan secara normal dan sejajar dengan post wrapper serta sidebar kanan.

Sekarang kita lanjutkan ke tahap pembuatan Sidebar kiri tempatnya sidebar ini akan berada tepat di sebelah kiri kolom post artikel (post-wrapper).

/* SIDEBAR BGN KIRI */
#sidebarkiri-wrapper{
width:16%;
max-width:160px;
float:left;
word-wrap:break-word;
overflow:hidden;
background:transparent;
margin: 0 auto;
}
.sidebarkiri-container{
 padding: 15px 0;
}
#sidebarkiri-wrapper li{
border-bottom:1px solid #f9f9f9;
padding:0 0 3px 0;
margin:0 0 3px 0;
}

#sidebarkiri-wrapper a:link,#sidebarkiri-wrapper a:visited{color:#555}
#sidebarkiri-wrapper a:hover {color:#c00}
#sidebarkiri-wrapper h2{
font-size:120%;
padding:5px 0;
margin:0 auto;
}
@media only screen and (max-width:640px){
#sidebarkiri-wrapper{display:none}}
@media screen and (max-width:600px){
#sidebarkiri-wrapper{display:none}}
@media only screen and (max-width:480px){
#sidebarkiri-wrapper{display:none}}
@media screen and (max-width:320px){
#sidebarkiri-wrapper{display:none}}

Copy kode CSS diatas dan letakkan tepat di atas ]]></b:skin> atau </style> . Bagi yang belum tahu untuk cara meletakkan kode CSS tersebut bisa mengikut langkah-langkah berikut. Ada 2 cara :

Pertama Melalui Menu Sesuikan

1. Buka Blogger-->Login, maka dashboard akan terbuka dengan menampilkan menu utama yang berada di sebelah kiri secara berjejer ke bawah.
2. Pilih Tema Sesuaikan, maka secara otomatis akan di arahkan ke Desainer Tema Blogger 
3. Setelah itu, pilih menu Lanjutan, maka di sebelah kanan akan menapilkan beberapa menu, gunakan scroll sampai mentok atau ke bagian paling bawah. setelah itu klik menu Tambahkan CSS dan paste atau tempel kode CSS di atas pada kotak Tambahkan CSS Khusus.
4. untuk menyimpan perubahan silahkan klik tombol Terapkan ke Blog.

Kedua Melalui Menu Edit HTML

1. Buka blogger-->Login
2. Pilih menu Tema-->Edit HTML, maka mode HTML akan terbuka di mana isinya hanya kode mulai dari HTML, CSS, dan Javascript.
3. Gunakan CTRL+F untuk mencari ]]></b:skin> setelah ketemu letakkan kode CSS yang telah anda copy tepat di atas kode ]]></b:skin>
4. Terakhir tekan tombol Simpan Tema untuk menyimpan perubahan yang telah di lakukan.

Tahap selanjutnya adalah melakukan pemanggilan ID dan Class. Silahkan ikuti langkah berikut ini :

Pertama : Buka Blogger-->Login-->Tema-->Edit HTML
Kedua : Gunakan CTRL+F untuk mencari tag content-wrapper atau post-wrapper
Ketiga : copy kode di bawah ini

<aside id="sidebarkiri-wrapper">
  <div class="sidebarkiri-container">
<b:section class="sidebarkiri" id="sidebarkiri" preferred="yes">
  </b:section></div>
</aside>

Keempat : paste kode yang telah di copy dan letakkan di antara tag content-wrapper dan post-wrapper
Kelima : Simpan Tema

Untuk hasil bisa anda lihat pada template ini. Ada beberapa hal yang perlu anda perhatikan jika ingin menambahkan sidebar kiri dekat kolom posting atau main post.

1. Jika anda menggunakan template yang sama dengan Tipdantrik, insyaallah cara ini akan langsung bekerja atau bisa, tinggal ikuti saja step by step.
2. Jika menggunakan tema yang lain, silahkan perhatikan Lebar kolom posting, setelah itu kurangi dengan lebar sidebar yang mau di buat. contoh, awalnya lebar kolom post (post-wrapper) evo magz adalah 70% dan 700px sedangkan sidebar yang mau di buat lebarnya 160px dan 16%. Jadi, tinggal mengurangi lebar post yang 700px dengan 160px sehingga hasil akhir lebar kolom post (post-wrapper) adalah 540 px atau 54%.
3. Ingat harus benar-benar paham struktru template yang digunakan dan resiko tanggung sendiri.
4. Kemungkinan tata letak akan berubah
5. Sidebar ini hanya akan tampil pada view Desktop dan tidak akan merubah responsive dari bawaan template
6. Jika belum di tambahkan widget maka posisi sidebar ini akan berada di tengah atau antara sidebar kanan dengan kolom post
7. kunci utma dalam mengatur posisi sidebar kiri ini adalah Padding dan Margin.

Semoga pengalaman saya ini memberi manfaat bagi anda yang sedang mencari tutorial tentang cara menambahkan sidebar di bagian kiri atau cara menambahkan sidebar kiri untuk evo magz sehingga menjadi 3 kolom.

kotak subscribe

Subscribe to receive free email updates: