Flip Halaman Buku dengan CSS3 | Buku Catatan si Ugi

Dengan menerapkan prinsip flip halaman, CSS3 ini dapat menciptakan sebuah buku utuh, dengan halaman pertama yang dapat terbuka saat onmouse over diatasnya. kemudian untuk flip ke halaman berikutnya, anda dapat meng-klik salah satu halaman, begitu seterusnya, siklus sampai kembali lagi kehalaman pertama.

Demo:
Letakan cursor diatas Buku kemudian klik untuk membuka halaman lainnya...






The Tale of Peter Rabbit

by

Beatrix Potter



Once upon a time there were four little Rabbits, and their names were-- Flopsy, Mopsy, Cotton-tail, and Peter.

They lived with their Mother in a sand-bank, underneath the root of a very big fir-tree.

"Now, my dears," said old Mrs. Rabbit one morning, "you may go into the fields or down the lane, but don't go into Mr. McGregor's garden: your Father had an accident there; he was put in a pie by Mrs. McGregor."

"Now run along, and don't get into mischief. I am going out."

Then old Mrs. Rabbit took a basket and her umbrella, and went through the wood to the baker's.

She bought a loaf of brown bread and five currant buns.



"Now, my dears," said old Mrs. Rabbit one morning, "you may go into the fields or down the lane, but don't go into Mr. McGregor's garden: your Father had an accident there; he was put in a pie by Mrs. McGregor."

"Now run along, and don't get into mischief. I am going out."

Then old Mrs. Rabbit took a basket and her umbrella, and went through the wood to the baker's.

She bought a loaf of brown bread and five currant buns.

Flopsy, Mopsy, and Cotton-tail, who were good little bunnies, went down the lane to gather blackberries;

But Peter, who was very naughty, ran straight away to Mr. McGregor's garden, and squeezed under the gate!

First he ate some lettuces and some French beans; and then he ate some radishes;

And then, feeling rather sick, he went to look for some parsley.



Flopsy, Mopsy, and Cotton-tail, who were good little bunnies, went down the lane to gather blackberries;

But Peter, who was very naughty, ran straight away to Mr. McGregor's garden, and squeezed under the gate!

First he ate some lettuces and some French beans; and then he ate some radishes;

And then, feeling rather sick, he went to look for some parsley.

But round the end of a cucumber frame, whom should he meet but Mr. McGregor!

Mr. McGregor was on his hands and knees planting out young cabbages, but he jumped up and ran after Peter, waving a rake and calling out, "Stop thief."

Peter was most dreadfully frightened; he rushed all over the garden, for he had forgotten the way back to the gate.

He lost one of his shoes among the cabbages, and the other shoe amongst the potatoes.



But round the end of a cucumber frame, whom should he meet but Mr. McGregor!

Mr. McGregor was on his hands and knees planting out young cabbages, but he jumped up and ran after Peter, waving a rake and calling out, "Stop thief."

Peter was most dreadfully frightened; he rushed all over the garden, for he had forgotten the way back to the gate.

He lost one of his shoes among the cabbages, and the other shoe amongst the potatoes.

After losing them, he ran on four legs and went faster, so that I think he might have got away altogether if he had not unfortunately run into a gooseberry net, and got caught by the large buttons on his jacket.

It was a blue jacket with brass buttons, quite new.

Peter gave himself up for lost, and shed big tears; but his sobs were overheard by some friendly sparrows, who flew to him in great excitement, and implored him to exert himself.



After losing them, he ran on four legs and went faster, so that I think he might have got away altogether if he had not unfortunately run into a gooseberry net, and got caught by the large buttons on his jacket.

It was a blue jacket with brass buttons, quite new.

Peter gave himself up for lost, and shed big tears; but his sobs were overheard by some friendly sparrows, who flew to him in great excitement, and implored him to exert himself.

Mr. McGregor came up with a sieve, which he intended to pop upon the top of Peter; but Peter wriggled out just in time, leaving his jacket behind him.

And rushed into the toolshed, and jumped into a can. It would have been a beautiful thing to hide in, if it had not had so much water in it.

