Modifikasi Template Blog Brosense V2 Admin : Unknown

Modifikasi Template Blog Brosense V.2 Untuk Pemula, Blogger Template 100% Responsive dan Ringan / Seo Ready Fast dan Responsive.Template blogger untuk naikkan traffic visitor adsense. 

Brosense V.2 | Template Brosense merupakan salah satu template yang banyak digunakan oleh para pengguna blogger, itu karena Template 100% Responsive dan Seo Ready. Walaupun dari segi tampilan kurang begitu menarik kata mas sugeng dalam webnya. Dengan tidak mengaku-ngaku sebagai pembuat template brosense ini saya mencoba sedikit memberikan tips bagi sobat yang baru awam dalam mendesain blognya. Dengan tujuan tidak lain hanya untuk memperindah template blog khususnya Template Brosense V2 ini.

 Gambar template brosense blog catatansaif.blogspot.com
setelah di modifikasi

Tips ini saya tujukan bagi sobat yang memakai template Brosense v1 dan Brosense v2 . Sebagai contoh modifikasi Template Brosense ini saya menggunakan yang Versi 2 dan saya terapkan sendiri untuk blog ini. Untuk sobat yang berminat untuk mempercantik dan memperindah Template Brosense pada blog sobat,silahkan simak tutorial berikut :

Saya mulai dari yang paling dasar yaitu mengubah warna tampilan, jenis huruf dan lainnya.
Pilih Template >> Sesuaikan >> Tingkat lanjut .

Dalam Opsi tingkat lanjut ini sobat bisa mengganti dan menyesuaikan tampilan sesuai keinginan. Jika sudah selesai silahkan Klik Terapkan di Blog.

Untuk pengaturan lainnya :
Pilih Template >> Edit HTML

Mempertebal garis bawah dan atas.
NAVIGASI
Cari tulisan MENU NAVIGATION (Gunakan Ctrl + F pada Keybord - ketik lalu enter),
Dibawah tulisan tesebut cari kode : border-top: 1px dan border-bottom:1px 
Keterangan : border top adalah garis atas,dan border bottom adalah garis bawah, 1px adalah ketebalan garis,ganti angka 1 dengan angka yang sobat inginkan. Jika ingin menghapus garis ganti angka 1 dengan angka 0.

SIDEBAR
Cari tulisan SIDEBAR WRAPPER (Gunakan Ctrl + F pada Keybord - ketik lalu enter),
Dibawah tulisan tersebut cari kode seperti halnya kode pada Navigasi diatas.

FOOTER

Cari tulisan FOOTER WRAPPER (Gunakan Ctrl + F pada Keybord - ketik lalu enter),
Dibawah tulisan tersebut cari kode seperti halnya kode pada Navigasi diatas.

Intinya adalah kode border merupakan kode garis dalam template, selain itu garis pada template ada bermacam-macam,sebagai contoh ada beberapa jenis yang saya ketahui :

border:1px solid = solid merupakan garis lurus
border:1px dotted = dotted merupakan garis putus - putus.
border:1px double = double merupakan garis ganda.

Mengubah ukuran lebar template,lebar sidebar dan posting.
Pada langkah ini saling berhubungan,jadi harap selesaikan ketiga langkah dibawah :

• Mengatur ukuran lebar template.

Cari kode :  max-width:764px (Gunakan Ctrl + F pada Keybord - ketik lalu enter)

Keterangan : Kode diatas ada 2 ( Menu Navigation dan Wrapper ) Ganti semua angka 764 untuk menentukan lebarnya. Blog ini memakai lebar 864px.

• Mengatur lebar sidebar.

Cari Kode : width:160px (Gunakan Ctrl + F pada Keybord - ketik lalu enter)

Keterangan : Ganti angka 160 untuk menentukan lebarnya. Kebanyakan template menggunakan lebar ukuran 300px sama seperti blog ini.

• Mengatur lebar Postingan.

Cari tulisan POST WRAPPER (Gunakan Ctrl + F pada Keybord - ketik lalu enter)

Dibawah tulisan tesebut cari kode : width:100%; 

Keterangan : Terdapat lebih dari satu kode width:100% silahkan kurangi persentase kode yang pertama, misal 81%. Ganti persentase tersebut hingga kolom sidebar dengan kolom posting sejajar atau sesuai. Blog ini memakai persentase 83%.

Menghilangkan gambar tang dan obeng pada widget.
Menghilangkan gambar tang dan obeng pada template selain menambah keindahan blog ini juga menambah Seo pada blog kita, Untuk caranya silahkan lihat tutorial yang saya bagikan sebelumnya KLIK SAYA PLISS ^^

Mengubah ukuran gambar dan bingkai gambar.
Cari kode : .img-thumbnail { (Gunakan Ctrl + F pada Keybord - ketik lalu enter),
Terdapat 2 kode disana silahkan edit kode yang pertama. Kode pertama tersebut seperti ini:

.img-thumbnail {background: $(post.thumbnail.background.color); float:left; width:74px; height:74px; margin:0 10px 5px 0; padding:8px;border:1px solid $(post.thumbnail.border.background.color);}

.img-thumbnail img {width:74px; height:74px;}

Keterangan : kode width:74px;height:74px; Ganti tinggi dan lebarnya sesuai keinginan.

Mengubah tampilan Blog Pager.( Next,Home,Prev )

• Mengubah warna Blog Pager

Cari kode : #blog-pager (Gunakan Ctrl + F pada Keybord - ketik lalu enter)
Dibawahnya terdapat beberapa kode seperti ini :

background:#89C237; adalah warna Blog Pager
color:#fff;adalah warna tulisan Blog Pager

Terdapat beberapa element seperti : #blog-pager-newer-link a { , #blog-pager-older-link a { , a.home-link { dan #blog-pager-older-link a:hover. Jadi silahkan sobat ganti kode warna masing - masing dari element kode tersebut.untuk kodenya sendiri silahkan searching di google.

• Mengubah tampilan Blog Pager

Cari kode : #blog-pager (Gunakan Ctrl + F pada Keybord - ketik lalu enter)
Seperti yang saya terangkan diatas, Terdapat beberapa element seperti : #blog-pager-newer-link a { , #blog-pager-older-link a { , a.home-link { dan #blog-pager-older-link a:hover. hapus semua element tersebut dan ganti dengan kode dibawah ini :

/*Post Navigation */
#blog-pager{position:relative;display:block;width:100%;margin:7px 5px 7px 0;text-align:center}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager a:link, #blog-pager a: visited { color:#eee; font-size:11px!important; padding:4px 7px; margin:5px;background:#444; border:1px solid #ffcc00;}
#blog-pager a:hover{text-decoration:underline}
#blog-pager-newer-link a {float:left;display:block;padding:2px 3px;color:#fff;}
#blog-pager-older-link a {float:right;display:block;padding:2px 3px;color:#fff;}
a.home-link {display:inline-block;padding:2px 3px;color:#fff;}

Keterangan : Ganti kode warna sesuai yang sobat inginkan. Jika tidak ingin menampilkan link dengan garis bawah, silahkan hapus tulisan underline pada kode  #blog-pager a:hover {text-decoration:underline}

Sementara sampai disini silahkan simpan template sobat. Untuk modifikasi selanjutnya akan saya update lagi dilain waktu, untuk selanjutnya mungkin sobat ingin berkreasi sendiri,jadi silahkan dicoba dengan tutorial-tutorial desain yang sobat inginkan. 

Tinggalkan pesan komentar dibawah untuk pertanyaan mengenai modifikasi brosense v2 sebagai masukan untuk saya.