Bagi anda pengguna Blogger, slideshow bisa anda temukan di gadget, tetapi gimana caranya agar slideshow bisa anda terapkan di halaman?

Salah satu fungsi slideshow sebagai image gallery, tentu dengan animasi yang ringan membuat website maupun blog anda tampil cantik.  Silahkan anda lihat demo dibawah

OK, tanpa panjang lebar lagi, silahkan ikuti tutorial berikut ini

1. Anda bisa login ke user blogger
2. Masuk ke menu Template > Edit HTML

3. Masukkan kode css berikut tepat diatas tag ]]></b:skin> atau tag </style>

#sliderFrame {
    position: relative;
    width: 700px;
    margin: 0 auto 40px;
}

#slider {
    width: 700px;
    height: 306px;
    /* Make it the same size as your images */
    background: #fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    box-shadow: 0px 1px 5px #999999;
}

#slider img {
    position: absolute;
    border: none;
    display: none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
    z-index: 2;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0px;
    bottom: 15px;
    z-index: 3;
    overflow: hidden;
    font-size: 0;
}

div.mc-caption-bg {
    background-color: black;
}

div.mc-caption {
    font: bold 14px/20px Arial;
    color: #EEE;
    z-index: 4;
    padding: 10px 0;
    text-align: center;
}

div.mc-caption a {
    color: #FB0;
}

div.mc-caption a:hover {
    color: #DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
    top: 320px;
    left: 280px;
    /* Its position is relative to the #slider */
    width: 150px;
    background: none;
    padding-left: 20px;
    position: relative;
    z-index: 5;
    cursor: pointer;
}

/* each bullet */
div.navBulletsWrapper div {
    width: 11px;
    height: 11px;
    background: transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float: left;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 11px;
    /* distance between each bullet*/
    _position: relative;
    /*IE6 hack*/
}

div.navBulletsWrapper div.active {
    background-position: 0 -11px;
}

.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

/* --------- Others ------- */
#slider {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

4. Masukkan code dibawah tepat diatas tag </head>

<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>

5. Masuk ke menu Page / Halaman, anda bisa buat New Page. Sebagai contoh silahkan anda masukkan code dibawah pada menu HTML

<div id="sliderFrame">
<div id="slider">
<a href="https://1.bp.blogspot.com/-fsAGvhTbbFQ/V8mEgnSoLBI/AAAAAAAADeg/hdvx1DVtcc0tR22UA6vpneKWnWaq2W5WgCLcB/s1600/image-slider-1.jpg"><img alt="#Caption 01" height="280" src="https://1.bp.blogspot.com/-fsAGvhTbbFQ/V8mEgnSoLBI/AAAAAAAADeg/hdvx1DVtcc0tR22UA6vpneKWnWaq2W5WgCLcB/s640/image-slider-1.jpg" width="640" /></a>
        <a href="https://3.bp.blogspot.com/-8pPJlddSF_g/V8mEhFI0fII/AAAAAAAADek/QGzhO6HGuTYI7oF7OFUBn0QnrMmqKsbwwCLcB/s1600/image-slider-2.jpg"><img alt="#Caption 02" height="280" src="https://3.bp.blogspot.com/-8pPJlddSF_g/V8mEhFI0fII/AAAAAAAADek/QGzhO6HGuTYI7oF7OFUBn0QnrMmqKsbwwCLcB/s640/image-slider-2.jpg" width="640" /></a>
        <a href="https://3.bp.blogspot.com/-yUTlDwA93jA/V8mEhbKg8sI/AAAAAAAADeo/m6xeNG166lwLQC7oRD_tA1lsHgHrKUVegCLcB/s1600/image-slider-3.jpg"><img alt="#Caption 03" height="280" src="https://3.bp.blogspot.com/-yUTlDwA93jA/V8mEhbKg8sI/AAAAAAAADeo/m6xeNG166lwLQC7oRD_tA1lsHgHrKUVegCLcB/s640/image-slider-3.jpg" width="640" /></a>
        <a href="https://4.bp.blogspot.com/-JTBdv7ult90/V8mEhmMpRtI/AAAAAAAADes/9CiDS-cK5PE5CYxYC2bI-67Ss6mTiaysgCLcB/s1600/image-slider-4.jpg"><img alt="##Caption 04" height="280" src="https://4.bp.blogspot.com/-JTBdv7ult90/V8mEhmMpRtI/AAAAAAAADes/9CiDS-cK5PE5CYxYC2bI-67Ss6mTiaysgCLcB/s640/image-slider-4.jpg" width="640" /></a>
        <a href="https://1.bp.blogspot.com/-csya00C1IWc/V8mEh84FraI/AAAAAAAADew/G55AxKr3j3k6yAHF45zM_yDImgLp8V9iQCLcB/s1600/image-slider-5.jpg"><img alt="#Caption 05" height="280" src="https://1.bp.blogspot.com/-csya00C1IWc/V8mEh84FraI/AAAAAAAADew/G55AxKr3j3k6yAHF45zM_yDImgLp8V9iQCLcB/s640/image-slider-5.jpg" width="640" /></a>
</div>
</div>

Note: untuk  tag <a href=”#”> maupun tag <img src=”#”/></a> agar disesuaikan dengan link anda

Tutorial Cara Membuat Image Gallery menggunakan Javasript untuk Blogger silahkah anda melihat hasil nya

Selamat mencoba

• Next Post
• Prev Post