Demonya Bisa dilihat disini

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/AVvXsEga76HuTe0Ca6BlpaQsjo2Nif7Q2XEm743078qVxVBHp_XJHrirnQFHzpovlOJl_NPOL0zK6zpDByN-Adf8ooTulR95IIJ8iSJN3TAxmLf8qwUTt1WKQ4ToQQ9ZWhf45_8XVx5zZvXaRYQ/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/AVvXsEgI1ytA68PJ7qrnRlmU9F7ZVOGOrxvWD1-Mex0HLDjzeFF1ZiCV3fD-_1t5mwPgD5QnQgXqwOJny-q3Rf0U8r7f4Ps5HHf_IrIY6lhXd1_2hP0zesa-SD8wmr_15I_3gegPvCYuqqwzrVU/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 atau pada blog demo saya, saya 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/AVvXsEjdUw7xjdahHhWmaBfUzeyhV4ei5u3jb9c4e-4l25bGJ752zIS4IaoThlple3AnBMWv2xTjFd_51z7gR-e-uskwjXvmThtjnxPtrQvOCHYBvjY-0MPSH8Wg3wIXr4ddy7kjiARWdHL7MIg/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/AVvXsEjo1KxwiwmQOiiPR0vNkgmAduJSvYJ3Rw0jbClPXky-Blu-xWYR5o0XbiqMASZn5EGeAYhl4seUT0Gk18PvblXIIDSvUOi-gdzD83b8a77n5GoC_vbYRdgFureXfnkPzLtRW-ZI2cCDBcM/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/AVvXsEhE7LZbfkMjQTfAi57Kf0yrRkYFv8Ls54zCCZRFULIcvF05J8_3ECpJ3h_JmNwH92rurvbijA613iokUhO-2V1KSwQfII_F8CYCXH191XmyWyG4I6_DYcQLpSE3r6I-p1_rf5mubY3LTIw/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/AVvXsEj5PeRcn-0mccbx02rjO7HxtcNvh9gYCntmI4a569H3q2KLQqXwe7rz-wEjWIvfCExWGN6MQI5lx7qQJJ9SieKe6n4lgvodwBJR4sBxKL9RvwBF7mQRbLCGK89mDGMERmZLPEafyOpI7Q0/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/AVvXsEiE1oya6BMALCiPOnxXOp8AxmDSwqQ_VomOouoZ_awsB9wbjS3_662ETeiAC-n3bTwTQaw7xj6HiZzidRu16E1rzX7H7_HELvxzk00j1ZlBxiIH4iSx6e3nD2BAoyY5MfYkP5c9uw10mjk/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/AVvXsEjhaYOKyPAN9mdtyHWQoOBnZWpdVG90Z5li2o-Dz0KAr8e_4ZCtgLdPbqp5mAIep1qDWvWBU85nM5h5ysEJDddapevJmIwS-wGlpviFemyxkYMBVYX4mAM7wzSkGUajijIig40V3BBvsgI/s1600/slide6.jpg" alt="slide6" />
            </div>
        </div>

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ZAS-XP.com di inbox anda: