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

Aug 26, 2011

Tutorial center kan header


As salam

Yang ney untuk centerkan header di blog anda. Takder lah nanti senget sebelah kan.


1)Design - Edit Html - tick Expand Widget Template
2) Ctrl + F, untuk cari kod ini

/* Content


3) Kemudian, copy kod di bawah ini sebelum/atas kod tadi 

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

4)Preview dulu baru save.


Selamat mencuba. :)

Tutorial border keliling blog


Border ney hanya untuk mereka yang menggunakan simple template sahaja.Cuba tengok Tutorial yang kat SINI

1)Design-Edit Html-tick Expand Widget Template

2)Ctrl + F, untuk cari kod bawah ini 

.content-inner {


3)Kemudian, tambahkan kod di di bawah ini SELEPAS kod tadi.


border: 2px solid #FA5858;


 "2px" adalah ketebalan dan "#FA5858" adalah warna border yang diinginkan dan boleh ditukar mengikut citerasa anda. 
Nak tukar warna?ce tengok kod warna di SINI

 Yang "solid" tu kan, pun boleh tukar kepada ::  dashed | dotted | solid 

4)Preview dan Save

Selamat mencuba. :)

Tutorial scroll box

Assalamualaikum,ok kita proceed dengan tutorial ini pula.Kali ini tuto tentang macam mana nak buat scroll box untuk bloglist macam gambar kat bawah ni.Sweet kan?Jimat ruang,nampak lebih kemas dan boleh ringankan loading blog kita.Dah sedia?Jum saya tunjukkan.



1)Design-Edit Html-tick Expand Widget Template

2)Download full templete untuk backup 
in case terjadi apa2 yang tak diingini

3) Ctrl + F, untuk cari kod bloglist anda

contoh macam saya
cupcake
setar

4)Dah jumpa? Okey, kemudian cari pula kod di bawah ini

<div class='widget-content'>

5)Then, gantikan kod di atas tadi dengan kod kat bawah ini

<div class='widget-content' style='overflow:auto; width:ancho; height:200px;'>




 Height yang telah saya highlightkan itu boleh diubah mengikut citerasa anda

 6)Preview dan Save

 Selamat Mencuba. (:

Tutorial Teks Bergerak

Tutorial ni untuk buat teks atau gambar korang boleh bergerak gerak gitu.Tak kisah korang nak buat kat entry atau sidebar.2 2 boleh.Ce tengok kod yang diberikan kat bawah ini.Senang je,just copy k.Kalau korang nak letak dekat entry, just copy dekat entry.Tapi, kalau nak letak dekat sidebar then ikut step ini


1) Design-Add a gadget-HTML/JavaScript.

2)Pilih kod yang korang nak dan Paste kan

Dari Kanan ke Kiri

Contoh seperti ini :D



<marquee>Perkataan anda di sini</marquee>



Dari Kiri ke kanan

Contoh seperti ini :D


<marquee direction="right">Perkataan anda di sini</marquee>



 Fixed (1)

Contoh seperti ini :D


     <marquee behavior="alternate" width="300">Perkataan anda di sini</marquee>




Fixed (2)

Contoh seperti ini :D


<marquee behavior="alternate">Perkataan anda di sini</marquee>



 Boleh ajdust speed

Contoh seperti ini


<marquee direction="right" scrollamount="4">Perkataan anda di sini</marquee>


 "4"menunjukkan kelajuan scroll itu ,so korang boleh adjust kat situ k.Makin   besar number makin laju 




 Dari Bawah ke Atas


Contoh ::
♥.| Apabila jiwa dan raga kita menjurus kepada Allah SWT Yang Esa, maka ujian akan datang untuk mennguji ketakwaan manusia. Ia lebih halus dan berat dari berjuang bermati-matian menentang musuh-musuh Allah yang durjana.|♥.



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">Perkataan anda di sini
</marquee>



 width dan height tu, boleh ditukar mengikut citarasa anda


3)Preview dan Save

Selamat mencuba

Tutorial My status

Hai, kali ini tutorial macam mana nak buat kotak my status.Bagi yang masih blur2 apa itu kotak status yang saya maksudkan, ce tengok kat atas sidebar saya,ada "Ucapan rasmi"..ha itu lah dia.Xdapat tangkap lagi?ok2 xpe,ce tengok gambar bawah ini pula.


Dah nampak kan?ok skang jum kita buat sama2 yer.

1)Design-Page Elements-Add a gadjet-HTML/Java script

2)Paste code dibawah ini

<center style="text-align: right;"><b><center><font>TAJUK </font></center></b></center><div style="background-image: url(URL BACKGROUND YANG KORANG SUKA); padding: 5px; border: 3px dashed #f9b7ff;"><center><marquee>STATUS </marquee></center></div>
3)Semua yang saya highlight kan tu boleh ditukar mengikut citerasa anda ok

4)Preview dan Save

 Selamat Mencuba


Aug 25, 2011

Tutorial hide shoutbox dengan icon comel

Comel kan?geram jer tengok :)Jum layanzzz

1)Dashboard,then Design.Click page element

2)Add a gadget kat bahagian sidebar.

3)Choose Html/java script

4)Then past code ini

<style type="text/css">#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:100px;width:30px;float:left;cursor:pointer; background:url('  ') no-repeat;}.gbcontent{float:left;border:2px solid #666666;background:#F5F5F5;padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">paste kod shoutbox korang kat sini<div style="text-align:right"><a href="javascript:showHideGB()">[close/tutup]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>

Background url pada bahagian (' ') perlu diisi mengikut code html icon2 comel korang.eg;background:url('http://i1210.photobucket.com/albums/cc413/fauzioji/ghkjl.png ') no-repeat;}


Korang juga boleh adjust width dan height dia dan ubah nombor px kat atas tu
height:100px;width:30px


Code icon dapatkan nya di Photobucket ok.Kat bawah ni ada beberapa icon comel.
http://i1210.photobucket.com/albums/cc413/fauzioji/ghkjl.png


http://i1103.photobucket.com/albums/g463/AwanNana/Untitled_Ime.png
http://i1210.photobucket.com/albums/cc413/fauzioji/rtyu.png




http://i1180.photobucket.com/albums/x404/farynamn97/shoutherepurple.gif
http://i1223.photobucket.com/albums/dd505/aresheraff/domo.png

Tutorial buat fieldbox

Hai korang,kali ini tutorial untuk buat fieldbox pula.Tu..box macam kat atas tu.

1)Dashboard-Design-Page Elements

2)Download full templete untuk backup

3)Add a gadget lepas tu pilh HTML/Java script

4)Copy Kod ini
form><fieldset><legend>TAJUK</legend>UCAPAN </fieldset>
5)Preview dan Save 

Tajuk dan Ucapan tu korang boleh tukar mengikut citerasa korang.Then untuk hias2 fieldbox tu korang boleh godek2 HTML kot kat bawah ini ok :)

contoh kalau nak tukar warna text
<FONT COLOR=#C850A5>text korang</FONT>
Tulisan pink tu kod yang korang boleh tukar mengikut warna yang korang nak.
Nak tukar warna?Tengok html color code kat SINI

contoh nak letak icon comel
Ambil html code icon itu dan paste sahaja.
Icon comel di SINI
eg;<a href="http://www.glitter-graphics.com"><img src="http://dl10.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif" width=50 height=50 border=0></a>


Lagi html syntax


<p>text</p>Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p>Left justify text in paragraph.
<p align="center">text</p>Center text in paragraph.
<p align="right">text</p>Right justify text in paragraph.
text<br>Adds a single linebreak where the tag is. 
<nobr>text</nobr>Turns off automatic linebreaks
- even if text is wider than the window.
text<wbr>Allows the browser to insert a linebreak
at exactly this point
- even if the text is within <nobr> tags.
<center>text</center>Center text.
<div align="center">text</div>Center text.
<div align="left">text</div>Left justify text.
<div align="right">text</div>Right justify text.

sumber syntax box diatas dari echoecho

Aug 24, 2011

Tutorial buat cloud tag berputar

Nak buat cloud tag macam nie?Jum layan tutorial


1)Dashboard-Design-Edit HTML 

2)Download full template untuk backup .

3)Tick expand widget

4)Cntrl F cari code ini
<b:section class='sidebar' id='sidebar' preferred='yes'>
Jika tiada cuba cari kod ini pula
<b:section-contents id='sidebar-right-1'>

5)Copy code dibawah ini selepas kod diatas tadi
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Untuk mengubah lebar dan tinggi,tukar “240” –width atau “300”-hight mengikut kesesuaian sidebar anda. #ffffff adalah kod background.Ubah font pula _”0x3333”

Contoh warna lain
0xffffff : warna putih

0xFF0000FFF : warna merah
0x00FF00: Warna Hijau
0x0FFFF0: warna Kuning
0x00FF0000 : warna biru
0xFFF000 : warna biru muda
0xFFFFFFF : Warna Hitam
0x0FF0FF0 : warna pink


Preview dan kalau tiada apa-apa masalah boleh save.

Jika tidak menjadi, sila pastikan label text menjadi  label cloud.
Design-Page Element-Label Perhatikan gambar dibawah ini :

Aug 8, 2011

Tutorial pakai pashmina dan shawl

Musim perayaan ini mesti korang sume nak bergaya sakan kan?Tren sekarang ramai yang meminati shawl n pashmina.So here ade tutorial untuk korang yang baru nak try belajar cara pakai.Saya suka tgk video dari ayun ayunar & tyahxxbiebs .Tutorial yang awesome plus tyah cute sgt hehe.enjoy

pesanan penaja:kepada semua,bergaya tiada salahnya,janji menjaga aurat ya!Ingat,bahagian dada haruslah ditutup wokeh
Ayun Ayunar





Tyah





lepas dah siap pakai shawl or pashmina tu..letak lah accessori siket sbgai penyeri 
ni koleksi cute ribbon dan pins saya :)


Footer