Cara Memasang Slider Responsif dan Otomatis dengan Navigasi dan Gambar Keren pada Blog

Halo sobat blogger. Hari ini saya akan berbagi source code widget. Widget yang akan saya bagikan adalah slider. Slider ini memiliki tata letak yang responsif dan cukup menarik dalam hal design. Widget Slider ini sepenuhnya bekerja dengan otomatis.

Anda hanya perlu menambahkan URL blog Anda sekali saja lalu gambar, judul, dan link sobat blogger pun akan terperbarui otomatis. Slider ini akan menjelajahi semua daftar posting terbaru dari blog Anda.

Slider ini cukup menarik bagi saya dan ini menurut saya dapat menarik perhatian para pembaca blog Anda. Well... We can't wait all day Right? haha :D
Check This Out!!

Untuk widget slider tersebut anda bisa melihat contohnya seperti gambar di bawah ini.

Bagaimana menurut Anda? Anda Tertarik? jika Anda tertarik.. Anda dapat menambah widget ini ke blog Anda dengan mengikuti langkah-langkah seperti di bawah ini.

Cara Memasang Slider Responsif dan Otomatis dengan Navigasi dan Gambar Keren pada Blog

Untuk menambahkan widget ini di blog Anda.. pergilah terlebih dahulu ke Menu Blogger → Tata Letak → Tambahkan Gadget → Pilih HTML/JavaScript. Lalu tambahkan kode di bawah ini.

<center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0Bxhv_U8hhBpXM1EwSVMxVWZyZDg/juntak_fitur_slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://juntak01.blogspot.com/",
MaxPost:8,
/*Slider http://juntak01.blogspot.com/*/ idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*Slider http://juntak01.blogspot.com/*/ ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
/*Slider http://juntak01.blogspot.com/*/ ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
/*Slider http://juntak01.blogspot.com/*/ ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border: 4px solid #2E8DCE;
    border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
    color: white;
    font-family: Oswald;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
/*Slider http://juntak01.blogspot.com/*/     background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    background: #8FB93D;
    font-family: Oswald;
    padding: 4px;
}
</style>
</center>

Setelah menambahkan kode..

ubahlah URL berwarna Ungu dengan URL blog Anda sendiri
warna Merah untuk maksimal post yang akan dirandom
warna Hijau untuk jeda waktu post akan berganti dan
warna Orange untuk mematikan sistem berganti otomatis

Setelah Anda selesai mengedit kode tersebut, simpan widgetnya dan akhirnya.. Tadaa!! Anda telah berhasil menambahkannya :)

Sekarang Anda dan pengunjung Anda dapat melihat slider mengagumkan ini di blog Anda.

INTERNET

Cara Memasang Slider Responsif dan Otomatis dengan Navigasi dan Gambar Keren pada Blog