BELAJAR BLOG DENGAN MUDAH View RSS

CARA PASANG VIDEO SECARA AUTOPLAY & TANPA VIDEO 4 Oct 2010 3:42 AM (14 years ago)

Tutorial yang pertama ini saya ingin tunjukkan bagaimana ingin membuat video youtube secara autoplay bila pengunjung masuk ke website kita.pertama sekali yg anda perlukan adalah seperti contoh di bawah :

1)copy kod embed bagi video yg anda inginkan(untuk melihat tutorial mendapatkan kod embed sila klik di sini)

2)selepas itu tambah kod embed yg asal menjadi seperti ini :

Ini adalah kod asal :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>

Tambah kod di atas menjadi seperti ini :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>

Nota : Kod yang di highligt berwarna merah adalah kod yg perlu ditambah



Untuk membuat video yang hanya mengeluarkan suara tanpa gambar anda juga perlu menambah beberapa kod. Sebagai contoh,pada page saya,about me anda boleh lihat di situ hanya terdengar lagu tanpa video..Ini adalah salah satu cara yg dilakukan oleh pemilik website yang biasanya anda cuma mendengar suara mereka setiap kali anda membuka laman website mereka.Untuk melakukannya anda ikut cara di bawah :

Ini kod asal :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>

Tukar & tambah kod di atas menjadi seperti ini :

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="0" height="0"></embed></object>

Nota : Kod yg berwarna merah adalah kod yg perlu ditambah atau di ubah

Jika anda meletakkannya di side bar maka setiap page akan kedengaran suara video.Jika anda mahu kedengaran cuma di page yg anda kehendaki,anda cuma perlu copy kod yg telah di edit tadi dan paste di page yg anda kehendaki..

BACKGROUND PADA KOTAK COMMENT 24 Sep 2010 9:20 AM (14 years ago)

PASANG KOMEN LUV 24 Sep 2010 4:11 AM (14 years ago)

Bagi pengguna blogger yang berminat untuk tukar komen google kepada Komen Luv bolehlah ikut beberapa step yang aku akan ajar nanti. salah satu kelebihan komen luv adalah korang x perlu nak login dan terus boleh komen,tapi kelemahannya adalah komen2 yang diterima tidak akan keluar kat enjin carian google..korang leh tengok contoh comment luv yang aku pakai skunk nie kt contoh di bawah :

BUTTON BACK TO TOP 23 Sep 2010 9:52 PM (14 years ago)

Back to top adalah satu button yang memudahkan pelawat di blog kita untuk balik ke page atas...untuk memasang button ini pertama sekali login ke blog anda dan pergi ke Dashboard >> layout >> Edit html

sebelum itu pastikan anda sudah download full template untuk back up file jika ada sebarang error..

ok dengan menggunakan kekunci control + F cari kod di bawah ini:

KOD WARNA HTML 19 Sep 2010 8:38 AM (14 years ago)

Untuk mendapatkan kod warna anda boleh dapatkan di sini..cuma perlu pilih warna yang sesuai dengan blog anda dan copy kod yg sudah disediakan di bawah :

Kode warna yang terpilih :

Membuat text area 19 Sep 2010 7:10 AM (14 years ago)

Text area adalah ruangan bagi kita memasukkan kod html,javascript atau lain lain teks panjang terletak dalam satu ruangan kecil...teknik ini bertujuan menjimatkan ruang post anda..untuk membuatnya anda copy kod di bawah :

<p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="code" rows="6" cols="20"> masukan tulisan yang anda inginkan di sini </textarea></p>

hasilnya akan menjadi begini :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="10">masukkan kod atau tulisan anda di sini,text atau kod yang anda tulis akan muncul di sini boleh di copy oleh para pengunjung</textarea></p></div></form><br/>

