Read More Button

Read More Button

Untuk tutorial cara nak install read more button pada blog, refer di siniye. Berikut beberapa read more button yang boleh anda pilih. Just copy url button yang disediakan:

http://img810.imageshack.us/img810/9164/readmorerainbow.png

http://img823.imageshack.us/img823/7318/readmorepinkblack.png

http://img88.imageshack.us/img88/4597/readmorepurpleblue.png

http://img28.imageshack.us/img28/5989/readmorepinkwhite.png

http://img97.imageshack.us/img97/5011/readmoreblue.png

http://img193.imageshack.us/img193/7492/readmoreblack.png

http://img220.imageshack.us/img220/1725/readmoregreen.png

http://img823.imageshack.us/img823/5470/readmorepink.png

http://img412.imageshack.us/img412/7315/27170680.png

http://img100.imageshack.us/img100/4641/55997688.png

http://img850.imageshack.us/img850/7259/93789459.png

http://img861.imageshack.us/img861/4052/43082527.png

http://img40.imageshack.us/img40/3784/43423111.png

Tukar Newer post, Home dan Older post kepada icon

Tukar Newer post, Home dan Older post kepada icon

Sebelum:

Selepas:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod 

expr:title='data:newerPageTitle'><data:newerPageTitle/>

 Bila dah jumpa, gantikan kod warna merah tu dengan kod di bawah (newer icon):

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

4) Kemudian, dengan dengan menggunakan ctrl + F lagi, cari pula kod 

expr:title='data:olderPageTitle'><data:olderPageTitle/>

 dan gantikan kod warna merah dengan kod di bawah (older icon):

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

5) Sekali lagi, dengan menggunakan ctrl + F, cari kod 

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

dan gantikan kod warna merah dengan kod di bawah (home icon):

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

Nota:
Pada url berwarna biru, korang masukkan url icon yang korang nak. Search icon tersebut dekat google or mana-mana image hosting. Ataupun just ambik icon yang disediakan di bawah:

(Untuk dapatkan url image, right click pada icon > copy image location )

Credit icon - azhafizah.com

6) Lastly, klik preview, dan jika tiada error, klik save template.

Selamat mencuba! :)

Link Berpelangi / Rainbow Link

Link Berpelangi / Rainbow Link

Apabila cursor mouse dilalukan pada mana-mana link dalam blog anda, link tersebut akan berubah kepada effect warna-warni seperti contoh preview di atas. Untuk mengetahui cara-caranya, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Add A Gadget > HTML / Javascript

3) Copy kod di bawah dan paste dalam ruangan HTML tadi

<script src="https://sites.google.com/site/tutorialcursorsparkle/rainbow.user.js" type="text/javascript">
/***********************************************
http://jombinabelog.blogspot.com/
***********************************************/
</script>

4) Save dan lihat hasilnya

Selamat mencuba! :)

Text Berkelip

Text Berkelip

Text berkelip

Text berkelip

Text berkelip

Preview di atas adalah contoh text bergerak.

Cara nak buat text berkelip:
1) Copy paste kod di bawah pada ruang HTML/Javascript atau nak post dalam entri pun boleh juga.

<div style="color: black; text-align: center;">
<blink> Text berkelip anda </blink></div>

Nota:
black - gantikan dengan warna text yang anda mahu
center - kedudukan text yang anda mahu, sama ada center, left atau right 
Text berkelip anda -  gantikan dengan perkataan yang anda mahu


2) Save / publish dan lihat hasilnya. Selamat mencuba! :)

Tambah ruang add a gadget atas header

Tambah ruang add a gadget atas header

Sebelum:

Selepas:

Sesetengah template ada yang mempunyai ruang add a gadget di atas header, dan ada juga sesetengahnya yang tiada. Untuk menambahkan ruang "Add A Gadget" pada bahagian atas header senang je, ikuti tutorial di bawah:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<b:section class='header'

4) Kemudian sebaris dengan kod <b:section class='header' tu, korang akan nampak kod yang macam ni kan :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

5) Ok, sekarang delete kod di atas, dan gantikan dengan kod di bawah:

<b:section class='header' id='header1' preferred='yes'>

6) Then klik preview dan jika tiada error klik save template.

Selamat mencuba! :)

Cara Buat Text Box

Cara Buat Text Box

Biasanya text box digunakan untuk mempamerkan kod html banner, kod html widget, text atau apa-apa sahaja yang anda ingin kongsi dengan pengunjung blog. 

Contohnya banner blog seperti yang ditunjukkan di bawah. Jika anda ingin bertukar banner dengan blogger lain, anda haruslah menyediakan kod html banner blog anda bagi memudahkan blogger lain mengambil kod banner tersebut untuk di pasang pada blog mereka. Untuk itu, penggunaan aplikasi text box adalah diperlukan.

 

Terdapat pelbagai jenis text box yang boleh anda pilih. Tiap-tiap jenis text box telah disediakan kod dalam kotak masing-masing, anda cuma perlu copy sahaja. Untuk "select all kod", hanya dengan sekali klik pada text box :

Untuk pasang text box ini pada blog, ikuti tutorial di bawah :

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript (atau boleh juga paste di ruang entri post)

