border melengkung keliling blog
hye!!sume wanie nak ajar ney nak tak klu nak jo mulakan ok?mula2 p
Design -----> Edit HTML
Press CTRL+F atau F3 untuk pencarian code ,
anda perlu cari code ini :
#outer-wrapper {
Bila dah dapat cari code itu ,
Anda akan dapat code macam ini ,
#outer-wrapper {
border: 3px double #FF0080;
width: 920px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
}
So bila anda dah dapat code yang dicari , anda perlu tambah code itu di bahagian
paling bawah code tersebut ,
code yang perlu anda tambah ialah ini :
-moz-border-radius: 35px;
border-radius: 35px;
So , lepas dah copy code diatas , anda perlu copy dia and paste di bahagian
bawah code tersebut , CONTOH :
#outer-wrapper {
border: 3px double #FF0080;
width: 920px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
-moz-border-radius: 35px;
border-radius: 35px;
}
Make sure preview dulu sebelum SAVE .
Itulah code yang perlu anda tambah dekat code HTML blog anda sendiri .
Sebenarnya ada banyak code border , ada yang melengkung , bulat dan kotak ,
Erm nanti saye update lagi ok , just stay tune sebab nanti saya akan update lagi
tutorial ini .
*UPDATED*
Sila tengok di sini untuk jenis2 border : Jenis-jenis border
Sila tengok sini untuk lihat pattern border : Jenis-jenis pattern border
Kebiasaannya apabila kita menghantar / upload gambar pada posting atau artikel kita , secara automatik ia akan meletakkan link pada gambar tersebut. Apabila kita klik pada gambar itu ia akan pergi ke satu halaman lain yang memaparkan gambar itu sahaja dalam saiznya yang sebenar. Untuk membuang link tersebut apa yang perlu anda lakukan ialah mengedit kod pada gambar tersebut. Ikuti langkah berikut :
<div class="separator" style="clear: both; text-align: center;">5. Anda perlu delete kod ini :
<a href="http://3.bp.blogspot.com/_NCmmNUPy69c/TM6kmf4m7DI/AAAAAAAAAW4/cM6cM3klFYE/s1600/back2school.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_NCmmNUPy69c/TM6kmf4m7DI/AAAAAAAAAW4/cM6cM3klFYE/s1600/back2school.gif" /></a></div>
<a href="http://3.bp.blogspot.com/_NCmmNUPy69c/TM6kmf4m7DI/AAAAAAAAAW4/cM6cM3klFYE/s1600/back2school.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">dan kod ini :
</a>6. Yang tinggal adalah kod ini sahaja :
<div class="separator" style="clear: both; text-align: center;">7. Kemudian klik Publish Post.
<img border="0" src="http://3.bp.blogspot.com/_NCmmNUPy69c/TM6kmf4m7DI/AAAAAAAAAW4/cM6cM3klFYE/s1600/back2school.gif" /></div>
8. Link pada gambar anda akan hilang.
Ok. selamat Mencuba !!!
Tutorialss:Button like dalam blog
hai suma kali ney wanie ajar lagi baru skit mesti nak tambahkan ok,,
Meletakkan button 'like' dalam blog dapat memberi gambaran secara kasar samada penunjung anda menyukai entri yang ada di blog anda. Selain itu, penggunaan button 'like' ini juga sedikit sebanyak dapat meningkatkan trafik blog anda.
Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.
Cara-cara untuk meletakkan button like ini adalah seperti berikut.
1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod berikut.
3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
contoh:
4. Save dan lihat hasilnya.:)
Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.
Cara-cara untuk meletakkan button like ini adalah seperti berikut.
1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod berikut.
<data:post.body/>
3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
contoh:
4. Save dan lihat hasilnya.:)
Cara nak buat signature kat C
Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger.
Signature boleh jadi apa sahaja samada gambar, icon, dan juga nama anda dengan font yang dirasakan sesuai untuk signature.
Tutorial ini akan menerangkan cara-cara meletakkan signature pada blog dengan menggunakan signature yang di'generate' daripada kaedah online.
Laman web yang paling sesuai untuk create signature online adalahhttp://www.mylivesignature.com/.Laman web ini dicadangkan kerana ianya dapat menghasilkan signature yang anda mahu dengan lebih senang. Masa anda pun jimat.:)
CREATE SIGNATURE.
1.Buka web http://www.mylivesignature.com/ untuk create signature anda.
Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.
2.Setelah selesai signature anda, uploadkan untuk dapat url, (boleh guna imageshack.us atau upload pada blog anda sendiri)
contoh url:http://2.bp.blogspot.com/_CEj8AwvwSNM/S4PotCOwq7I/AAAAAAAAD9A/jC8qDqdmR78/signature.png
CARA LETAK DALAM BLOG.
1. Login kepada blog anda, kemudian dari dashboard, Layout > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)
2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah
3. Copy code ini dan paste di bawah kod tadi.
kod anda sepatutnya kelihatan seperti ini.(contoh)
Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature
4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)
Signature boleh jadi apa sahaja samada gambar, icon, dan juga nama anda dengan font yang dirasakan sesuai untuk signature.
Tutorial ini akan menerangkan cara-cara meletakkan signature pada blog dengan menggunakan signature yang di'generate' daripada kaedah online.
Laman web yang paling sesuai untuk create signature online adalahhttp://www.mylivesignature.com/.Laman web ini dicadangkan kerana ianya dapat menghasilkan signature yang anda mahu dengan lebih senang. Masa anda pun jimat.:)
CREATE SIGNATURE.
1.Buka web http://www.mylivesignature.com/ untuk create signature anda.
Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.
2.Setelah selesai signature anda, uploadkan untuk dapat url, (boleh guna imageshack.us atau upload pada blog anda sendiri)
contoh url:http://2.bp.blogspot.com/_CEj8AwvwSNM/S4PotCOwq7I/AAAAAAAAD9A/jC8qDqdmR78/signature.png
CARA LETAK DALAM BLOG.
1. Login kepada blog anda, kemudian dari dashboard, Layout > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)
2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah
<p><data:post.body/></p>
3. Copy code ini dan paste di bawah kod tadi.
<p><div align="left"><img src="URL gambar/signature anda"/></div></p>
kod anda sepatutnya kelihatan seperti ini.(contoh)
Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature
4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)
Ha!memandangkan hari ni hari ahad wani buat banyak tuto klu da bersedia jom start..
Berikut adalah tutorial untuk meletakkan button back to top dalam blog.
1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript
2. Paste kod di bawah ke dalam ruangan html/javascript
Masukkan url gambar dengan url gambar 'arrow back to top' anda.
Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.
http://img338.imageshack.us/img338/9871/2evyotw.gif
http://img132.imageshack.us/img132/5848/totopbutton.png
http://img175.imageshack.us/img175/7297/up3.png
http://img28.imageshack.us/img28/2494/30720265.png
http://img529.imageshack.us/img529/1986/96133335.png
http://img294.imageshack.us/img294/9831/14193731.gif
3. Apabila selesai save dan lihatlah hasilnya.:)
1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript
2. Paste kod di bawah ke dalam ruangan html/javascript
<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>
Masukkan url gambar dengan url gambar 'arrow back to top' anda.
Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.
http://img338.imageshack.us/img338/9871/2evyotw.gif
http://img132.imageshack.us/img132/5848/totopbutton.png
http://img175.imageshack.us/img175/7297/up3.png
http://img28.imageshack.us/img28/2494/30720265.png
http://img529.imageshack.us/img529/1986/96133335.png
http://img294.imageshack.us/img294/9831/14193731.gif
3. Apabila selesai save dan lihatlah hasilnya.:)
tuto:perkataan bergerak
Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.
1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)
Output untuk kod ini seperti berikut:
2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.
direction="left"
direction="right"
direction="up"
direction="down"
Berikut contoh kod untuk pegerakan dari kanan ke kiri
Output untuk kod ini adalah
3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut
bgcolor="#kod warna"
Senarai kod warna boleh didapati disini.
Contoh kod yang diletakkan background,
Output untuk kod ini adalah
4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"
contoh kod yang diletakkan trick ini.
Output untuk kod ini
5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut
scrollamount="2"
Contoh kod dengan trick ini.
Output:
Scrollamount :2
Scrollamount :4
6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.
Penambahan kod yang perlu dilakukan adalah
onmouseover="this.stop()" onmouseout="this.start()"
Contoh kod dengan trick ini.
output untuk trick ini.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.
1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)
<marquee>Contoh scrolling text</marquee>
Output untuk kod ini seperti berikut:
2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.
direction="left"
direction="right"
direction="up"
direction="down"
Berikut contoh kod untuk pegerakan dari kanan ke kiri
<marquee direction="right" >Contoh scrolling text</marquee>
Output untuk kod ini adalah
3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut
bgcolor="#kod warna"
Senarai kod warna boleh didapati disini.
Contoh kod yang diletakkan background,
<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>
Output untuk kod ini adalah
4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"
contoh kod yang diletakkan trick ini.
<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>
Output untuk kod ini
5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut
scrollamount="2"
Contoh kod dengan trick ini.
<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>
Output:
Scrollamount :2
Scrollamount :4
6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.
Penambahan kod yang perlu dilakukan adalah
onmouseover="this.stop()" onmouseout="this.start()"
Contoh kod dengan trick ini.
<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>
output untuk trick ini.
Tuto:tukar cursor untuk blog anda:D (wanie punye)
Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.
Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.
1. Buka website http://www.cursors-4u.com/
2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)
3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>
5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.
6. Save dan lihat hasilnya.
Mudah bukan.:)
hay!korang tinggalkan komen tau!tau buat tapi x tau berterimah-kasih sape x komen memang korang bau busuk tau!!!!
