November 2010 | Tutorial Blog

Emotion Upin & Ipin Pada Komen Blog

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Pada post yang sebelumnya saya ada menerangkan bagaimana untuk membuat emotion soldier pada komen blog. Dan pada kali ini pula agak berbeza kerana saya menggunakan emotion upin dan ipin pada komen blog. Untuk membuatnya seperti biasa sila ikut step di bawah :

1) Login blogger >> Design >> Edit Html >> Download full Template >> Expand Widget Template

2) Setelah itu dengan , dengan menggunakan kekunci CTRL + F/ F3 cari kod </body>

3) Jika anda sudah menjumpainya, sila copy kod di bawah ini dan paste kan sebelum/di atas kod </body>

<script src='http://aditx.fileave.com/upin-emoticons.js' type='text/javascript'/>

4) Setelah selesai, cari kod di bawah ini pula :

<b:if cond='data:post.embedCommentForm'>

Jika sudah menemukannya sila copy kod dibawah ini tepat di atas/sebelum kod

<b:if cond='data:post.embedCommentForm'>

<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_y45CSbI/AAAAAAAAA78/QsXnQdLYu7A/s800/ehsan01.gif' width='50'/>

:a:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC1_zL6GKxI/AAAAAAAAA8A/hhFDtKzpMJo/s800/ehsan02.gif' width='50'/>

:b:

<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_zFOpRNI/AAAAAAAAA8E/IgAjo0-WC3k/s800/fizi01.gif' width='50'/>

:c:

<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC1_zAkM1fI/AAAAAAAAA8I/WbE7K08g2zU/s800/ipin01.gif' width='50'/>

:d:

<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/TC1_zSnurLI/AAAAAAAAA8M/SE6ijbGGRgY/s800/ipin02.gif' width='50'/>

:e:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACEPepaI/AAAAAAAAA8Q/Mr3O2IY_PwY/s800/kakros01.gif' width='50'/>

:f:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACUO5MxI/AAAAAAAAA8U/lOZem_1eYzA/s800/kakros02.gif' width='50'/>

:g:

<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACWDn6NI/AAAAAAAAA8Y/BdPtc9HGzbc/s800/mail01.gif' width='50'/>

:h:

<img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACXXjJ6I/AAAAAAAAA8c/afGmF42wKNk/s800/upin01.gif' width='50'/>

:i:

<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC2ACt_jfiI/AAAAAAAAA8g/b0tn4s4TpUU/s800/upin02.gif' width='50'/>

:j:

Setelah semuanya selesai, klik preview dan jika tiada sebarang error maka klik save template

Cara pasang soldier emotions pada kotak komen

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

Memasang emotion pada komen anda sememangnya mencantikkan lagi blog.Akan tetapi, Untuk makluman anda, memasang emotion pada komen blog adalah tidak sesuai untuk semua template. Ada sesetengah template yang hanya mengeluarkan kod tetapi emotion tidak dapat dihasilkan. Jadi kepada sesiapa yang berminat mencuba saya nasihatkan back up dahulu full template anda untuk mengelakkan sebarang error..

Untuk membuatnya sila ikut beberapa langkah ini :

1) Login Blogger >> Design >> Edit Html >> Expand Widget Template

2) Selepas itu dengan menggunakan CTRL + F cari kod </body>

3) Copy kod di bawah ini dan paste sebelum ataupun di atas kod </body>

Setelah selesai, cari pula kod di bawah ini :

<b:if cond='data:post.embedCommentForm'>

Jika sudah menemukan kod di atas, copy kod di bawah ini dan paste sebelum/di atas kod

<b:if cond='data:post.embedCommentForm'>

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81H087PQqI/AAAAAAAAA1Q/XJwK7ZX_OWI/s800/th_toel2.gif' width='50'/>

:a:

<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81H0-7Ic_I/AAAAAAAAA1M/4elLiuOvxAE/s800/th_sinar_penghancur.gif' width='50'/>

:b:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtryEUoI/AAAAAAAAA1I/P_DjCdY63ss/s800/th_rokok_dulu_bos.gif' width='50'/>

:c:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtSx5JkI/AAAAAAAAA1E/rFy1OtLdpfk/s800/th_nyanyi_dolo.gif' width='50'/>

:d:

<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81HtAkZLWI/AAAAAAAAA1A/MtxAiF2noLs/s800/th_ngupil.gif' width='50'/>

:e:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtB260HI/AAAAAAAAA08/s4FrKbVSiqE/s800/th_ngantuk.gif' width='50'/>

:f:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtDrG9GI/AAAAAAAAA04/iD3Qgl_HiMk/s800/th_nangis_bawang.gif' width='50'/>

