- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* ---------------
sentation Cycle with Progressbar with jQuery
---------------------------------- */
.pc_container {
width: 600px;
height: 200px;
padding: 15px 1px 47px 1px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jg6JrSGVTQG4a7IOuwr38A0gLgYWBs2Gp5egSu6ud_Mz4Edzrzl1kWx_tfhfGPCY4Agbhv-Njheata1upLXVpnejoy2DBkUCY2rVtbkwMq923OHBJr8-71B7raB3E8mDk00Oxk8xKEM/s1600/pc_bg.png);
margin: 0px auto;
}
.pc_container .pc_item {
margin-top: 15px;
margin-left: 1px;
width: 600px;
height: 200px;
}
.pc_container .pc_bar_container {
position: absolute;
top: 230px;
color: white;
padding: 0px 10px 0px 10px;
width: 100%;
overflow:visible;
}
.pc_bar_container_underflow {
width: 90000px;
overflow: visible;
}
.pc_bar_container_overflow {
overflow: hidden;
position: absolute;
top: 230px;
color: white;
margin: 0px 10px 0px 10px;
padding: 0px;
}
.left, .center, .right {
background-position: left;
background-repeat: no-repeat;
overflow: hidden;
font-size: 1px;
float: left;
}
.bar {
background-position: left;
overflow: hidden;
font-size: 1px;
float: left;
}
.pc_item .desc {
position: absolute;
width: 250px;
padding: 10px;
height: 180px;
line-height: 1.8em;
right: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8fKyolkHBXoxjMlLqCqwoXwmFBnT0x2yDaKA5T3vbTy4ZRTUndixGevRFZRrzozWWOjtvk_t-f22rcHxtex1-Pj-RV8tOO0W5BkwlVRpH66G4y6dHGth8XHmgw3licG0GGkICaEQR_P8/s1600/slide_fade.png);
}
.pc_item .desc h1 {
color: #DE8F26;
}
- Selanjutnya simpan script berikut diatas kode </head>:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery.cycle.all.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/presentationCycle1.js'></script>
- dan simpan script berikut diatas kode </body> :
<script type="text/javascript">
presentationCycle.init();
</script>
- terakhir pemanggilannya pada Html letakkan di bawah tag <div id='head-nav'> :
<div id="presentation_container" class="pc_container">
<div class="pc_item">
<div class="desc">
<h1>Server Park</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLawq-gnLWIiohSR3N6Syj8501NjIjfj0pMjvXPNaULraJ0L6duSqatTFVbV3ZIBtY938tQ1_RdzajjSONsIt9xKwAg13UWB6ti5QatyjW5zj1xlJn216gRN8tu5Mg_QnfRvay4Hu7tE/s1600/slide1.jpg" alt="slide1" />
</div>
<div class="pc_item">
<div class="desc">
<h1>iPhone Apps</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6szBC0eVsIhyLzyo6qwKNNgWKBV8mT23rx7lKl-DEwccXcqjfyrxQpd7196gApHjs7I_jLIDr8JrLqI4_l8gHdQfwSYHA_JNaQ-qgB2bVUFFeUVO8nl-1Is01z835buHxykKatp4vgY/s1600/slide2.jpg" alt="slide2" />
</div>
<div class="pc_item">
<div class="desc" style="left: 0px;">
<h1>Wordpress Extensions</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81PzRb_0r9F67ci9s0_niWJX8KMMkL94Lb65WNcnlM8HLdAhaMbF0CJGltAAt9yOjb1nCW9RMTayyUDDq0n0_MZ7He053sb0GdyEYXoglGIevHdBz5wDo_PDsL-Jk7QSiTOjYnHz78a4/s1600/slide3.jpg" alt="slide3" />
</div>
<div class="pc_item">
<div class="desc" style="left: 165px;">
<h1>City Skyline</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjcxtoNr2tMgn2jLciMs80mxeHiedEegxzVS0gOWygLA-IOJI-Wy8IOvgdH9o7mjgQRd3enfc1qVC-Tk24-cF4YlO6coRYmgSXZpg8ddgYg_8aBgxWUXljY_Wmc-YrSZUZNAK2iZU4EM8/s1600/slide4.jpg" alt="slide4" />
</div>
<div class="pc_item">
<div class="desc">
<h1>Mario Finds Peach</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCCsituGPXFlOo14kEXSLfZK9YZPpDjQQOweqUMeM3ZdKzOS0OH0I3zFTmyskNY8wkebmG-tNwR7w_3voHNn6nk72EqBv53uxXtUkQSvA2WApz8FNl2-TwurIsDMvVcZVM71puuNT-ItM/s1600/slide5.jpg" alt="slide5" />
</div>
<div class="pc_item">
<div class="desc">
<h1>Said and Done</h1>
Consectetur adipiscing elit. Nunc quis tellus eros.
Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
ligula ut nunc.
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUt6l8M2_FirxZFQZUkDx6JDfuAOdOa0en3mmvf3vHOBIL_6JVhMg7qQhsAZ36dAyDepqo9_acKAOR-NGaruWWf6hi4otNB4xwJJvSYwSo7PgEXVY4k9VNCWYJF1lL6ALn_QQ6qR8VXI/s1600/slide6.jpg" alt="slide6" />
</div>
</div>
Sumber : Kang Dadang
