Cara Tambahkan JavaScript Image Slider ke Blogger dengan Mudah

Disini Love Karawang Akan berbagi slider gambar JavaScript keren untuk blogger. Ini bisa dengan mudah digunakan sebagai konten unggulan di blog blogger. Slider gambar ini dibuat oleh menucool.com. Slider yang sangat keren adalah ini. 

 Ini memiliki efek geser yang cukup bagus, dan waktu muat lebih sedikit seperti yang diciptakan oleh Javascript, tidak ada jQuery atau flash yang digunakan. 

Dan satu hal lagi mudah dikustomisasi. Saya telah menyesuaikannya sedikit untuk suite sempurna untuk blog blogger. Lihat Demo atau download kode sumber dari link di bawah ini.

• DEMO

Mari Pasang Slider Gambar ke Blog Blogger Anda

1. Buka Dasbor Blogger> Tata Letak> Tambahkan Gadget
2. Pilih HTML / Javascript
3. Copy kode di bawah dan paste di atasnya.

<style type="text/css">
/* http://dimpost.com */

#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);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="slider">
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOhvzA432QtxPN5IjeP5xmhG8kTrsf5YIPPKmjMxQxioIXyUwpNObsrHT6E3woVk9Ykj-p4oSxvdBfvNcuScyXC0KVYeSF0YW47y4ET6iaLtWNzvNYd6Ilp8BdkUUXV6Jg_XuBLUrLlx9/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLxJdS8xrUO7Wn5fkbZOjeHU1HvltmG_KfmBHaou9_-pCr_nksCGACZijSPQLEgoXeq2lxTAS1y3USPHbMoXu531p-rKo56LYq3_ntjcMfENxGh7Y6XmrID98aBCKrsWfaLdBnSbewPln/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2aSj8mc54u-rmtXLk0xqYPwQ_0j5JavETZNQq55BEWx0e6h9LHzkxalxiehqs1ug7YpZybtqYwY5EYhxXmIdebic7V_cN-P0eAi7P6qYl-0zFWdSp_b5EVA6QVF-ITGI1PTb0SiAPLsK/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh8QJFfpcLoy-T5aAzTXm_BvCGyPJbpSykUkdYEZegwVCUM8487Qj9bGx0klk27i3aCAokHI_7KILBMJt1XpLIX0mrMCTrCF-Vbl4yMEFFqEWvsXXB2_Lzg4E-fwBZWaEl4ZAxrELeie1D/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFc72PmcePSG2J_-KdGyTIc_kGDvliajVcO8II7j_bHnG1RBL6FwU55aj_S8JXrVb6y_LIMJ7SM3ekiYAuD9p7wKrn6BdjnlrhvZUAMl98ztGozJVYCkbE3HN16nps_6UNmn85JQx-qUy/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
    </div>
    <div id="htmlcaption1" style="display: none;">
        Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
    </div>
    <div id="htmlcaption2" style="display: none;">
        <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
    </div>
</div>

4. Sekarang Kamu bisa mengubah Image URL dengan gambar Anda sendiri, slider link / permalink, gambar caption dll sebagai cara kamu.

Semoga Bermanfaat . Itulah Cara Tambahkan JavaScript Image Slider ke Blogger dengan Mudah