Home » » Presentation Cycle with Progressbar

Presentation Cycle with Progressbar

Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. 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://lh4.googleusercontent.com/-76CcMCZqboU/TYoKjLXd0FI/AAAAAAAAAco/ARvq81o_REc/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://lh3.googleusercontent.com/-2XqYktktILg/TYoKmMaMXdI/AAAAAAAAAc4/sLV6rlVzuSw/s1600/slide_fade.png);
}

.pc_item .desc h1 {
    color: #DE8F26;  
}
  1. 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://lh3.googleusercontent.com/-dZ3M6a6GIeg/TYoKos4mROI/AAAAAAAAAc8/rebH0C1j7FU/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://lh6.googleusercontent.com/-Q412t5QSCeM/TYoKrPgnKfI/AAAAAAAAAdA/bROeQpc78q8/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://lh4.googleusercontent.com/-XLTUBPOG7p8/TYoKtSnAUxI/AAAAAAAAAdE/H5vRYCyS2TQ/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://lh5.googleusercontent.com/-QB-jVMT5l6Y/TYoKvnJcYJI/AAAAAAAAAdI/KjtsEAoLjM0/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://lh4.googleusercontent.com/-dS5pTcuut5M/TYoKydK8udI/AAAAAAAAAdM/Kbrtaw8KvB4/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://lh3.googleusercontent.com/-TBOPhGLCABs/TYoK1hpi4YI/AAAAAAAAAdQ/087i-Wb1Ru8/s1600/slide6.jpg" alt="slide6" />
            </div>
        </div> 


 Sumber : Kang Dadang
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .