.: September 2011

Tutorial : Tukar Home, Newer & Older Post Kepada Icon Yang Comel

salam 1 malaysia smua.....apa khabar....
wahhh...akk asyik wat tuto je....bkn ape....tiap kali on9, ade je yg tanye.....
ok la...kali ni akk nk ajar mcmane nak tukar Home + Older + Newer Post kepada icon yang comel...
byk keje sikit nk buat ni...sbb nak tukar 3 perkara...

1. design > edit Html
2. tick expand widget template
3. tekan ctrl F dan cari perkataan di bawah

<data:newerPageTitle/>

4. tukar kod kat atas kepada kod ini.

<img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

** tulisan merah tu korang tukar ke url gambar yg korang nak ye (newer)...yg itu contoh je tau.

5. tekan ctrl F skali lagi, cari perkataan di bawah

<data:olderPageTitle/>

6. gantikan kod kat atas kepada kod ini

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

** tulisan merah tu tukar ke url gambar yang korang nak.. (older post)

7. tekan ctrl F lagi dan cari perkataan ni

expr:href='data:blog.homepageUrl'><data:homeMsg/>

8. gantikan tulisan merah tu kepada kod di bawah

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png
'/>

**tulisan merah tu gantikan ke url icon yang korang suke ye...(Home).yg kat ats tu contoh je..

kalau dh siap preview dulu...manela tau x jadi....kalau jadi terus save ye...
kat sini ade beberape contoh je ye...

newer icon :

http://i1201.photobucket.com/albums/bb350/alexandrite_silver/NewerPost_icon.jpg

older post :

http://i1201.photobucket.com/albums/bb350/alexandrite_silver/OlderPost_icon.jpg

home icon :

http://i1201.photobucket.com/albums/bb350/alexandrite_silver/Home_icon.jpg

newer icon :

http://i.imgur.com/Yfnix.png

older post :

http://i.imgur.com/UOQH8.png

newer icon :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8DkLeBSJWK6pMtDvFjQW5_5TmrEi_A4K735daU73xAAyzVvxogKNctes4oeJYJNQtB0DMGA-brmNbTRx3U7kbrxg0xTwFTvzwPG2F7SudRb3g-0eBM3O_mh4mqV_kX_vveQ7OQJEbv6k1/s1600/Newer_post_icon+%25281%2529.png

older post :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDu0VcAl5A-167UnkIzPi2PKFjstbm-kMtsJBiPeIggM8WiSrd6qzyp1-mfGcsvU5F4UCf5fiInKMp9moJhvSCrw7KLnIWRS8fS_DG4YyKO2F34hMckZguPfJ8U5KBtL6gLBjrYjY_SZN/s1600/older_post_icon+%25281%2529.png

home icon :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnfCYwloHNN0p61DgEKWEsy9r03GirX_lkSXbAlkXDEZiGKNC3-V2cM0i2qPcNtm1QUJI4Q4Q4jlxkcXfPe24XxmNRuBMyys-EPh4LxRWwyFxNf8GaY0z_uAEkGHL2gd11g0H7UAzF1SnD/s1600/home_icon.png

**ini yang smpt akk mskkan dulu ye...nanti kalau ada kelapangan akk akn masukkan lg..insyaallah...

"selamat mencube"

kalau dah jd tu...bg tau la ye...

Tutorial : HOME Icon Untuk Blog

salam smue sahabat blogger..
hr ni akak nk ajar buat Icon HOME yg comel mcm HOME akk kat sblh kiri bawah skali...comel tak..?

1. Design > Add Gadjet dan klik HTML/Javascript
Copy dan paste kod kat bawah ni...

<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; bottom:10px; left:-12px;'>

<a class='linkopacity' href='LINK BLOG KORANG' style='margin-left: 1em; margin-right: 1em;' title='HOME'><img border="0"width="50" height="50" src="URL HOME ICON" /></a><br />

---> kalau nak tukar

- width="50" height="50" tu ikut kesesuaian blog (tak tukar pun tak pe)

- kalau nak letak icon HOME tu kat sebelah atas, tukar perkataan bottom tu ke top

- margin left tu pun boleh tukar ke right (tak tukar pun tak pe)

- jangan lupa masukkan link blog korang kat tulisan merah tu ye.

- url home icon tu pun tukar skali..masukkan url home icon yang korang suke.

---> kat sini akk ade bg beberape contoh home icon...pilih la yg mane korang suke...nanti copy url home icon kat bawah dan paste kat tulisan merah tu ye.

http://th903.photobucket.com/albums/ac239/Dediekusmayadi/th_Home_Icon-1.png

http://th1109.photobucket.com/albums/h432/nitawakan/th_home-icon.png

http://th269.photobucket.com/albums/jj47/anjieya/th_home-icon.jpg

http://th122.photobucket.com/albums/o280/techwar88/th_home.gif