:g:

<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HjGJfEAI/AAAAAAAAA00/M_2hdkO1jrc/s800/th_mboh_gajelas.gif' width='50'/>

:h:

<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HjLDGxSI/AAAAAAAAA0w/cNyFhVZ0eow/s800/th_hoeekzz.gif' width='50'/>

:i:

<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81Hi1DwTFI/AAAAAAAAA0s/PpjN6pC6Yvg/s800/th_cloud_ngeDJ_wkaaka.gif' width='50'/>

:j:

<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HiytkCuI/AAAAAAAAA0o/pyVM3hcKHUI/s800/th_bye.gif' width='50'/>

:k:

<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81Hi-RW5AI/AAAAAAAAA0k/TuBPNUsIun0/s800/th_boom_boom.gif' width='50'/>

:l:

Setelah semuanya selesai sila klik preview dan jika tiada sebarang error maka klik save template

Tambah Icon Di sebelah Tajuk Post

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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;}

kod berwarna kuning ini adalah kod yang perlu ditambah di bawah kod tersebut

Jika tidak jumpa kod seperti diatas cuba pula kod ini :

<a expr:href='data:post.url'><data:post.title/></a>

Nota: jika terdapat lebih dari satu kod di atas ini(maksudnya anda jumpa kod yg sama) ,maka masukkan pada kod yang pertama.

Letakkan kod(yang berwwarna kuning) kepada kod url gambar anda yang sudah di upload tadi..

<a expr:href='data:post.url'><img src="gantikan kepada url gambar anda"/> <data:post.title/></a>

Setelah selesai klik preview,jika tiada error maka seterusnya klik save template

Membuat Drop Down Menu

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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

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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif);}

.preload2 {background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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:35pxpx; background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat;}

#nav li:hover a.top_link span {background:url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(http://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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://1.bp.blogspot.com/_-RTzkzFP6c0/TP1QEGqTydI/AAAAAAAAACE/6ZympCECo3M/s1600/bagus.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 a Gadget dan masukkan kod di bawah

<ul id="nav">

<li class="top"><a href="#" class="top_link">Home</a></li>

<li class="top"><a href="#" id="Menu" class="top_link">Menu</a>

<ul class="sub">

<li>Judul1</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>Subjudul3.1</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>Subjudul3.2</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>Judul2</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">menu2</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 class="top"><a href="#" id="services" class="top_link">menu3</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 class="top"><a href="#" id="services" class="top_link">menu4</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">menu5</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 Memasang Yahoo Emotion Di Atas Kotak Komen

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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>

<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>

6. setelah selesai seterusnya cari kod ini pula :

<b:if cond='data:post.embedCommentForm'>

7. Pastekan kod dibawah ini dibawah kod diatas(no. 6)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))

</div>

8)Preview dulu hasilnya,jika tiada sebarang error,klik butang dan save template

P/S : Tidak semua template sesuai untuk cara ini. Pastikan anda sentiasa back up template sebelum melakukan sebarang perubahan

Cara Buat Border Melengkung

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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 Video Secara Autoplay & Suara Tanpa Video

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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 :

Tambah kod di atas menjadi seperti ini :

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 :

Tukar & tambah kod di atas menjadi seperti ini :

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..

Cara Masukkan Video You Tube

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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..

Meletak Border DI Sekeliling Post

Posted by Borong Shop | Labels: About Me, Seo, Tutorial

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 membuatnya:

1.Log in ke blogger
2.pilih Design--->>Edit HTML

3.Dengan menggunakan Ctrl + F Cari kod ini .post {

Kemudian letak kod berikut dibawah kod .post {

border: 1px solid #000000;

jika inginkan border yang berlainan gunakan kod ini:

border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;

Note :

1)Border boleh ditukar dengan menukar perkataan solid kepada dotted,dashed,outset,inset,groove,double dan ridge
2)Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
3)Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:

background: #000000;

atau nak letak imej sebagai background masukkan kod ini:

background:url (url image anda disini);

Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik

klik preview dahulu,jika tiada sebarang error seterusnya klik dan save template

Emotion Upin & Ipin Pada Komen Blog

Cara pasang soldier emotions pada kotak komen

Tambah Icon Di sebelah Tajuk Post

Membuat Drop Down Menu

Cara Memasang Yahoo Emotion Di Atas Kotak Komen

Cara Buat Border Melengkung

Cara Pasang Video Secara Autoplay & Suara Tanpa Video

Cara Masukkan Video You Tube

Meletak Border DI Sekeliling Post

Iklan

Followers

Add Me On Facebook

Tutorial

Jom TerjAh Mereka

Blog Archive

Recent Post