Mengganti Backgroun Tamplate/Blog

Jika ingin mengganti background template pada blog ada dua pilihan yang masing-masing caranya hampir sama. Sobat tinggal pilih mengganti dengan background warna atau dengan gambar/image. Jika ingin mengganti dengan warna sobat tinggal masukkan kode warna menurut selera sobat.

sedangkan untuk gambar sobat harus siapkan alamat gambar/image yang sudah terupload ke tempat hosting di mana sobat menyimpan gambar/image.Dengan ukuran gambar cukup kecil saja. Jika sobat belum jelas bagaimana cara memasukkan kode warna dan alamat gambar/image bisa ikuti cara di bawah ini:

Untuk mengganti background warna pada template klasik:

• Masuk ke blog sobat.

• Pilih tata letak.

• Klik edit HTML.

• Untuk antisipasi backup template dulu.

• Cari kode css seperti di bawah ini:

body { background:#fffff;margin:0;
color:#333333;
font:x-small Georgia Serif; font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
Ganti kode yang berwarna merah dengan kode warna yang sobat inginkan,misal dengan warna kuning kodenya seperti ini: #FFFF33.
Maka hasilnya:
body { background:#FFFF33;
margin:0;
color:#333333;
font:x-small Georgia Serif; font-size/* */:/**/small;
font-size: /**/small; text-align: center;
Agar pengunjung tidak susah untuk membaca sesuaikan warna backround dengan warna tulisan sobat.

• Jika sudah klik save.

• Lihat hasilnya.

Untuk mengganti background gambar/image pada template klasik:

Misal di sini saya punya alamat gambar: http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg
Dengan ukuran seperti ini:

Maka tambahkan alamat tersebut pada kode di atas,hingga hasilnya seperti di bawah ini:
body { background:#ffffff url('http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg');
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;

Untuk mengganti background pada template baru:

• Masuk ke blog sobat.

• Pilih tata letak.

• Klik edit HTML.

• Untuk antisipasi backup template dulu.

• Beri tanda centang pada expand template widged.

• Cari kode css seperti di bawah ini:

body { background:$bgcolor;margin:0;
font:x-small Georgia Serif;
color:#333333;
font-size/* */:/**/small;
text-align: center;
Tambahkan alamat gambar pada kode warna merah,hasilnya seperti di bawah ini:
body { background:$bgcolorurl ('http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg');
margin:0;
font:x-small Georgia Serif;
color:#333333;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;

• Simpan template

• Lihat hasilnya

Cara Mengganti Favicon Blogger

Seperti yang sering kita lihat,sudah banyak sobat blogger yang telah mengganti favicon pada blog mereka. Untuk saat ini tidak ada salahnya jika saya ingin sedikit berbagi sama sobat yang belum mengerti bagaimana cara mengganti icon tersebut. Icon ini letaknya berada di samping kiri pada alamat url milik sobat.

Di bawah ini adalah gambar favicon yang sudah diganti dan yang belum diganti:

Untuk membuatnya sobat harus siapkan dulu gambar iconnya,kemudian upload ke tempat hosting milik sobat dan ambil alamat url nya.Untuk upload file sobat bisa menggunakan layanan pada www.photobucket.com atauwww.geocities.com atau di mana saja,karena layanan ini banyak tersedia di internet.

Contonya sebagai berikut:
Misalnya kita punya alamat seperti ini:

http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif

Tambahkan sedikit kode hingga hasilnya seperti di bawah ini:

<link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
Selanjutnya:

• Login ke blog sobat.

• Klik tata letak.

• Edit HTML.

• Cari kode </head>
  Letakkan alamat favicon yang sobat punya di atasnya,hingga hasilnya sebagai berikut:
  
  <link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
  </head>

• Klik simpan template.

• Lihat hasilnya.

Menambah Sidebar Di Kanan Dan Kiri

Sebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

Outer-wrapper=660px;
Header-wrapper=660px;
Footer-wrapper=660px;

• Sekarang masuk ke blog sobat.
• Klik tata letak.
• Edit html.
• Jangan beri centang pada Expand widged template.

Cari kode seperti di bawah ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float:right;
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: $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 */

Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
padding:5px;

#sidebarbaru-wrapper {
width: 220px;
float: left;
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 */
padding:5px

Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

Jangan lupa ganti juga nilai lebar dari:
header-wrapper= 880px;
footer-wrapper= 880px;

Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Letakkan kode dibawah ini tepat atasnya:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Hingga hasilnya sebagai berikut:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

• Klik pratinjau.
• Jika di rasa sudah sesuai klik simpan template.

Membuat Footer Multi Kolom Blogger

Dengan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya

di sini akan kita bahas bersama.

Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.

Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

• Login ke blog sobat.

• Klik tata letak.

• Pilih edit HTML.

• Jangan kasih centang pada expand widget.

• Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:
  
  /* footer_wrapper
  ---------------------------- */
  #footer_wrapper{
  width: 100%;
  position: relative;
  float: left;
  background:#ff69b4;
  border: px solid #ff0000;
  padding:%;
  }
  
  #footer_wrapper1{
  float:left;
  width:30%;
  margin:1px;
  background:#7cfc00;
  padding:1%;
  }
  
  #footer_wrapper2{
  float:left;
  width:30%;
  margin-top:1%;
  margin-bottom:1%;
  background:#7cfc00;
  padding:1%;
  }
  
  #footer_wrapper3{
  float:left;
  width:30%;
  margin:1%;
  background:#7cfc00;
  padding:1%;
  }
  
  ]]></b:skin>

• Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:
  
  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'/>
  </div>

• Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :
  
  <div id='footer_wrapper'>
  <b:section class='footer' id='footer_wrapper1'/>
  <b:section class='footer' id='footer_wrapper2'/>
  <b:section class='footer' id='footer_wrapper3'/>
  </div>
  
  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'/>
  </div>

• Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.
  
  Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitam adalah kode yang ditambahkan.

Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

Semoga bermanfaat.

Cara Menyembunyikan Navbar

Pada postingan yang lalu saya pernah membahas tentang bagaimana cara menghilangkan navbar dengan segala resikonya. Untuk postingan kali ini ada alternatif lain bagaimana agar navbar tersebut tidak menghilang sama sekali,tapi cukup dengan menyembunyikannya.

Maksud dari menyembunyikan adalah jika nanti pointer mouse kita arahkan keatas dimana letak posisi dari navbar,maka navbar tersebut akan muncul kembali. Jika sobat tertarik dengan cara ini,silahkan ikuti langkah-langkah di bawah ini:

• Login ke blog sobat

• Pilih tata letak

• Klik Edit HTML.

• Cari kode ]]></b:skin>

• Letakkan kode dibawah ini diatasnya.
  
  #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
  #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}

• Hingga hasilnya sebagai berikut:
  
  #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
  #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}]]></b:skin>

• Simpan.

• Lihat hasilnya.

• Selesai.

Menghilangkan Navbar

Menghilangkan navbar merupakan salah satu keinginan banyak para blogger. Mungkin para blogger ingin blognya terlihat seperti yang lain tanpa ada navbar diatasnya.Hal ini bisa saja dilakukan tapi ada yang perlu di perhatikan.

Sebenarnya google menyediakan nasbar ini gunanya untuk mempermudah login ke blogger atau sebagai jalan untuk melihat blog lain.Bisa juga untuk menandai blog yang melanggar TOS seperti mengandung SARA atau pornografi untuk dilaporkan ke pihak blogger.

Sebelum menghilangkan pikirkan terlebih dahulu,sebab resiko yang di tanggung cukup berat juga yaitu akan di tutupnya account kita di blogger. Sayangkan...?! Walaupun sekarang ada isu yang berkembang bahwa pihak blogger memperbolehkan tanpa resiko apapun. Keputusan ada ditangan sobat. Jika menurut sobat navbar itu tidak mengganggu dan menguntungkan biarkan saja nampak di atas.Tapi jika sobat masih ingin menghilangkan mungkin ini cara yang bisa sobat gunakan,tapi resiko ditanggung sendiri ya...!

• Login ke blog sobat

• Klik tata letak (Layout)

• Klik edit HTML

• Carikode ]]></b:skin>

• Letakkan kode berikut diatasnya #navbar{display:none }

• Hingga hasil kodenya sebagai berikut:
  #navbar{display:none
  }
  ]]></b:skin>

• Klik simpan template

• Lihat hasilnya

• selesai

Jika mau memunculkan lagi tinggal hapus kodenya.

Cara Memperlebar Halaman Template

M

ungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai 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 */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#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 */

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!