Sedikit Info Seputar
Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns
Terbaru 2017
- Hay gaes kali ini team Smart Blogger, kali ini akan membahas artikel dengan judul Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns, kami selaku Team Smart Blogger telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Smart Blogger. semoga isi postingan tentang
Artikel Blog,
Artikel News,
Artikel Script, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns
Terbaru
link: Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns
Berbagi Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns Terbaru dan Terlengkap 2017
Bosan dengan tampilan blog anda saat ini??? Atau Apakah space sidebar Blog anda menjadi sangat panjang turun ke bawah karena kebanyakan widget yang anda pasang???, padahal posting artikel di blog sudah habis, kejadian ini biasa dialami oleh bloger yang menggunakan template 2 columns.
Salah satu solusinya adalah dengan mengganti template kita ke template yang 3 columns yang banyak disediakan di situs-situs penyedia template, baik itu gratis maupun berbayar, namun kekurangannya adalah setelah kita mengganti template lama kita beberapa widget yang sudah kita pasang terhapus secara otomatis.
Nah…jika hal ini menjadi masalah buat Anda salah satu solusinya adalah dengan memodifikasi template lama kita, berikut ini adalah cara yang saya lakukan untuk mengubah template blog ini menjadi 3 columns :
Buat catatan kecil sebagai referensi anda dalam menentukan besar template keseluruhan untuk template baru anda, sebagai contoh lihat catatan dibawah ini (template yang saya gunakan adalah template standar blogspot tipe “minima”):
Lebar keseluruhan = 800px
Main wrapper = 400px
Sidebar kanan =200px
Sidebar kiri = 200px
(besar ukuran template sesuai keinginan)
Masuk ke akun blogger Anda, pilih “Tata Letak” kemudian klik “Edit HTML” (pastikan bahasa yang anda pilih adalah bahasa Indonesia).
Untuk menghindari kesalahan saat proses hack code HTML, jangan lupa lakukan backup template (Download Template) ke hardisk PC Anda. Setelah selesai mem-backup template beri tanda centang pada “Expand Widget”.
Tahap pertama “MEMODIFIKASI UKURAN” :
Cari kode dibawah ini (tekan ctrl + F), lalu ubah ukurannya sesuai dengan yang telah direncanakan :
Tahap kedua “MENAMBAHKAN SIDEBAR BARU” :
Cari dan tambahkan lagi tepat diatas kode ini <div id=’main-wrapper’> :
Lebar keseluruhan = 800px
Main wrapper = 400px
Sidebar kanan =200px
Sidebar kiri = 200px
(besar ukuran template sesuai keinginan)
Masuk ke akun blogger Anda, pilih “Tata Letak” kemudian klik “Edit HTML” (pastikan bahasa yang anda pilih adalah bahasa Indonesia).
Untuk menghindari kesalahan saat proses hack code HTML, jangan lupa lakukan backup template (Download Template) ke hardisk PC Anda. Setelah selesai mem-backup template beri tanda centang pada “Expand Widget”.
Tahap pertama “MEMODIFIKASI UKURAN” :
Cari kode dibawah ini (tekan ctrl + F), lalu ubah ukurannya sesuai dengan yang telah direncanakan :
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
Tambahkan kode berikut tepat dibawah kode tersebut sesuai dengan ukuran yang telah direncanakan :width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
Cari kode HTML seperti dibawah ini, lalu ubah ukurannya sesuai dengan yang telah direncanakan tadi :width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
#outer-wrapper {
width : 800px;
margin: 0 auto;
padding: 10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width : 400px;
margin-left: 20px
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
Setelah itu lanjutkan proses peng-Edit-an kode HTML dengan mencari kode seperti ini:width : 800px;
margin: 0 auto;
padding: 10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width : 400px;
margin-left: 20px
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer,
with: 800px;
padding: 0px;
}
body# layout #sidebar-wrapper {
width: 400px;
margin-left: 20px
}
body#layout #sidebar-wrapper,
body#layout#newsidebar-wrapper {
width: 200px
}
body#layout #header-wrapper,
body#layout #footer,
with: 800px;
padding: 0px;
}
body# layout #sidebar-wrapper {
width: 400px;
margin-left: 20px
}
body#layout #sidebar-wrapper,
body#layout#newsidebar-wrapper {
width: 200px
}
Tahap kedua “MENAMBAHKAN SIDEBAR BARU” :
Cari dan tambahkan lagi tepat diatas kode ini <div id=’main-wrapper’> :
<div id='newsidebar-wrapper'>
<b: section class='sidebar' id='newsidebar- preferred='yes'>
<b: widget id='NewProfile' locked='false' tittle='Tentang Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement=’yes’>
<b:widget id='blog1' locked='true' tittle='Blog Posts' tipe='Blog'/>
</b:section>
</div>
Setelah langkah diatas selesai langkah diatas, simpan (SAVE) hasil proses pengeditan kode HTML tadi. Untuk melihat hasilnya tekan tombol “Pratinjau” atau mengatur Widget element template dengan mengatur kembali posisinya dengan mengklik “Tata Letak”.<b: section class='sidebar' id='newsidebar- preferred='yes'>
<b: widget id='NewProfile' locked='false' tittle='Tentang Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement=’yes’>
<b:widget id='blog1' locked='true' tittle='Blog Posts' tipe='Blog'/>
</b:section>
</div>
semoga bermanfaat.
Itulah sedikit Artikel Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns terbaru dari kami
Semoga artikel Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Smart Blogger. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Mengubah Template Standar Blogspot 2 Columns menjadi 3 Columns
