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://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;  
}

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://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

Related Post

Tips Blogger

• Scroll Tampil Dipostingan Jika Diperlukan
• Membuat background Pada Judul Sidebar
• Menambahkan Twitter Button di Blog
• Membuat Saving Energy Dengan Gambar Sendiri
• Fixed Guestbook Slide Effect With jQuery
• Naruto Emot Untuk Komentar
• Efek Animasi Dasar Pada Blog
• Cara Mudah Membuat Tool Tip Dengan CSS
• Cara Mudah Membuat Textarea
• Membuat Menu Iklan (jQuery Ads Popout)
• Cara Membuat Slideshow Gambar (with jQuery)
• Membuat Simple Menu
• Efek-efek Tulisan Menggunakan CSS3
• Membuat Menu Daftar Isi Jtoctree
• Image Zoom Effect With Jquery
• Shoutbox Light Effect
• Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
• Bertabur Cinta
• Light Hover Horizontal Menu With CSS For Blogger
• Cara Memindah-Mindahkankan Gambar Dengan jQuery
• Cara mudah memasukkan banyak Tab Widget pada sidebar
• Cara Pasang Efek Kupu - Kupu Berterbangan
• Merobah Domain Menjadi CO.TV
• Cara Memasang Efek Bintang Berjatuhan di Blog
• Make Border-Radius