Cara Mengganti Icon Blogger Pada Address Bar

Jika anda pengguna blogger/blogspot, anda mungkin ingin tampilan yang beda, salah satunya dengan mengganti icon blogger pada address bar, seperti contoh di bawah ini :

Disini saya sudah sediakan cara2  dan langkah untuk mengganti icon blogger pada address bar anda..saya menyediakan ada 2 cara atau 2 langkah.

Langkah pertama :

1. login ke blogger anda
2. klik template
3. edit html dan lanjutkan
4. kemudian cari kode html </head> jika anda susah mencarinya, gunakan saja ctrl + F
5. jika sudah ketemu letakkan kode di bawah ini sebelum kode </head>

<link href='GANTI URL Favicon anda' rel='SHORTCUT ICON'/>

6. jika sudah klik pratinjau untuk menghindari terjadi error, jika sudah klik save.


Cara/langkah yang kedua :

1. login ke blogger
2. klik template
3. edit html dan lanjutkan
4. kemudian cari kode html <b:skin><![CDATA[  cari dengan menekan ctrl + F
5. Jika sudah ketemu, letakan kode di bawah ini sebelum kode <b:skin><![CDATA[

<link href='GANTI URL Favicon anda' rel='icon' type='image/x-icon'/><link href='GANTI URL Favicon anda' rel='shortcut icon'/>

6. klik pratinjau untuk menghindari error, jika sudah klik save

Note : Ganti text yang berwarna merah dengan alamat URL icon favicon pilihan anda.

Cara membuat URL favicon anda :

Anda bisa upload gambar di Photobucket,untuk mendapatkan alamat URL nya. untuk membuat icon pada adress bar gunakan size gambar 32px.

Cara mengganti ikon blogger pada address bar

Jika anda mempunyai blog pada Blogger.Com tentunya tampilan default pada Address Bar Blogger atau yang disebut dengan favicon adalah seperti pada samping sebelah kanan ini.

Tetapi bagi anda yang ingin mengganti tampilan tulisan huruf B pada ikon address bar (kolom alamat pada tab & kolom alamat url untuk mengetikkan alamat situs) pada Blogger sangatlah mudah anda hanya akan menambahkan kode pada HTML template blog anda yang ingin diganti tampilan huruf B (ikon pada address bar blogger) tersebut.

Berikut Caranya :
Jika anda susah untuk membuat ikon/icon pada address bar dibawah ini ada beberapa tool/peralatan yang dengan mudah untuk membuatnya.

• http://www.favicongenerator.com atau
• http://www.favicon.co.uk :
  Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
• http://favicon-generator.org
  atau
• http://www.favicon.cc :
  Anda dapat membuat favicon sendiri sesuai kreasi Anda

Setelah anda selesai membuat icon favicon/address bar langkah langkah selanjutnya adalah menyimpan gambar yang sudah dibuat lalu kita upload pada hosting gambar yang biasa kita gunakan seperti photobucket, Imageshack, Album Web Picasa dll. nanti akan dibahas dibawah tutorial.

Setelah login pada blogger
kemudian masuk ke "Tata Letak --> Edit HTML"
Kemudian copy kode berikut dibawah ini :

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>
atau bisa juga seperti kode dibawah ini :
<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>

Langkah selanjutnya adalah menaruh kode tersebut diatas sebelum/diatas kode :

</head>

Ganti huruf yang berwarna merah dengan alamat URL favicon yang sudah kamu buat.
 
selesai.

Cara membuat kolom widget di sebelah kanan header

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini berguna jika nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Cari deretan kode seperti di bawah ini.

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Kemudian ganti kode-kode tersebut dengan kode di bawah ini.

#header-inner {
width:432px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:left;
padding-top:10px;
}

6. Setelah itu carilah kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>

7. Kemudian tambah kode berwarna merah sehingga hasilnya menjadi seperti di bawah ini.

<div id='header-inner'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>

</b:section>

</div>

<div id='r_head'>

<b:section class='header' id='header2' preferred='yes'/>

</div>

</div>

8. Klik tombol "SIMPAN TEMPLATE".

Mengatur lebar Header, Halaman Posting dan Sidebar

Mengatur lebar header, halaman posting dan sidebar ini mungkin kelihatannya sangat sederhana. Namun bagi blogger pemula sepaerti saya, hal ini menjadi penting. Jika suatu saat ingin mengubah lebar ketiganya maka inilah yang akan jadi patokan.

Untuk mengetahuinya anda harus barada pada menu Edit HTML yang bisa dilihat setelah masuk/login ke Blogger - Rancangan. Baru setelah itu Klik Edit HTML (Jangan lupa centang Expand Template Widget).

* lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

* lebar halaman posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

* lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Setiap template biasanya berbeda-beda. Karena itu, carilah kode yang mirip dengan kode-kode di atas tadi. Kode yang berwarna merah adalah lebar dari masing-masing elemen template-nya, sedangkan yang berwarna biru adalah tinggi dari header template. Inilah yang harus anda sesuaikan jika ingin mengubahnya.

Cara menghilangkan attribute blogger ( diberdayakan oleh blogger )

Kalau kita memakai template bawaan Blogger.com seperti blog ini, maka pasti akan ada widget attribute di bagian footer template. Sebagian orang kadang merasa tidak perlu menampilkan widget ini, maka lebih baik menghilangkannya atau tepatnya menyembunyikannya.

Cara menghilangkan attribute blog powered by blogger adalah sebagai berikut:
 
1. Masuk dashboard.
2. Pilih design, lalu edit html.
3.Cari kode ]]></b:skin>.
4. Kemudian letakkan kode berikut ini tepat di atas ]]></b:skin>.

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

