✎ follower

Susah Senang Sama Sama

Daisypath - Personal pictureDaisypath Anniversary tickersborder="0" height="80" src="img src="http://davf.daisypath.com/pywip8.png" width="450" / />

Friday, December 30

Tutorial 12 - Button Follower Lain Dari Yang Lain

Hyte !
Aku baru je berjaya buat eksperiment kat blog adik aku.
Macam biasalah blog adik aku selalunya jadi mangsa hehe.

Kali ni aku nak ajar korang bila tekan button follower ni..


Dari atas follower box akan turun.


Kalau nak lebih faham pergi blog sini nanti korang akan lebih faham apa yang aku maksudkan.

Jom buat !

1- Mula-mula korang kena cari dulu CODE FOLLOWER BLOG korang.  Jangan risau, korang pergi tutorial yang SINI. Tutorial ni ada ajar cara nak cari code follower =) .

2- Dashboard > Design > Add a gadget > HTML / Javascript .  Copy code dibawah ni dan paste di ruang HTML.

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
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:-0px; left:-0px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="100" height="80"src="http://i.imgur.com/otyvC.gif" alt="PUSH" title="JOM KLIK"/></a>
</div>


3- Code di atas ni untuk buat BUTTON FOLLOW.
 width="100" height="80" : untuk saiz LEBAR dan PANJANG button follow.
 http://i.imgur.com/otyvC.gif : untuk URL IMAGE button follow.
 JOM KLIK : untuk ayat korang.  Nak kekalkan pun takpe.

4- Save.

5- BELUM SIAP lagi tau !  Sekarang nak buat tempat follower pulak.
Dashboard > Design > Add a gadget > HTML / Javascript.

6- Copy code dibawah ni dan paste diruang HTML okay.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:60px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dashed #a64d79;
background: url(URL BACKGROUND);repeat-x bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
Masukkan CODE FOLLOWER KORANG tadi.
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://3.bp.blogspot.com/_LhHZAifMoFE/TN6myUsdsZI/AAAAAAAAC-Q/VqSys0LrD3o/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br /><div align="right"><font size="3"><a href="http://wanhazel.blogspot.com/"><div style="color: #FF0000;">
<span ></span></div></a></font></div>
</div></div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div>



7-
 dashed : boleh tukar kepada dotted , solid atau nak kekalkan pun boleh.
 #a64d79 : code warna untuk border background korang.
 URL BACKGROUND : URL BACKGROUND follower box korang.
Masukkan CODE FOLLOWER KORANG tadi : CODE FOLLOWER BLOG yang mula-mula aku suruh korang cari tadi tu.


8- Dah SIAP !  SAVE !  =)

Kalau jadi tinggalkan komen ye =)  Selamat mencuba !


dah baca??? Tinggalkanlah comment. Tengkayu =)

Tutorial 11 - Cara nak cari CODE FOLLOWER blog

Hyte !
Tuto kali ni bukan lah dari aku tapi dari blog suterakasihyann.



Tuto ni khas untuk blogger yang nak sangat cari code follower termasuklah aku hehe.
Kalau korang perasan dekat follower blog tu takde code.
Takkan nak cari satu-satu dekat edit HTML tu kan.

Betul tak ? 
So tuto ni dapat membantu korang =).
Aku dah cuba dekat blog adik aku dan ia memang menjadi.
Jadi jangan risau okay.

Kalau tak faham boleh tanya.

Selamat mencuba !


dah baca??? Tinggalkanlah comment. Tengkayu =)

Tutorial 10 - Ringankan blog ( InsyaAllah )

Hyte !
Pagi tadi ada akak ni yang tanya macam mana nak bagi blog kita ringan.
Tak payah loading lama-lama hehe. 

Ini blog yang request tu.  Jangan lupa singgah blog ni ye =).

Insyallah tuto ni dapat membantu =)

Dashboard > Design > Add a gadget > HTML / Javascript

1- Copy code dibawah ni dan paste di ruang HTML / Javascript ye.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif"
});
});
</script>


2- Dah paste ?  Kalau dah save ye.
3- Kalau macam agak berat lagi.  Korang boleh letakkan scrollbox dekat Blog Archieve dan Blog List.
Bagi ringankan lagi.  Insyallah menjadi =).

Tekan sini untuk scrollbox blog archieve
Tekan sini untuk scrollbox blog list



dah baca??? Tinggalkanlah comment. Tengkayu =)

Thursday, December 29