Mr. McGregor was quite sure that Peter was somewhere in the toolshed, perhaps hidden underneath a flower- pot. He began to turn them over carefully, looking under each.



Mr. McGregor came up with a sieve, which he intended to pop upon the top of Peter; but Peter wriggled out just in time, leaving his jacket behind him.

And rushed into the toolshed, and jumped into a can. It would have been a beautiful thing to hide in, if it had not had so much water in it.

Mr. McGregor was quite sure that Peter was somewhere in the toolshed, perhaps hidden underneath a flower- pot. He began to turn them over carefully, looking under each.

Presently Peter sneezed-- "Kertyschoo!" Mr. McGregor was after him in no time,

And tried to put his foot upon Peter, who jumped out of a window, upsetting three plants. The window was too small for Mr. McGregor, and he was tired of running after Peter. He went back to his work.

Peter sat down to rest; he was out of breath and trembling with fright, and he had not the least idea which way to go. Also he was very damp with sitting in that can.



Presently Peter sneezed-- "Kertyschoo!" Mr. McGregor was after him in no time,

And tried to put his foot upon Peter, who jumped out of a window, upsetting three plants. The window was too small for Mr. McGregor, and he was tired of running after Peter. He went back to his work.

Peter sat down to rest; he was out of breath and trembling with fright, and he had not the least idea which way to go. Also he was very damp with sitting in that can.

After a time he began to wander about, going lippity--lippity--not very fast, and looking all around.

He found a door in a wall; but it was locked, and there was no room for a fat little rabbit to squeeze underneath.

An old mouse was running in and out over the stone doorstep, carrying peas and beans to her family in the wood. Peter asked her the way to the gate, but she had such a large pea in her mouth that she could not answer. She only shook her head at him. Peter began to cry.



After a time he began to wander about, going lippity--lippity--not very fast, and looking all around.

He found a door in a wall; but it was locked, and there was no room for a fat little rabbit to squeeze underneath.

An old mouse was running in and out over the stone doorstep, carrying peas and beans to her family in the wood. Peter asked her the way to the gate, but she had such a large pea in her mouth that she could not answer. She only shook her head at him. Peter began to cry.

Then he tried to find his way straight across the garden, but he became more and more puzzled. Presently, he came to a pond where Mr. McGregor filled his water-cans. A white cat was staring at some goldfish; she sat very, very still, but now and then the tip of her tail twitched as if it were alive.

Peter thought it best to go away without speaking to her; he has heard about cats from his cousin, little Benjamin Bunny.

He went back towards the toolshed, but suddenly, quite close to him, he heard the noise of a hoe-- scr-r-ritch, scratch, scratch, scritch. Peter scuttered underneath the bushes. But presently, as nothing happened, he came out, and climbed upon a wheelbarrow, and peeped over.

The first thing he saw was Mr. McGregor hoeing onions. His back was turned towards Peter, and beyond him was the gate!



Then he tried to find his way straight across the garden, but he became more and more puzzled. Presently, he came to a pond where Mr. McGregor filled his water-cans. A white cat was staring at some goldfish; she sat very, very still, but now and then the tip of her tail twitched as if it were alive.

Peter thought it best to go away without speaking to her; he has heard about cats from his cousin, little Benjamin Bunny.

He went back towards the toolshed, but suddenly, quite close to him, he heard the noise of a hoe-- scr-r-ritch, scratch, scratch, scritch. Peter scuttered underneath the bushes. But presently, as nothing happened, he came out, and climbed upon a wheelbarrow, and peeped over.

The first thing he saw was Mr. McGregor hoeing onions. His back was turned towards Peter, and beyond him was the gate!

Peter got down very quietly off the wheelbarrow, and started running as fast as he could go, along a straight walk behind some black-currant bushes.

Mr. McGregor caught sight of him at the corner, but Peter did not care. He slipped underneath the gate, and was safe at last in the wood outside the garden.

Mr. McGregor hung up the little jacket and the shoes for a scare-crow to frighten the blackbirds.

Peter never stopped running or looked behind him till he got home to the big fir-tree.



Peter got down very quietly off the wheelbarrow, and started running as fast as he could go, along a straight walk behind some black-currant bushes.

Mr. McGregor caught sight of him at the corner, but Peter did not care. He slipped underneath the gate, and was safe at last in the wood outside the garden.

Mr. McGregor hung up the little jacket and the shoes for a scare-crow to frighten the blackbirds.

Peter never stopped running or looked behind him till he got home to the big fir-tree.

He was so tired that he flopped down upon the nice soft sand on the floor of the rabbit-hole, and shut his eyes. His mother was busy cooking; she wondered what he had done with his clothes. It was the second little jacket and pair of shoes that Peter had lost in a fortnight!

I am sorry to say that Peter was not very well during the evening.

His mother put him to bed, and made some camomile tea; and she gave a dose of it to Peter!

"One table-spoonful to be taken at bed-time."


But Flopsy, Mopsy, and Cotton-tail had bread and milk and blackberries for supper.



He was so tired that he flopped down upon the nice soft sand on the floor of the rabbit-hole, and shut his eyes. His mother was busy cooking; she wondered what he had done with his clothes. It was the second little jacket and pair of shoes that Peter had lost in a fortnight!

I am sorry to say that Peter was not very well during the evening.

His mother put him to bed, and made some camomile tea; and she gave a dose of it to Peter!

"One table-spoonful to be taken at bed-time."


But Flopsy, Mopsy, and Cotton-tail had bread and milk and blackberries for supper.

The Tale of Peter Rabbit

by

Beatrix Potter



Once upon a time there were four little Rabbits, and their names were-- Flopsy, Mopsy, Cotton-tail, and Peter.

They lived with their Mother in a sand-bank, underneath the root of a very big fir-tree.








More Detail:
Silahkan letakkan kode CSS ke dalam tag <head> template anda, dan kode HTML ke dalam tag <body> atau dimanapun anda ingin memasangnya pada halaman website anda.


Kode CSS:

