Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

CARA MENGGANTI GAMBAR TAB BROWSER BLOG

Herman Shofyan

Kali ini saya akan mencoba jelasin tentang cara menggantiicon gambar tab browser blog sobat, biar terlihat lebih keren.
Pertama sobat bisa membuat gambar logo menggunakan editor gambar seperti corel draw atau photoshop. Size / ukuran bisa disesuaikan sendiri, kalo logo tab punya saya dengan gambar logo seperti ini:
saya buat dengan ukuran 20 x 20px. 
Setelah sobat selesai membuat gambar logo sobat, simpan dengan ekstensi gif, png, tif atau jpg. Langkah selanjutnya adalah:

1. Upload gambar yang telah sobat buat ke image hosting photobucket, picasa, flickr atau apun terserah....

2. Login ke dasboard blogspot sobat di tab baru lalu masuk ke menu Layout / Rancangan > Edit HTML. Centang juga expand widget.

3. Cari tag </head> dengan menggunakan Ctrl + F.

4. Silahkan sobat copy kode dibawah ini:
<link rel="shortcut icon" href="alamat gambar sobat" />
 5. Simpan / paste tepat diatas tag </head>, sehingga hasilnya akan seperti ini:

<link rel="shortcut icon" href="alamat gambar sobat" />
</head>

(Jangan dulu klik simpan / save ya sob..)

6. Kembali ke akun hosting tempat gambar sobat lalu cari direct link gambar yang telah sobat upload tadi, misalkan seperti alamat gambar logo saya:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKgpywuWaB4yt58zb2UvHOtM3DnKyZLMlVWHNdruSqlxa64Sx-_2W2Y9f928Samy-J2PzH_Lr6c0bDUgPZf_qXl9aAtcIkEiI3BsbL8umhpVBOpgn09k0GEWMuSqB9Np9XHWvvCi0ppKB/ . Kemudian copy dan paste di alamat gambar sobat  (seperti yang telah saya tandai dengan warna merah), tentunya pada kode yang telah sobat simpan di Edit HTML blog sobat tadi.

7. klik pratinjau sebelum di terbitkan. Kalo sudah berhasil, baru sobat bisa klik terbitkan entri dan lihat hasilnya.

CARA MEMBUAT KOTAK LINK SAHABAT

Herman Shofyan

Cara-caranya sangat mudah, ikuti petunjuk berikut :
  • Masuk ke account blog sobat
  • Klik rancangan
  • Lalu klik add widget dan pilih html/javascript
  • Copy kode dibawah ini dan sesuaikan dengan keperluan sobat
<div style="overflow:auto;background:#ffffff;width:280px;height:200px;padding:10px;border:1px solid #CCCCCC">
<ul>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
</ul>
  • Jika sudah selesai, klik simpan dan lihat hasilnya
Keterangan :
Ubah URL blog dan judul blog dengan URL dan judul blog yang dituju
Kode yang berwarna merah adalah kode background
Kode yang berwarna hijau adalah lebar kolom scroll
Kode yang berwarna orange adalah tinggi kolom scroll
Kode yang berwarna biru adalah besarnya border dan warna border