Tutorial 9 - Tukar font kesukaan di ENTRY blog

Hyte !
Selalu FONT entry blog semua kena ambil di template je kan.
Tapi sekarang ni kita dah boleh gantikan font yang kita suka walaupun font tu takde dalam template.
Menarik tak ?

Nak cuba ?

Jom !

Dashboard > Design > Edit HTML

1- Cari code dibawah ni. (ctrl F untuk mudahkan pencarian )

<head>

2- Copy code ni dan pastekan DIBAWAH <head> . ' Tahoma ' boleh tukar pada font yang korang suka =) .

<link href='http://fonts.googleapis.com/css?family=Tahoma' rel='stylesheet' type='text/css'/>

3- Eh belum siap lagi tau  !  Sekarang cari code dibawah ni pulak. (ctrl F untuk mudahkan pencarian ).

.post-body

4-  Copy code dibawah ni dan pastekan DIBAWAH  ' post-body '. ' Tahoma ' boleh tukar pada font yang korang suka tadi. PASTIKAN font yang korang nak tu sama dengan font yang mula-mula tadi. ' 22 ' tu boleh tukar pada size font yang korang suka.

{ font-family: 'Tahoma', arial, serif; font-size:22px;}

5- Dah siap !  Preview dulu baru save okay. =)





dah baca??? Tinggalkanlah comment. Tengkayu =)

Wednesday, December 28

Tutorial 8 - Cara nak buat ShoutCamp

Hyte !
Okey hari ni aku nak ajar korang macam mana nak buat shoutcamp.
Sebelum tu korang tau tak apa itu shoutcamp.


Ni lah shoutcamp.
Bila korang tekan dekat post message tu,dia akan jadi macam bawah ni.


Kalau nak tengok lebih dekat, pergi blog sini.

Apa lagi, Jom !

1- Klik sini !

2- Kat bahagian atas tepi tu ada perkataan REGISTER. Klik register.

3- Nanti akan keluar macam bawah ni.  Korang isi la apa yang patut.  Dah siap tekan register. 



4- Klik Create Shoutbox Now.



5-  Isi apa yang patut dan next.  Nanti akan keluar avatar.  Avatar tu untuk korang letak gambar macam tu.  Kalau taknak just tekan close. Kalau nak lawakan shoutcamp korang pergi tekan home.



6- Keluar macam bawah ni dan tekan Manage Area.



7- Korang tekan Edit Layout.

8- Korang tekan je mana-mana yang korang nak tukar.



9- Dah puas hati dengan shoutcamp korang ?  Tekan Home > Install.  Nanti akan keluar macam bawah ni. Copy code dibawah ni.


10- Nak paste kat mana ?  Sama macam biasa.

Dashboard > Design > Add a gadget > HTML / JavaScript

11- Pastekan kat ruang HTML.  Dah siap preview baru save.

Selamat mencuba !




dah baca??? Tinggalkanlah comment. Tengkayu =)

Tuesday, December 27

Tutorial 7 - Letak Background dan Border di Blog List + Scroll box

Selalu putih je.  Sian dia..
Nak jugak baju baru kan, asyik putih jew.
Takpe !  Hari ni aku nak kongsikan tutorial baru.
Pakaikan baju baru kat bloglist macam kat atas ni hehe.

Jom !

Dashboard > Design > Edit HTML > Tick Expand Widget Templates

1- Cari tajuk bloglist korang.  Contohnya macam aku " Terjah Sini " .  Tekan ctrl F untuk mudahkan pencarian.



2- Bila dah jumpa bloglist korang, cuba tengok kat bawah tu.  Ada tak code macam dibawah ni.

<div class='widget-content'>

3- Gantikan code diatas ni dengan code dibawah ni.

<div class='widget-content' style='overflow:auto; width:ancho; height:200px; background:#9fc5e8 ; background-repeat:repeat; padding: 5px; border:2px dashed #33aaff; border-top-left-radius: 0px 0px; border-top-right-radius: 0px 0px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;'>


4- #9fc5e8: warna background
     dashed : bentuk border. Pilih antara dashed , dotted , solid
    #33aaff : warna border

5- Dah siap ?  Preview dulu baru save =).

Selamat Mencuba !


dah baca??? Tinggalkanlah comment. Tengkayu =)

Tutorial 5 - Cara Bagi Gambar Bergerak Sendiri + Border

Wah.  Rajin pulak aku nak buat tutorial hehe.
Bukannya apa..
Tetibe je aku rasa best pulak buat tutorial ni. =)

