Artikel ini, pertama kali di publikasikan oleh hoctro's dan di publikasikan ulang oleh Kursus Blog dalam Bahasa Indonesia.Pada postingan kali ini, saya akan memberikan tips bagaimana cara memodifikasi template blogger baru anda dengan mudah...
A. Memasuki Halaman Template
1. Jika anda sudah berada di blog anda (sudah login), klik pada menu customize.
2. Jika anda berada dalam suatu blog dan ingin memodifikasi blog anda yang lain, klik pada dashboard.
3. Jika sudah masuk ke dashboard klik layout.
3. Jika sudah masuk ke dashboard klik layout.
B. Ganti ke Edit HTML menu.
Untuk melihat kode struktur template anda, klik edit HTML. Pada defaultnya, Template tersebut tidak menampilkan struktur lengkap sebuah template untuk setiap widget. Jadi apa yang anda liat adalah sebagian kecil kode dari template tersebut. Lihat gambar di bawah ini :
(1) Sebelum memulai memodifikasi template anda, sangat aman apabila anda mendownload dulu template anda.
(2) Jika terdapat kesalahan dalam modifikasi template, silahkan upload kembali template anda.
(2) Jika terdapat kesalahan dalam modifikasi template, silahkan upload kembali template anda.
(3) Ini adalah suatu cara untuk menampilkan kode template anda sepenuhnya (kasih tanda centang)
(4) Untuk menambahkan widget baru, masukan diantar b:section tab di dalam id='sidebar'.
C. Menambahkan kode CSS atau Java Script.
(1) Cara termudah untuk menambahkan kode CSS yaitu diatas kode html]]>
(2) Nah...kalo untuk kode javascript, cara yang termudah yaitu di bawah kode di atas. Untuk lebih jelasnya...lihat gambar di bawah ini :
(3) Selesai......
Jangan lupa ninggalin vote dan commentnya yah.....!
Tips dan Cara memperlebar halaman blog
Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya.Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja.Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :
#outer-wrapper {width: 660px;margin:0 auto;padding:10px;text-align:$startSide;font: $bodyfont;}#main-wrapper {width: 410px;float: $startSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}#sidebar-wrapper {width: 220px;float: $endSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Penjelasan :
Jangan lupa ninggalin vote dan commentnya yah.....!
Tips dan Cara memperlebar halaman blog
Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya.Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja.Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :
#outer-wrapper {width: 660px;margin:0 auto;padding:10px;text-align:$startSide;font: $bodyfont;}#main-wrapper {width: 410px;float: $startSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}#sidebar-wrapper {width: 220px;float: $endSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css
#outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :
#outer-wrapper {width: 950px;margin:0 auto;padding:10px;text-align:$startSide;font: $bodyfont;}
Nah…setelah mengganti kode
#outer-wrapper {width: 950px;margin:0 auto;padding:10px;text-align:$startSide;font: $bodyfont;}
Nah…setelah mengganti kode
#outer-wrapper, jangan lupa untuk mengganti kode tag width pada
#main-wrapper dan
#sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width
#main-wrapper dan
#sidebar-wrapper menjadi 500px untuk
#main-wrapperdan 400px untuk #sidebar-wrapper. Sehingga menjadi :
#main-wrapper {width: 500px;float: $startSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#main-wrapper {width: 500px;float: $startSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#sidebar-wrapper {width: 400px;float: $endSide;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Untuk merubah lebar kolom pada #main-wrapper dan
Untuk merubah lebar kolom pada #main-wrapper dan
#sidebar-wrapper, harus sesuai dengan lebar kolom pada
#outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.
Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode
Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode
#footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper).Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template. Ok….selamat mencoba.
Jangan lupa ninggalin vote dan commentnya yah.....!
Jangan lupa ninggalin vote dan commentnya yah.....!