<style type="text/css">
.outer {margin:0 auto; position:absolute; left:0; bottom:0; width:600px; height:400px;}
.inner {width:600px; height:400px; position:absolute; left:0; top:0; background:url(https://sites.google.com/site/archivesiugi/javascr/pages.gif);}

.p1 {width:0px; height:400px; position:absolute; left:600px; top:0px; overflow:hidden; border-right:1px solid #600; background:url(http://sites.google.com/site/archivesiugi/javascr/pagel.gif) right top;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.p1 div {width:300px; height:400px; position:absolute; left:0; top:0; background:url(http://sites.google.com/site/archivesiugi/javascr/edge.gif) repeat-y left top;}

.p2 {width:0px; height:400px; position:absolute; left:600px; top:0; overflow:hidden; background:url(https://sites.google.com/site/archivesiugi/javascr/pager.gif) right top;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.p2 div {width:300px; height:400px; position:absolute; left:-300px; top:0;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}

.click a:hover .outer .p1 {width:300px; left:0; top:0px;}
.click a:hover .outer .p2 {width:300px; left:300px; top:0;}
.click a:hover .outer .p2 div {left:0; top:0;}

.frame {position:relative; width:600px; height:400px; margin:0 auto; border:10px solid #600; overflow:hidden;}

.frame a {display:block; outline:0; position: absolute; left:0; top:0; width: 600px; height: 400px; color:#000; font-size:15px; text-decoration:none;}

.click a:active, .click a:focus {z-index: 20;}
.click a:active + a, .click a:focus + a {z-index: 30;}
.click a#a1 {z-index: 20;}
.click a#a11:active, .click a#a11:focus {z-index:10;}

.hover a:hover {z-index: 20;}
.hover a:hover + a {z-index: 30;}
.hover a#a1 {z-index: 20;}
.hover a#a11:hover {z-index:10;}

.frame img {margin:0 auto;}
.frame p {width:260px; height:360px; padding:20px; display:table-cell; font: 14px/25px georgia, serif; color:#600; text-align:justify; vertical-align:middle;}
.frame p.ctr {text-align:center;}
</style>


Kode HTML:

<div class="frame click">

<a id='a1' href='#x' tabindex="1">
<div class="outer">
<div class="inner">
<p class="ctr">
Buku Catatan si Ugi
by
Dahe Ugi

<img src="http://2.bp.blogspot.com/-dgN0buJavyc/Tqk-fYXhLKI/AAAAAAAAB6c/N8ritgP_zog/s200/Dahe%2BEbem1.jpg" alt="" />
</p>
<p>

Mukadimah

Buku Catatan si Ugi bukan merupakan sebuah website atau sebuah situs terkenal. Dan juga bukan merupakan sebuah website yang berlisensi dari sebuah Vendor raksasa yang menawarkan barang-barang mewah dan mahal..
</p>
</div>
<div class="p1">
<div>
<p>
"Boleh dikatakan buku catatan si ugi hanya sebuah notes atau
catatan kecil saja dari seseorang yang berusaha ingin tau dan ingin mengerti tentang hal-hal baru. Sebuah catatan yang di rangkum dan dikemas menjadi sebuah buku yang tanpa membutuhkan tetesan tinta untuk menulisnya. "Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."
</p>
</div>
</div>

<div class="p2">
<div>
<p>
Walau tanpa bekal ilmu yang cukup, si ugi memaksakan diri masuk dalam dunia baru yang belum dikenal sebelumnya, yaitu Dunia Maya ( Bukan Suku Maya/ sebuah peradaban bangsa-bangsa kuno di amerika tengah pasca kedatangan columbus ), dunia yang sarat dengan berbagai informasi, dari informasi yang benar-benar aktual dan terupdate sampai pada informasi yang hanya sekedar karangan atau piktif belaka alias palsu. Dan orang -orang menamakanya "Internet".
</p>
</div>
</div>
</div>
</a>

<a id='a2' href='#x' tabindex="2">
<div class="outer">
<div class="inner">
<p>
"Itulah dunia maya, dunia internet, dunia yang rentan terhadap ancaman dan bencana. Lalu bagaimana kita bisa melawan bencana jika kita tidak mengenalnya sama sekali. "Barangsiapa mengenal dirinya dan mengenal musuhnya, dia akan menang dengan mudah. Barangsiapa mengenal langit dan bumi, dia menang atas segalanya", begitulah Mushasi menggambarkan tentang sebuah pertarungan.."

</p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
</div>
</a>

<a id='a3' href='#x' tabindex="3">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
</div>
</a>

<a id='a4' href='#x' tabindex="4">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
</div>
</a>

<a id='a5' href='#x' tabindex="5">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
</div>
</a>

<a id='a6' href='#x' tabindex="6">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>

</div>
</div>
</div>
</a>

<a id='a7' href='#x' tabindex="7">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
<div class="p1">
<div>

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
</div>
</div>
</a>

<a id='a8' href='#x' tabindex="8">
<div class="outer">
<div class="inner">

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."--->
</p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
</div>
</a>

<a id='a9' href='#x' tabindex="9">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>

<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
</div>
</a>

<a id='a10' href='#x' tabindex="10">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
<div class="p1">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
</div>
</a>

<a id='a11' href='#x' tabindex="11">
<div class="outer">
<div class="inner">
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
<div class="p1">
<div>
<p class="ctr">
Buku Catatan si Ugi
by:
Dahe Ugi

<img src="http://2.bp.blogspot.com/-dgN0buJavyc/Tqk-fYXhLKI/AAAAAAAAB6c/N8ritgP_zog/s200/Dahe%2BEbem1.jpg" alt="" />
</p>
</div>
</div>
<div class="p2">
<div>
<p>
<!---"Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi..","Buku Catatan si Ugi" Elektronik booknya si Ugi tempat belajar dan berbagi.."---></p>
</div>
</div>
</div>
</a>
</div>
<!-- end of info -->

Keterangan:
Silahkan letakan Text atau isi buku yang akan digunakan seperti contoh diatas, pada text yang berwarna merah.


sumber: cssplay




0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan