Sabtu, 30 Oktober 2010

Cara letak favicon pada url blog

Jika kita membuka laman web biasanya kita boleh melihat satu ikon kecil yang terdapat disebelah url.Bagi laman blog biasa tertera dengan ikon huruf B.Ikon yang kecil ini dipanggil “favicon” .Jika hendak membuat sendiri favicon itu kita perlu membuatnya dalam saiz 32x32 piksel dalam format gif,bmp,jpeg,ico ataupun png.Kemudian upload imej tersebut ke photobucket.

Kemudian Masuk ke design-pilih edit HTML
Kemudian masukkan kod ini diantara kod <head> dan </head>

<link href='letak url imej disini' rel='shortcut icon' type='image/x-icon'/>

Untuk membuat icon dengan imej sendiri boleh juga gunakan laman web favicongenerator.com.Juga boleh lawati  laman web iconj.com  dan disitu juga terdapat  favicon dalam bentuk  animasi yang boleh pilih dan ambil kodnya untuk dimasukkan pada blog.

Jika menggunakan iconj :
Masuk kewebsite--kemudian pilih--animated favicon
pilih jenis favicon dan ambil html embed code and details..copy kod yang terdapat disitu.
kemudian kembali keblog ,masuk kedesign..pilih edit html
edit template




 gunakan crtl+F untuk find dan taipkan </head> pada ruangan tersebut
find code



setelah jumpa kod </head> dan pastekan kod favicon tersebut diatasnya.

letak kod pada template
Update 22/02/2011:
 kalau tidak muncul favicon mungkin sebab gunakan google chrome.Untuk google chrome guna kod ini:

<link rel="icon" type="image/gif" href="url imej anda">

Selamat mencuba….

Cara letak tandatangan pada akhir posting

Membuat tandatangan atau signature pada bahagian bawah posting boleh kita lihat dikebanyakan blog dan laman web. Bila tandatangan diletakkan dibawah posting  nampak lebih professional . Sebelum membuatnya kita perlu membuat imej tandatangan dan mengupload imej tersebut ke laman web hosting gambar seperti image shack ,photobucket dan sebagainya.Imej tersebut boleh juga kita buat dengan menggunakan perisian seperti Microsoft paint,Photoshop,Corel Draw dan sebagainya.Ataupun boleh juga gunakan kemudahan membuat tandatangan secara online seperti di mylivesignature.com.
Seterusnya selepas mendapat link gambar yang diupload tadi ,cari kod dibawah ini pada template.
Masuk ke design,pilih edit html
Klik pada expand template widget
Cari kod berikut:

<p><data:post.body/></p>
Kemudian masukkan kod ini dibawahnya:
<p><div align="left"><img src="URL imej tandatangan"/></div></p>
*gantikan url imej tandatangan dengan url imej yang diupload tadi.
Contohnya :
<p><div align="left"><img src="http://i219.photobucket.com/albums/cc282/signature.png"/></div></p>
Kemudian Save Template

Atau pun satu cara lagi ialah dengan meletakkan pada post template:
Masuk ke design—setting--- formating
Dibawah sekali terdapat post template

Contoh kod imej yang saya upload ke photobucket

<a href="http://s219.photobucket.com/albums/cc282/?action=view&current=signature.png" target="_blank"><img src="http://i219.photobucket.com/albums/cc282/signature.png" border="0" alt="tandatangan"></a>
Kod diatas diubah menjadi begini:
<img src="http://i219.photobucket.com/albums/cc282/signature.png" border="0" alt="tandatangan"></a> 
Kemudian masukkan kod url imej yang di upload tadi pada post template

poat template

 Kemudian klik pada save setting.Jadi setiap kali kita buat posting baru imej tadi akan dimasukkan secara automatik pada paparan posting.

Sabtu, 23 Oktober 2010

cara menyusun imej pada sidebar

Saya ada menerima pertanyaan dari rakan rakan blogger bagaimana nak buat susunan pada blog agar Nampak kemas dan tersusun. .Misalnya kita membuat tukar link tapi bannernya tidak sama saiz  dan jika diletakkan sampai ada yang terkeluar dari sidebar.Bila keadaan jadi mcm ni tentunya sukar untuk kita menyusunnya. dan sudah tentu nampak tak kemas kerana ada yg ketepi dan ketengah.Jadi bagaimana kita hendak membuatnya supaya sama saiz.

Jadi disini saya ingin berkongsi bagaimana hendak menyusun imej pada sidebar agar saiznya sama lebar dan sama tingginya
Contoh Keadaan  susunan pada sidebar seperti dibawah .bahagian penghujung tidak sama dan sebaris sahaja.



Sebenarnya boleh jimat ruang lagi dengan buat cara berikut;
Contoh ini bila kita nak letak button macam diatas biasa kita akan dapat kod seperti ini:

 <!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" /></a><!-- End Backlink Code -->

Kita Cuma perlu tambah kod untuk tinggi(height) dan  lebar(width) seperti ini:

<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->

Border “0” bermakna tiada border ,boleh letak nilai jika hendak letak border disekeliling

Supaya kedudukanya berada ditengah tengah tambahkan kod  seperti ini:

<center>
<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->
Untuk kod button /imej seterusnya letak disini…
………….
…………
</center>

Untuk letak dua baris kena sesuaikan lebarnya sahaja.Bila ruang dan saiz kena akan jadi baris seterusnya.Bila terlalu panjang akan ia akan turun kebawah.

Supaya nampak tersusun lagi letaklah dalam border:

 <div style="width: 140px; height: 220px; border: 1px solid;  padding: 2px; margin: 5px 0pt 0pt;">

Letak kod untuk imej disini

</div>


atau pun buat table disekelilingnya.Cara membuatnya ada saya terangkan dalam tutorial sebelum ini.

Atau boleh juga guna garisan seperti  dibawah ini untuk memisahkan kandungan pada sidebar
Dengan menggunakan kod ini:

<hr color=”#AC58FA”/>








Kod warna boleh ditukar mengikut kesesuaian.

Jumat, 15 Oktober 2010

Cara membuat berbagai bentuk link

Link  adalah digunakan  bagi menyambung antara  satu halaman ke satu halaman blog atau web . Bagi membolehkan ia bersambung satu link atau pun pautan perlu wujudkan bagi kedua duanya bersambung. Cara paling senang untuk membuat link pada satu posting adalah dengan menggunakan fungsi Link  yg ada pada tool bar .

Meletak link pada teks(penulisan) di posting

Cara nya ialah dengan highlightkan pada teks yang ada pada posting yang hendak disambung/link kepage/halaman  lain.
Kemudian klik pada ikon Link
pasng link pada blog
Kemudian pada web address taipkan alamat web/blog yang hendak dituju contoh saya nak link ke web googledan saya masukkkan pada web address  http://www.google.com .ruangan text to display dikosongkan kerana kita guna teks yg ada pada posting.


cara buat link

Pada ruangan text to display jika kita hendak membuat link dengan memaparkan teks yang akan diklik akan membuka link baru.contohnya saya nak letak link bagi membolehkan saya menuju kemuka hadapan blog ini pada text to display saya masukkan HOME dan pada web address saya masukkan alamat blog saya
letak link pada posting
 
dan akan kelihatan paparan seperti ini

HOME

Atau Kita boleh juga gunakan kod seperti dibawah ini:
<a href="http://jendela-id.blogspot.com">HOME</a>

Cara membuat link terbuka dengan sendiri

Cara ini membolehkan kita membuka secara Otomatik tanpa perlu klik pada link.Bila pointer cursor mouse bergerak melaluinya ia terus terbuka
<a href="http://jendela-id.blogspot.com" onMouseover="window.location=this.href">HOME</a>

Cara membuat link terbuka pada tab baru di browser
<a href="http://.jendela-idspot.com/" target="_blank">Home</a>

Cuma perlu tambah target sahaja.

Membuat link dari imej atau gambar.
Selain dari menggunakan teks sebagai cara membuat link, kita boleh juga guna imej sebagai link.Untuk itu imej tersebut perlu kita upload ke Photobucket dan dapatkan alamat imej tadi

Contoh alamatnya begini:
http://i219.photobucket.com/albums/cc282/garam63/background4.gif
dan untuk membuat gambar tadi jadi link masukkan kod seperti dibawah:
<a href="http://jendela-id.blogspot.com"><img src=" http://i219.photobucket.com/albums/cc282/garam63/background4.gif
"></a>

(tulis dalam satu baris)

Selasa, 05 Oktober 2010

Cara letak tajuk widget ditengah dan letak warna latarbelakang

Entri saya kali ini adalah cara bagaimana hendak meletakkan tajuk pada widget sidebar ditengah tengah ,kebiasaannya berada disebelah kiri dan juga meletak warna latar belakang agar nampak lebih mantap dan ceria.Selalunya template dari blogger warna latar belakang title adalah sama dengan background lainlah kalau template yang didownload dari web yang dah siap diwarnakan.Untuk meletak warna pada latar belakang widget pula boleh dirujuk pada artikel ini.
letak warna pada widget title

Untuk tajuk pada template biasanya bermula dengan kod h1,h2…dan sebagainya.untuk meletak warna latar belakang dan teks agar berada ditengah(center) kita cuma perlu tambah kod dibawahnya:
Masuk kedesign—edit HTML cari kod h2 ditemplate seperti dibawah:
Gunakan Ctrl+F untuk find
h2 {
background-color:#AEB404;
text-align: center;
}
*teks berwarna merah adalah kod yang ditambah
kod warna dengan teks hijau boleh ditukar dengan kod yang dinginkan.

kemudian seperti biasa preview dan save template.

Cara menukar warna background pada widget

Mungkin korang ingin menukar warna background pada widget disidebar atau pun hendak mempelbagaikan warna latarbelakang yang ada pada widget.Sebagai menunaikan permintaaan dari rakan kita yang meminta saya membuat tutorial menukar warna background,jadi  tutorial saya kali akan memuatkan cara bagaimana membuatnya.Pada mula nya saya bercadang hendak memasukkan sekali cara menukar warna pada tajuk widget dan meletakkan teks yang kebiasaanya berada disebelah kiri ketengah,tapi akhirnya saya ambil keputusan untuk mengasingkan agar tidak mengelirukan dan memudahkan pencarian artikel dan juga nak letak tajuk pada posting pun agak panjang.


Untuk membuatnya:

1.Log in dan pilih design—Klik pada edit HTML
Dapatkan dulu widget id terlebih dahulu untuk widget yang hendak dtukar warna.Sebelum ini saya ada juga menunjukan cara hendak mendapatkan widget id boleh dirujuk disini
contoh kod untuk widget id ditemplate seperti dibawah ini:

</b:widget>
<b:widget id='BlogArchive2' locked='false' title='Archives' type='BlogArchive'>

2.Seterusnya masukkan kod seperti ini:
Kod hendaklah diletakkan diatas kod  ]]></b:template-skin>

#BlogArchive2{
background-color:#7401DF;
}

Jika hendak memasukkan widget yang lain hanya tambah dibawahnya seperti ini:

#BlogArchive2{
background-color:#7401DF;
}
#linklist2{
background-color:#7401DF;
}

3.Kemudian preview dan save template setelah tiada apa apa error.