3) Paste kod text box yang anda copy tadi pada ruang Html / Javascript

Contoh:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>

 4) Pada tulisan berwarna merah di atas, gantikan dengan kod html banner anda/ text /apa sahaja kod yang anda ingin pamerkan dalam text box tersebut.

Contoh kod banner anda:

<center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TeG2_2aCX_0qL7S4t4xWPkkqIttnch4vdNF-TuJIYAThU2Lkay4K0PJWMgwwe8nLZLUQvsoWiW3Ll_p7SxxrE20GKz8913nSlwh71_ZRYf9ikkoNA4dD33kjye5Gfga6cr3bWujfZss/s400/banner.png" /></a></center>

Rupa kod text box setelah dimasukkan kod banner akan jadi seperti ini:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()"><center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TeG2_2aCX_0qL7S4t4xWPkkqIttnch4vdNF-TuJIYAThU2Lkay4K0PJWMgwwe8nLZLUQvsoWiW3Ll_p7SxxrE20GKz8913nSlwh71_ZRYf9ikkoNA4dD33kjye5Gfga6cr3bWujfZss/s400/banner.png" /></a></center></textarea>

4) Save dan lihat hasilnya.

Nota:

- Untuk ubah saiz text box, anda cuma perlu ubah nilai height dan width dalam kod tersebut.

-Warna background text box juga boleh diubah, gantikan kod #ffffff dengan kod warna yang anda mahu, pilih kod warna di bawah:
( untuk paparan lebih besar, klik di sini)

Selamat mencuba! :)

Button Like Facebook Pada Sidebar Blog

Button Like Facebook Pada Sidebar Blog

Button like ini boleh diletakkan untuk anda mengetahui berapa banyak like yang anda dapat untuk blog anda atau apa sahaja topik yang ingin ajukan pada button like tersebut .

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://url-bloganda.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Nota : Gantikan perkataan yang dihighligtkan merah di atas dengan url blog anda. Letakkan topik yang ingin anda ajukan pada ruang title

4) Save dan lihat hasilnya.

Efek senget apabila cursor menyentuh link

Efek senget apabila cursor menyentuh link

Caranya:


1) Sign in akaun blogger


2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"


3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

a:hover {

4) Kemudian copy paste kod di bawah selepas kod a:hover { yang korang cari tadi:

transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

contoh:

 a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

5) Sekali lagi, dengan menggunakan ctrl + F, cari kod di bawah pula:

a:link {

6) Kemudian copy paste kod di bawah selepas kod a:link { tadi:

transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

Contoh:

 a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

7) Klik preview, jika tiada error, klik save dan lihat hasilnya.


Selamat mencuba! :)


 * efek ini hanya berkesan pada browser mozila firefox

Gambar Bergerak (Scrolling Image)

Gambar Bergerak (Scrolling Image)

Scrolling images adalah gambar bergerak yang ditentukan pergerakannya oleh kita sendiri. Scrolling image ini boleh diletakkan pada mana-mana bahagian dalam blog, sama ada header, footer, sidebar ataupun ruang post. Penggunaan aplikasi ini dapat menjimatkan ruang, terutama bagi mereka yang mempunyai senarai gambar dan banner yang panjang. 


Berikut adalah kod untuk scrolling image. Copy kod di bawah dan letak pada mana-mana bahagian blog yang anda mahu. Untuk cara pasang kod html dalam blog, rujuk tutorial ini :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">




<a href="link pautan gambar" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>


</marquee>

Nota:
up - arah pergerakan gambar. Boleh tukar kepada left, right, up atau down
2 - kelajuan pergerakan gambar 
link pautan gambar - url untuk dibuka apabila gambar diklik
url gambar - url gambar yang hendak dipamerkan. Rujuk di sini untuk cara dapatkan url gambar.



Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali bahagian kod <a href="link pautan gambar" target="_blank"><img src="url gambar" /></a> seperti contoh di bawah:


Contoh:

<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="150">




<a href="http://jombinabelog.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Klut4mCil1vkLz-2Y9q3dUsPugWweCeeomLnmXrr9vr7EgTEiKkpC-m0V_jIcLqzVrc743sJh3QCulEAQliy_mipIr_RmPx5JA2qDmS1UJ-E7lBPyFdDuGias75SY08UMB-MrJWepvM/s400/040.gif" /></a>




<a href="http://jombinabelog.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFro3a_xaJEdtkj1V3HP4YOEvvUhoHvLMMyX8OuvBRFe0NjvbYmGpbRYT5wCVtXDlt4_1PEHJkLew0kP66FJY2izu3zRIyE-A0Su-L6h6tXOxFvDoUp0OXk_dYAxw9IIrWnERVNeQ6MIo/s400/095.gif" /></a>

Selamat mencuba! :)

Efek senget apabila cursor menyentuh blockquote

Efek senget apabila cursor menyentuh blockquote

Preview:


Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara nak pasang kotak pada petikanblockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini. 


1) Sign in akaun blogger


2) Dashboard > Design > Edit HTML 


3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {

atau kod di bawah

blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

blockquote:hover {
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}

5) Klik preview, jika tiada error, klik save template.


Selamat mencuba! :)