nota:
1)kod width yg berwarna merah adalah lebar ruangan yg boleh diubah mengikut kesesuaian anda
2)kod height yg berwarna kuning adalah tinggi text yg juga boleh di ubah mengikut kesesuaian anda
3)Cols="20" berwarna hijau ialah lebar ruangan
4)Rows="6" berwarna oren ialah tinggi text area
5)tulisan berwarna kuning adalah text yg anda boleh ubah mengikut text yg anda ingin tulis.



Anda juga boleh membina kotak text area dengan butang Highlight all(untuk highlight semua text)seperti contoh dibawah ini :



jika anda tekan pada highlight all,maka kesemua text yg ada di dalam akan di highligt..selepas itu anda cuma perlu right click untuk copy..

untuk membuatnya anda copy code di bawah ini :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="10">sila gantikan kod atau text di sini kepada kod atau text yang anda mahukan</textarea></p></div></form>

nota:

1)anda boleh menukar perkataan highlight all yg saya saya warnakan dengan warna biru dengan perkataan yg anda suka(contohnya gantikan dengan perkataan "warna semua")
2)kod width yg berwarna merah adalah lebar ruangan yg boleh diubah mengikut kesesuaian anda
3)kod height yg berwarna kuning adalah tinggi text yg juga boleh di ubah mengikut kesesuaian anda

DROP DOWN MENU 7 Sep 2010 2:36 AM (14 years ago)

Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencuba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih lebih professional


Langkah Pertama
Login ke akaun Blogger
Pergi ke DESIGN => EDIT HTML => EXPAND TEMPLATE WIDGET.
Selepas itu dengan menggunakan ctrl+f atau f3, cari kod ]]></b:skin>


copy kod di bawah ini dan paste kn sebelum atau di atas kod ]]></b:skin>

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);} .preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);} #nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} #nav li.top {display:block; float:left;} #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;} #nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;} #nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;} #nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} #nav li:hover ul.sub {left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;} #nav li:hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;} #nav li ul.sub li a.fly {background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;} #nav li:hover ul.sub li a:hover {background:#3f96a9; color:#fff; border-color:#fff;} #nav li:hover ul.sub li a.fly:hover {background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;} #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;} #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

jika telah siap,klik preview dahulu..jika tiada apa2 error maka klik save template dan teruskan dengan step di bawah pula


Langkah kedua
1)Klik Page design
2)Klik Add Gadget dan masukkan kod di bawah

<span class="preload1"></span> <span class="preload2"></span> <ul id="nav"> <li class="top"><a href="#" class="top_link"><span>Home</span></a></li> <li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a> <ul class="sub"> <li><b>Judul1</b></li> <li><a href="#" class="fly">Subjudul1</a> <ul> <li><a href="#" target="_blank">subitem1.1</a></li> <li><a href="#" target="_blank">subitem2.1</a></li> <li><a href="#" target="_blank">subitem3.1</a></li> </ul> </li> <li><a href="#" class="fly">Subjudul2</a> <ul> <li><a href="#" target="_blank">subitem1.2</a></li> <li><a href="#" target="_blank">subitem2.2</a></li> <li><a href="#" target="_blank">subitem3.2</a></li> </ul> </li> <li><a href="#" class="fly">Subjudul3</a> <ul> <li><a href="#" target="_blank">subitem1.3</a></li> <li><a href="#" target="_blank">subitem2.3</a></li> <li><a href="#" target="_blank">subitem3.3</a></li> <li><b>Subjudul3.1</b></li> <li><a href="#">item1.3.1</a></li> <li><a href="#">item2.3.1</a></li> <li><a href="#">item3.3.1</a></li> <li><b>Subjudul3.2</b></li> <li><a href="#">item1.3.2</a></li> <li><a href="#">item2.3.2</a></li> <li><a href="#">item3.3.2</a></li> </ul> </li> <li><b>Judul2</b></li> <li><a href="#" target="_blank">subitem1.2</a></li> <li><a href="#" target="_blank">subitem2.2</a></li> <li><a href="#" target="_blank">subitem3.2</a></li> </ul> </li> <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a> <ul class="sub"> <li><a href="#" target="_blank">submenu1.2</a></li> <li><a href="#" target="_blank">submenu2.2</a></li> <li><a href="#" target="_blank">submenu3.2</a></li> </ul> </li> </li> <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a> <ul class="sub"> <li><a href="#" target="_blank">submenu1.3</a></li> <li><a href="#" target="_blank">submenu2.3</a></li> <li><a href="#" target="_blank">submenu3.3</a></li> </ul> </li> </li> <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a> <ul class="sub"> <li><a href="#" target="_blank">submenu1.4</a></li> <li><a href="#" target="_blank">submenu2.4</a></li> <li><a href="#" target="_blank">submenu3.4</a></li> </ul> </li> <li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

