Tutorial Cara Buat Box Pesanan Show/hide Di Blog

click to zoom

Hai all...Next tutorial pada hari ini koz akan ajar korang cara nak buat box pesanan.Kegunaannya adalah untuk memberi pesanan kepada para pengunjung sama ada dalam bentuk nasihat mahu pun pemberitahuan.Jadi kalau nak buat ikuti langkah-langkah di bawah:-

Langkah 1

Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.

Langkah 2

Copy dan paste code di bawah ,di atas code ]]></b:skin>

.author-box {
background: #FF99CC;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box a{
color:#666;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}


Kemudian save...

Langkah 3

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 4

copy dan paste code di bawah

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:5px solid #FDE8F8;
background:#F76FB4;
padding:10px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
</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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
<img src="http://img706.imageshack.us/img706/642/tutupb.png" title="DOuble Klick Tau!" alt="tutup" />
</a>
</div>
<center>


<div class='author-box'>
<img alt="avatar" class="avatar avatar-70 photo" height="70" src="http://img189.imageshack.us/img189/4873/firetoy48x48.png" width="70" /><b>Perhatian!</b><br />
Pesanan Korang<br />
</div>
</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


Pada code berwarna merah tetapkan warna yang korang suka.
Pada code berwarna biru Letak gambar avatar yang korang suka.
Pada code berwarna hijau Tulis pesanan yang korang suka.

Save dan lihat hasilnya...

Camat mencuba...

p/s: Petang-petang ni nak pergi layan  Epilog  Syurga Cinta Tv3 kat Blog Kak yanmie...^^,...
Ranking: 5

Comments:19

06 August, 2010 14:24

salam.u nie mmg teror dalam wat software eik?amik kos apa belajar?

06 August, 2010 14:29

wow!thanks tuto nih...

06 August, 2010 14:34

terernya...

06 August, 2010 14:34

liyanadiabu @ waalaikummusalam...

saya x pandai wat sofware...hiihi...

just suke design2 jek guna sofware^^,...

06 August, 2010 14:36

hentakbelipat @ welcome^^,..
-------------------------------------
Hazzy Ishak @ xde la seterer mana,just kongsi ilmu yang kita tahu jek^^,...

06 August, 2010 14:49

wow! best2 nak try nanti, thanks for this :D

06 August, 2010 15:01

thanks for sharing..

06 August, 2010 18:27

untuk tutorial ni..
mie blom try lagi, but.. nice ya~
TAHNIAH! & thanks sbb sudi berkongsi ilmu dgn blogger2 malaysia ni, terutama follower cm kitorang nih~

sharing is caring, ryte?
hehe~

06 August, 2010 21:57

nice tutorial need to try... :t:

19 August, 2010 20:22

SHERING IS KERING :l:

30 November, 2010 08:57

"hye,camne ek nak buat cam bdk nakal..slamat dtg,anda terakhir buat nakal..nak tau sgt..follow|"

* efa "jeng2~~"

Details
2010-11-30 6:04 AM
#

* aried "jert sni pagi3x..:)"

Details
2010-11-30 5:16 AM
#

* Mr nakal "nakal sedaya upaya berbalas jejak stlh 2 hari x bw:((:((:((:((:((tenet low"

Details
2010-11-30 3:55 AM
#

* pyqahSCHENTA "belogbejalan . oredy follow :)"

Details
2010-11-30 3:38 AM
#

* fi ":buttrock:singgah"

Details
2010-11-30 2:31 AM
#

* cikcahya "singgah sini ;)"

Details
2010-11-30 2:27 AM
#

* sembang "thanks rakan2 sudi singgah blog lawak aku nie..nie dtg saje je nk promote older post..hehehehe..lawak juga la bg aku.."

Details
2010-11-30 2:22 AM
#

* sha "Guna Produk Halal Muslim HPA Setiap Hari, Jana Income Lumayan Setiap Bulan :)"

Details
2010-11-30 1:27 AM
#

* liya "nakal singgah blog liya..liya lalu blog nakal..."

Details
2010-11-30 1:07 AM
#

* GP "Hai..sy bdk bru beljar.. :)"

Details
2010-11-30 12:27 AM
#

09 January, 2011 17:47

cam ner nak buat kecik ckit? besar sangat la,.

21 January, 2011 21:53

thank's....dh jadi pun!!! Nice....

30 January, 2011 11:12

ida dah try yang neyy tapi tak bole . sangat kecewa lorhh ):

Anonymous
06 April, 2013 15:38

I don't even know the way I finished up here, but I believed this publish used to be good. I don't understand who you might
be but ceгtainlу yοu аre going
to a well-known blogger if you hapρеn to aren't already. Cheers!

Feel free to visit my webpage - payday loans

Anonymous
18 May, 2013 22:36

Wοnderful blog! I founԁ іt ωhile browsing
on Yahoo Nеws. Do уou have any suggestіons on hoω to get listeԁ in Yahoo Nеωs?
I've been trying for a while but I never seem to get there! Appreciate it

My web blog :: make boobs bigger

Anonymous
19 May, 2013 01:29

Ηеllο aгe using Wordρreѕѕ for your site plаtform?
I'm new to the blog world but I'm tгyіng
to get ѕtartеd аnԁ ѕet up my own.

Do you need any codіng κnоwledge to make yοuг
own blog? Αny helρ woulԁ be gгеatly apprеciated!


Heгe is my web sіte simple woodworking projects

Anonymous
25 May, 2013 10:43

Hi! I've been reading your web site for some time now and finally got the bravery to go ahead and give you a shout out from Dallas Tx! Just wanted to say keep up the excellent job!

Here is my blog post :: 24 hour Locksmiths Solihull

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net