5. Klik save, dan selesai.

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

1. Login ke blogger dengan ID anda tentunya.
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini :
   ]]></b:skin>
5. Copy paste kode berikut persis di atas kode yang tadi :
   .quickedit{
   display:none;
   }
6. Klik tombol Simpan template.
7. Selesai.

Belajar membuat website dengan blogspot

Kali ini saya ingin membahas tentang cara membuat website,langkah langkah nya begitu mudah bagi yang masih pemula. selain mudah juga gratis. bagi anda yang ingin belajar membuat website, di sini saya akan menjelaskannya secara lengkap dan jelas.
untuk tahap awal belajar kita akan menggunakan blogspot. dimana blogspot menyediakan bagi anda yang masih pemula untuk berkreasi disini,semuanya serba gratis dan semua tergantung kemauan anda.
berikut langkah pertama sebaiknya kita terlebih dahulu menyediakan email,anda bisa menggunakan yahoo,gmail dan lainnya.karena untuk mendaftar di blogger kita memerlukan email.saya ambil contoh kita akan menggunakan gmail.untuk membuat email ini kita perlu mendaftarkannya di http://mail.google.com/ . ikuti saja petunjuknya dan anda akan di arahkan sampai proses selesai. setelah anda memiliki akun gmail selanjutnya kita mengunjungi situs http://bloggger.com.
1.klik daftar/sign up
2.isikan data data anda dengan sesuai
3.masukkan nama domain kamu. contoh : http://cometshare.blogspot.com/ jika availible anda akan lanjutkan ke tahap berikutnya, jika not availible maka anda harus menggunakan nama domain lain.
4.setelah itu anda akan di minta untuk verifiikasi, nasukkan nomor telepon anda untuk mengkonfirmasi nya.nanti akan ada konfirmasi kode yang nantinya akan di masukkan untuk tahap berikutnya.
5.setelah selesai anda sudah berhasil membuat website
6.tinggal mengatur/mendesign blog sesuai dengan keinginan anda
7.pilih templete yang anda sukai
8.lalu pilih buat entri baru untuk artikel yang akan anda terbitkan
9.kemudian klik publish untuk menerbitkan website anda
10.jika anda ingin mengedit blog anda, di dashboard anda sudah ada pilihan untuk mngatur blog anda..
Selamat berkreasi semoga dengan blog ini saya bisa membantu sobat semua sehingga lebih mengenal dan mendalami di dunia website...

Membuat menu horizontal untuk blog

Bagi anda yang ingin mempercantik tampilan blog, salah satunya menambahkan menu horizontal/menu mendatar.pastinya blog anda belum lengkap tanpa menu. langsung saja saya bagikan buat sobat pecinta blogger semua.

berikut langkah langkah nya :
1.login dulu di blogger anda
2.klik rancangan/template lalu klik edit html
3.setelah itu anda klik lanjutkan kemudian centrang widget
4.cari ]]></b:skin>. untuk lebih mudah pencarian tekan ctrl + f
5.copy pastekan kode di bawah ini tepat di atas ]]></b:skin>

/* Navigasi tabs http://cometshare.blogspot.com/ Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs http://cometshare.blogspot.com/ Ends */

6.lalu klik save template
7.sekarang masuk kita ke tata letak/page elements
8.klik add gadget/tambah gadget.nanti akan muncul jendela baru dan kita cari/tambah kan HTML/javascript
9.lalu copy pastekan kode di bawah ini

<!-- Navigasi tabs http://cometshare.blogspot.com/ Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs http://cometshare.blogspot.com/ Ends -->

10.save
catatan : tanda # yg berwarna merah untuk anda edit sesuai dengan link yang anda inginkan. dan tanda yang berwarna biru edit sesuai menu selera anda....