Keterangan :

• Warna Merah, Alamat URL yang akan menjadi drop menu(isikan dengan web yg anda inginkan)
• Warna Hijau, tajuk besar bagi menu hadapan(anda cuba ubah dan lihat hasilnya)

selamat mencuba...

CARA PASANG FLOATING BUTTON 6 Sep 2010 7:42 PM (14 years ago)

Jika sebelum ini saya menjagar bagaimana ingin sorokkan shoutbox di sisi blog,tutorial kali nie pula saya ingin mengajar bagaimana cara memasang floating button seperti contoh di bawah :



ok untuk membuatnya pertama sekali pergi LOGIN BLOG => DESIGN =>ADD A GADGET => HTML/JAVA SCRIPT

pastu masukkan kod di bawah

<style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> <div style='display:scroll; position:fixed; top:240px; right:-12px;'> <a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnIAOYLpR0pb3bNxdAT0GEBq6-0o8xt_YtWyRZPWhw1KddrRRFXCoFvZ5PvoZuF4tooG7K2uok06ywuk7x8DmuEaoLqwLo7HqUcPFnAtfyOjl4R3M6Z7Mpwl_3e3Pn1ajHbaHv6NQswWn/s320/icongb.PNG" /></a><br /> <a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyQJa1Jrjf-XGIRmavUNvNzuTTDuumeeDV8KD5sLmJzJGxWLl-00-j14mScOzRaSaWkaKLs2TatH0fpeYISJBJvqp9DOEBu8-oKkfKoCTEoY-p6BChCrG6HlT_B6AhY5mAH-P0XWpDvLt/s320/facebook.png" /></a><br /> <a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA2gs2GtIBEMggjuDAAbYSE2rnNDVCcrvIN0SAG_GtKVhPPaQKuVfHPIIWyDTchmiqPXPLA73fX6cnU59Ti5OInJZQIC_gKQUXcQBkhNHxuNdmAtexgKZO1U_RdryfgNw34_0exNm1JoRf/s320/twitter.png" /></a><br /> <a class='linkopacity' href='http://probuatblog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCKoMpfZeaN1MUJjTFohRk0BJNY-RgNkm8fykI8k6MfSb6dDT8yG8Jfa_wFh16Zhn6HeAh1bsENeRR5kk3w0d9Z1-K7YnVGPPtJzxZ1iYUUNKfnimRYH1_bcQ2-N6rieE8Uz5lXeINYsM/s320/feedblogger.png" /></a><br /> <a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhym_aQe9FVpdXUKasOoBx5zO-xciBFalv1Ii6STjN4I2-R7UN7k-tw6n3QtVIxsl8gZNprqtWFrrQEHaeeVZQbdfY8AzhW8F9hcfUYZEgMaD1txt_0wd5O6Tet4vCzjhfbNOmSk55cRNKo/s320/feedburner.png" /></a><br /> <a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vtwUgloXfImmmvZJz2bQfrKl49GJ31N1TP6Ol3fXST0pNOIQu0vIM-FpbLqV-2ve5ZWG6iPogn3J9eyWqI3bkAEc0ERhQr53u_Goue_Pih8UhnsvV6tVAogolFNROLZvI1K321fH8Cyb/s320/youtube.png" /></a><br /> <a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTvM9PzBvaVL2DcpIOr2Y0MHM2lBGiNdcudQBJJr08364SzKX1aBwLksRjCXeUyQCXcEEQ6NwbaKkblWxqG-F10PGSqiiF8I5uWP7fKoH14j9dDdT8JOr7B42FhrYCfw_jZn7R26z8W3M/s320/flickr.png" /></a><br /> </div>