http://th604.photobucket.com/albums/tt126/heporz/Icon/th_home-64x64.png

http://th975.photobucket.com/albums/ae233/huynhkongthanh/ICON/th_home.png

http://th612.photobucket.com/albums/tt209/juanv23/th_Home.png

ok...selamat mencube... :-)

Tutorial : Create Page Untuk Menu Tab (biasa)

salam smua.....

ok semua....kali ni kite blaja nk buat page untuk menu tab biase..

mcm kat bwh ni...yang ade tulis 'Muka Depan, Macam2 Citer' tu...

1. design > new post > edit page

2. tekan create page / new page

3. kat bahagian page title tu taipla tajuk2 yg korang nk letak...macam tulisan merah akk kat ats tu..taip satu2 dulu ye...

4. lps tu nk masukkan link kat dalam page tu pulak buat mcm ni...taip dulu tajuk2 citer yang korang pernah post....

5. lps tu pergi ke blog korang (bkk page lain la ye...) korang highlightkan tajuk yang korang post..bkn page title ye...tp tajuk kat dlm entri yang korang taip tadi..kat page yg korang bkk td..klik la mane2 citer yg korang prnh post then kat atas skali (yg ade www tu) korang copy ye..

6. tajuk yg korang dh highlightkan tadi, korang klik kat perkataan pautan. kat web adress tu korang paste la link yg korang copy kat ats td tu (www.contoh.) dan tekan OK.buat di cara yg same di setiap tajuk yg pernah korang post. dh siap satu bab...

7. skrg tekan publish post kat bwh yg kale oren tu.korang tick blog tabs. save dan tgk ape hasilnye.jd tak...?

8. kalau rase nk tukar kale tab korang pergi ke : design > template designer > advance > tabs text

**akk mintak maaf ye kalo ade yg x faham ape yg akk ajar....ni nk cpt punye keje...

kalau x boleh buat pegi ke sini

Tutorial : Buat Kotak Kat Dalam Post (Blackquote)

salam smua...

wahhh...akk rase dh mcm cikgu plk....nk ajar tuto utk buat kotak kat dlm post....

tau x kotak dalam post tu macamane...

mcm kat bwh ni..

assalamualaikum....

1. design > edit Html > tick Expend Widget

2. tekan Ctrl F dan cari kod kat bawah ni

]]></b:skin>

3. copy kod kat bwh ni pulak ye

.post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
}

4. paste sebelum kod yang korang cari td ye...

5. tulisan biru tu boleh tukar dengan warna yang korang suke. contoh kat sini

6. tulisan purple tu korang boleh tukar untuk bentuk garisan yang korang suke ye..

solid ---> garisan lurus (__________)

dotted ---> garisan titik (......................)

dashed ---> garisan putus putus (- - - - - - - - - - -)

7. ok...klik save

Tutorial : Kotak Untuk Sidebar Gadjet

Salam smua....

ok...hr ni akk nak ajar buat kotak2 utk sidebar gadjet mcm kat blog akk di sblh kanan tu...

tujuannye bkn ape....biar nmpk kemas dan tersusun....akk suke bende2 yg kemas dan tersusun...tak la serabut mata...kan...?

buat mcm ni ye...

1. Design > Edit Html

2. tick Expand widget template

3. cari kod kat bawah

]]></b:skin>

4. copy kod kat bwh ni dan letak kat atas kod yang korang cari tadi

.sidebar .widget {

background: #ffffff ;
border: 3px solid #FF0066;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
background: ;
border: 0px solid #CCCCCC;
border-bottom: 0px solid #CCCCCC;
margin:0 0 1.5em; padding:0 0 1.5em;
}

5. background dan border blh ditukar mengikut citarase masing2....tak nak tukar pun tak pe...

6. preview dulu sblm save....kalau dh jd...br save ye...

'selamat mencube'

Tutorial : Hide Shoutbox

Salam semua....hr ni first time akak nk ajar tuto ni...

macamane nak sorok shoutbox kat tepi....
pastu letak la pic yang comel2 kat sebelah shoutbox tu...

Macam ni caranye...
1. Dashboard > Desingn > Add Gadget > Html

2. Pastu copy code kat bwh ni....

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('URL PIC') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">

MASUKKAN KOD SHOUTMIX KORANG KAT SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

3. Kalau dh copy, paste kat HTML ye..
4. Yang warna merah tu, cari la mane2 pic yang korang suke..yg ade tulis shoutbox tau..
5. Pastu masukkan kat dalam kurungan tu...(jgn lupe delete perkataan URL PIC
6. Yang warna biru boleh tukar saiz ikut kesesuaian blog korang.
7. Yang warna oren tu masukkan code shotmix korang.
8. Save la ye...

Ade beberape image comel kat sini. Pilihla nak yang mane..