Kali ni aku nak kongsikan macam mana nak bagi gambar kita gerak sendiri.
Tak payah nak gerak kan scroll lagi.
Automatik gambar tu akan gerak sendiri.

Ni contoh gambar yang ada scroll.
Tapi kali ni aku nak ajar yang gerak sendiri.

Macam di atas ni tanpa scroll dan bergerak sendiri.

Jom !

Dashboard > Design > Add a gadget > HTML / Java Script

1- Copy code dibawah ini.


<center>
<marquee style="background-color:#9fc5e8;border:2px dashed #33aaff; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; width: 240px; height: 370px;" direction="down" behavior="scroll" scrollamount="3"><center>

<img style="width: 212px; height: 354px;" src="URL IMEJ" />

<img style="width: 212px; height: 354px;" src="URL IMEJ" />

<img style="width: 212px; height: 354px;" src="URL IMEJ" />

<img style="width: 212px; height: 354px;" src="URL IMEJ" />

<img style="width: 212px; height: 354px;" src="URL IMEJ" />

<img style="width: 212px; height: 354px;" src="URL IMEJ" />
 
</center></marquee></center>
 
 
2- Pastekan di ruang HTML / Add gadget.
 
3-#9fc5e8 : colour background
   dashed : jenis border samada nak dashed , dotted , solide.
   #33aaff : code warna border.
   down  : arah untuk gambar bergerak.  Nak tukar pada left , right pun boleh.
   3 : tahap kelajuan.  Kalau nak kekal kan pun boleh.
   URL IMEJ : Pastekan Code gambar yang korang nak.

4- Kalau nak letak banyak gambar lagi.  Korang boleh tambah kan code dibawah ni lagi.  =)

<img style="width: 212px; height: 354px;" src="URL IMEJ" />
 
5- Preview.  Kalau dah jadi baru save ye.
Selamat mencuba !
 


dah baca??? Tinggalkanlah comment. Tengkayu =)

Monday, December 26

Tutorial - Letak Background dan Border di Follower

Eh rajin pulak aku buat tutorial malam-malam ni hehe. 
Jom !

Dashboard > Design > Edit HTML

1- Cari code dibawah ini.
]]></b:skin>

2- Copy code dibawah ini dan pastekan di ATAS code tadi.


#Followers1-wrapper {
background-image: url(URL BACKGROUND);repeat; repeat; padding: 5px; border:2px dashed #a64d79; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;}
.foot-block {
line-height: 14px; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; color: #5f5f5f !important;
width: 260px;height: 222px;padding: 17px;
-webkit-box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.1);}


3- URL BACKGROUND : Letak background yang korang nak untuk follower.
    dashed : Untuk border, samada nak tukar pada solid atau dotted pun boleh.  Nak kekalkan dashed pun boleh.
    #a64d79: Untuk warna border

4- Apa lagi ? Cepat-cepatlah save !  Tapi untuk keselamatan lebih baik preview dulu.

Selamat mencuba !


dah baca??? Tinggalkanlah comment. Tengkayu =)

Tutorial - Letak Background dan Border pada Blog Archive


Menjadi jugak eksperiment aku kat blog adik aku.
So aku nak kongsikan kat korang ye !

Jom !

Dashboard > Design > Edit HTML > Tick Expand Widget Templates

1- Cari kod seperti bawah ni (ctrl F untuk memudahkan pencarian )
<div id='ArchiveList'>
2- Copy code dibawah
<div style='overflow:auto; height:200px; background:url(URL BACKGROUND); background-repeat:repeat; padding: 5px; border:2px dashed #a64d79; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;'>
3- Dan pastekan diatas code yang berwarna kuning tadi seperti dibawah.

<div class='widget-content'><div style='overflow:auto; height:200px; background:url(URL BACKGROUND); background-repeat:repeat; padding: 5px; border:2px dashed #a64d79; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;'>  
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if><b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>

4- Code yang warna purple adalah code yang WAJIB korang tambah.

5- 200 : Ukuran panjang scroll box
     dashed : bentuk border.  Korang boleh tukar pada dotted atau solid.  Kalau nak kekalkan dashed pun boleh.
     #a64d79 : code untuk warna border
    URL BACKGROUND : Letak background yang korang nak untuk blog archive

6- Preview dulu baru save ye !  Insyallah menjadi =)


dah baca??? Tinggalkanlah comment. Tengkayu =)