nota:

BUAT TULISAN SUPERSCRIPTED 6 Sep 2010 2:41 AM (14 years ago)

tutorial simple je...tengok contoh di bawah

<p>This text is <sup>superscripted!</sup></p>

hasilnya

This text is ^{superscripted!}

lagi satu contoh

2<sup>3</sup> = 8 14<sup>x</sup>

hasilnya

2³ = 8
14^x

selamat mencuba..

TULISAN DENGAN BACKGROUND BERWARNA 6 Sep 2010 2:20 AM (14 years ago)

Nie ade sket tips simple untuk korang..kalau korang ade artikel yang perlu untuk di highlight boleh cuba kod di bawah nie..

<table bgcolor="#777777"> <tr><td> <p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00"> masukkan teks anda di sini </font></p> </td></tr> </table>

dan hasilnya nanti jadi camnie

masukkan teks anda di sini

TULISAN LINK MEMBESAR DAN BERWARNA-WARNI 4 Sep 2010 7:21 PM (14 years ago)

Membuat link sebegini adalah merupakan tambahan bagi memberi kelainan pada blog kita.Link akan hanya membesar dan berubah warna apabila pointer mouse dihalakan pada link.Pointer juga boleh diubah kepada bentuk lain,selain dari bentuk asal yang berupa tangan.



Berikut adalah caranya :
1. Login to Blogger kemudian pilih "design"
2. Klik pada "Edit HTML" selepas itu 'expand widget template'
3.Sebelum itu jangan lupa "DOWNLOAD FULL TEMPLATE" ini bagi menyelamatkan template jika berlaku sebarang error..
4. selepas selesai download cari kod a:link dan a:hover dan gantikan dengan kod dibawah ini :

a:link { color:#0000ff; font-size:10px; cursor:default; } a:hover { color:#d2691e; font-size:19px; font-style:italic; cursor:wait; }

POSTING LAMA KE PAGE HADAPAN 4 Sep 2010 6:46 PM (14 years ago)

Mungkin dalam banyak posting yang ada pada blog ada posting lama yang ingin kita tampilkan semula pada halaman utama.Posting ini tentunya mendapat sambutan seperti mempunyai jumlah komen yang tinggi dan masih lagi sesuai untuk berada dihalaman utama.Jika ingin meletakkan semula dihalaman pertama berikut adalah caranya.

1.Masuk ke blogger,pada dashboard pilih edit posts .


2.Pada paparan edit posts,pilih posting yang dikehendakki dan klik pada edit.


3.Seterusnya pilih post options


4.Kemudian ubah tarikh posting tersebut pada tarikh yang baru.

MELETAK BORDER DI SEKELILING POST 4 Sep 2010 6:00 PM (14 years ago)

Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun saya buat juga tutorial nie..mana la tau ada yg memerlukan..

CARA BUAT BORDER MELENGKUNG 4 Sep 2010 5:42 PM (14 years ago)

Menukar tampilan bagi mengindahkan blog tentunya merupakan antara yang tidak dapat tidak dilakukan oleh seseorang blogger.Selain dari cantik dan tidak memberatkan loading blog adalah antara yang perlu diberi perhatian bila melakukan sesuatu perubahan pada template.Sebelum ini saya ada membuat entri tentang membuat border disekeliling posting.tapi dalam bentuk persegi.Kali ini pula dipenjuru border adalah dalam bentuk bulat.


Untuk membuatnya:

1.Masukk ke blogger dan pilih design
2.Klik edit HTML dan tandakan pada Expand template widget
3.Cari kod h2.date header{

dan letakkan kod ini dibawahnya

border-left:3px solid #0000FF; border-right:3px solid #0000FF; border-top:3px solid #0000FF; border-bottom:0px solid #0000FF; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;

pada template blog ini saya letakkan pada kod: post },jadi tarikhnya terletak berasingan

4.cari kod . post-body {

dan letakkan kod ini dibawahnya

border-right:3px solid #0000FF; border-left:3px solid #0000FF;

5. Kemudian cari kod ini pula, .post-footer {
Tambah kod ini dibawahnya

border-left:3px solid #0000FF; border-right:3px solid #0000FF; border-top:0px solid #0000FF; border-bottom:3px solid #0000FF; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px;

6.Untuk mengganti border pada sidebar pula cari kod ini:

.sidebar .widget {

dan letakkan kod ini dibawahnya

border:1px solid #0000FF; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px

Kod berwarna kuning adalah kod untuk warna biru,boleh ditukarkan dengan kod warna yang bersesuaian dengan template anda.

7.klik dahulu preview,jika tiada error maka seterusnya save template .

CARA PASANG EMOTION ICON PADA BLOG 4 Sep 2010 4:47 PM (14 years ago)

Memasang emoticon smiley ini rasanya dah banyak diposting oleh blog blog lain.Namun saya masukkan pada entri kali ini bagi kemudahan rakan rakan yang blogger yang ingin memasukkan nya pada komen di blog.

Berikut adalah caranya:

1. Masuk ke Blogger -->> design -->> edit HTML


2. kemudian tandakan pada "Expand Widget Template"


3. Sekarang kembali ke template, cari kod ini :

</body>

4.Gunakan kemudahan search Ctrl +F untuk membuat pencarian

5. salin kod dibawah dan letakkan diatas kod </body>

TAMBAH ICON DI SEBELAH TAJUK POST 1 Sep 2010 11:18 PM (14 years ago)

Penambahan ikon disebelah tajuk posting adalah merupakan satu daya penarik ,selain dari tajuk posting itu sendiri.Bagi tujuan itu gambar yang dimasukkan seperti pada blog ini adalah bersaiz 32x32 dan ia boleh didownload disini


Untuk membuatnya ikuti langkah ini:

sila login blog dan masuk ke design--->> EDIT HTML


Kemudian cari kod berikut ini:

.post h3 { margin:.5em 0; padding:30px 0px 0px 45px; font-size:120%; font-style:italic; line-height:1.3em; color:#333; background:url(url gambar ) no-repeat left center;}

REPLY TO COMMENT 1 Sep 2010 11:18 PM (14 years ago)

1. Pada Design pilih,Edit HTMLdan seterusnya klik kotak “Expand widgets template”
2. Seterusnya cari kod ini:

<b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> </b:if>

BUAT MENU SCROLL PADA BLOG 1 Sep 2010 11:17 PM (14 years ago)

biasanya scroll bar digunakan untuk menjimatkan ruang dan saya ianya juga sangat penting bagi blogger yg byk menulis artikel..jadi untuk membuatnya anda hanya perlu ikut step2 di bawah ini :

1.Masuk ke dashboard,kemudian pilih design-->>Page elements
2.Kemudian pilih add gadget--->>HTML/JAVASCRIPT
Masukkan kod berikut:

<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 170px;"> masukkan teks atau apa apa kod yang hendak dipaparkan disini </div>

nanti akan jadi seperti ini

nota : Saiz kotak scroll boleh ditukar pada width(lebar)dan height)tinggi

untuk memasukkan tajuk link yg banyak anda perlu menggunakan kod seperti di bawah ini :

<div class="widget-content"> <ul style="width: 145px; height: 180px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;"> <li><a href="http://probuatblog.blogspot.com/2010/09/mungkin-dalam-banyak-posting-yang-ada.html" target="_blank">posting lama ke hadapan</a></li>

untuk masukkan link seterusnya anda cuma perlu copy kod di atas (lihat contoh di bawah) :

<div class="widget-content"> <ul style="width: 145px; height: 180px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;"> <li><a href="http://probuatblog.blogspot.com/2010/09/mungkin-dalam-banyak-posting-yang-ada.html" target="_blank">posting lama ke hadapan</a></li> <li><a href="http://probuatblog.blogspot.com/2010/09/cara-pasang-emotion-icon-pada-blog.html" target="_blank">cara pasang emotion icon pada blog</a></li> <li><a href="http://probuatblog.blogspot.com/2010/09/asdasdasd.html" target="_blank">sorokkan shoutbox</a></li> </li></ul></div>

nota : perkataan 'ul' yg berwarna hijau adalah untuk bullet..untuk menukar kepada no anda perlu gantikan perkataan 'ul' kepada 'ol'

Kod warna merah untuk kod scroll
Kod warna kuning adalah link dan senarai kandungan yang hendak paparkan

3.setting sampai anda benar2 puas hati dan setelah selesai klik save

SOROKKAN SHOUT BOX 1 Sep 2010 11:17 PM (14 years ago)

BUAT TULISAN BERKELIP 1 Sep 2010 11:12 PM (14 years ago)

Tulisan berkelip nie pastinya korang dah biasa nampak kt mana2 web...bagi yg tertanya2 cara membuatnya anda boleh lihat di bawah ini :

<blink> TULISAN BERKELIP</blink>

nota : pastikan tulisan mesti rapat,Jika ada ruang kosong antara tanda < > dengan blink ia tidak akan berfungsi

setelah siap ianya akan jadi seperti dibawah ini :

TULISAN BERKELIP

(jika anda tidak nampak berkelip maknanya browser anda tidak support untuk tulisan ini antaranya internet explorer)


Untuk meletakkan link pada teks dan berkelip:

<blink><a href="http://probuatblog.blogspot.com/2010/09/asdasdasd.html" target="_blank">sorokkan shoutbox</a></blink>

HASILNYA:

sorokkan shoutbox

sekian dari saya..

CARA MASUKKAN VIDEO YOU TUBE 1 Sep 2010 11:03 PM (14 years ago)

pertama sekali macam biasa,layari laman web you tube..lepas tue korang pilih la mana video yg korang berkenan...dah dapat korang cari kod embeb(tengok gambar kt bawah nie)



ok dah dapat tue macam biasa la copy(nie gambar kalau x jelas lagi x taula..haha


dah copy tadi,korang gi paste kt post korang pastu save cm biase..

MEMBUAT TEKS BERGERAK 1 Sep 2010 11:02 PM (14 years ago)

untuk membuat teks bergerak adalah mudah...step yg lebih kurang dengan tulisan berkelip cuma di sini kita boleh menambah kod untuk mencantikkan lagi tulisan tadi..lihat kod di bawah ini :

<marquee>Teks bergerak</marquee>

kod di atas ini akan menjadi begini :

Teks bergerak

untuk ubah perkataan bergerak dari kiri ke kanan gunakan kod nie pula:

<marquee direction="right" >dari kiri ke kanan</marquee>

dari kiri ke kanan

kod berwarna merah di atas adalah kod yang saya tambah untuk menjadikannya bertukar arah

perkatan pergi dan balik (lihat contoh di bawah)

<marquee behavior="alternate" direction="left" bgcolor="#FCF81F" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Selamat Datang Ke probuatblog.blogspot.com</marquee>

Selamat Datang Ke probuatblog.blogspot.com

nota : (anda boleh menukar kelajuan dengan melihat cara di bawah)

bergerak dengan setting masa sendiri

<marquee direction="right" scrollamount="10" >dari kiri ke kanan dengan tempoh masa 10</marquee>

dari kiri ke kanan dengan tempoh masa 10

nota : tukarkan perkataan scrollamount kt atas nie dengan masa yg anda kehendaki

Berhentikan tulisan y sedang berjalan(sila halakan mouse pada tulisan di bawah)

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkankan mouse pada teks,berhenti</marquee>

arahkankan mouse pada teks,berhenti

untuk membuat tulisan naik,turun cuba kod di bawah nie

<marquee behavior="alternate" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" bgcolor="#FCF81F"><marquee direction="right" behavior="alternate">Selamat Datang Ke probuatblog.blogspot.com</marquee></marquee><br />

Selamat Datang Ke probuatblog.blogspot.com


nota(warna backgroung boleh di ubah mengikut kesukaan anda dengan menukar kod bgcolor)


tulisan bergerak bersama gambar

<table style="border-collapse: collapse; width: 338px; height: 75px;" background="http://i822.photobucket.com/albums/zz147/amykozo/BANNAER-PRO-2.gif" border="1" bordercolor="white"><tbody><tr><td><span style="font-family:arial black;font-size:+30;color:#FF0000;"><marquee><img style="width: 30px;height:30px;"src="http://i822.photobucket.com/albums/zz147/amykozo/PinkPantherBlackGirlsTee2.jpg" />Selamat Datang ke probuatblog.blogspot.com</marquee></span></td></tr></tbody></table>

Selamat Datang ke probuatblog.blogspot.com

untuk menghasilkan tulisan dan gambar seperti di atas ini,anda perlu mengikut beberapa langkah :

1)background "http://i882.photobucket.com/albums/zz147/amykozo/BANNER-PRO-2.gif" di ubah kepada link background anda

CARA POST KAT BLOGSPOT 1 Sep 2010 11:00 PM (14 years ago)

Ok kita masih lagi di tutorial newbie.. nie ada beberapa contoh kat mana nak post dan setting pada post anda..tengok gambar di bawah :

CARA REGISTER KAT BLOG SPOT 26 Jul 2010 6:00 AM (14 years ago)

Assalamualaikum semua....


Hari nie PROBUATBLOG nk ajar kepada korang yang masih baru dalam bidang ini ataupun masih tercari2 cara nak buat blog....apa yang aku nak bagikan kat sini adalah basic sahaja..jadi kepada yang dah pro tue jangan lah protes ea..hehe kalau boleh kongsi lah idea korang kat sini..aku pun takdelah pro mana tapi bab2 basic tue bolehlah SIKIT2.. blog nie pon aku namakan probuatblog bukan sebab aku pro buat blog,tapi sebab aku tak tau da nak letak nama pe...sume not available..huhuhu Sebenarnya tujuan aku cumalah nak menolong sebab aku tau apa perasaan korang yang baru nak belajar buat blog nie..Dulu aku sendiri pun tercari2 macam  mana diorang boleh buat macam tulah,macam nie la...



sebelum korang pergi ke tahap lebih profesional, aku syorkan korang belajar dulu basic yang aku bagi nie..barulah korang mudah nak paham.. penuhkan diri korang dengan ilmu dan barulah mudah korang nak reka blog nanti.... manalah tau ilmu yang aku bagi nie kot2 ada bagusnya..hehe aku percaya ramai yang nak buat blog untuk pasarkan barangan korang ataupun kongsi maklumat dengan orang lain,tapi korang kena belajar cara buat blog...ini aku akan ajar korang serba sedikit tentang ini dan aku akan share laman blog yang korang boleh survey untuk belajar blog dengan lebih baik.. aku cuba berikan korang maklumat percuma seberapa yang aku mampu..semoga korang mendapat manfaat dari ilmu ini..


ok,sebelum korang nak buat blog korang kenalah buat akaun google.untuk isi form korang click kat link nie GOOGLE ..kalau ada akaun yahoo pun boleh gak..gi klik nie YAHOO .. aku rasa korang mesti dah tau nak cara nak buat akaun yahoo dan google so kalu korang dah ada kedua2 akaun nie, basic yang korang kena tau adalah register untuk blogger...pergi ka laman web www.blogspot.com.. first korang kena isi form yang dia bagi..nie ada contoh yang aku amik dari youtube :