Responsive and Automated Slider for Blogger In Sidebar

Responsive and Automated Slider for Blogger In Sidebar

Halo teman-teman. Hari ini saya akan berbagi widget yang banyak pembaca telah meminta untuk menambahkan. Widget ini terinspirasi oleh Pop... 05.46

Halo teman-teman. Hari ini saya akan berbagi widget yang banyak pembaca telah meminta untuk menambahkan. Widget ini terinspirasi oleh Popular Post Pada BLog Kita, Tapi dengan Modifikasi Saya Mungkin Lebih menarik Dan Ini Responsive Loh..

Slider ini memiliki tata letak yang responsif dan sangat menarik. Juga sepenuhnya otomatis Anda hanya perlu menambahkan URL blog Anda , judul dan link akan diperbarui sendiri. Slider ini menjelajah dan daftar posting terbaru dari blog anda sendiri. Widget ini terlihat seperti yang terlihat pada engadget.com. Slider ini sangat menarik dan eye-catching juga.

Sebuah demo kerja live widget ini bisa dilihat di bawah ini.

Featured Posts

Untuk menambahkan widget ini di blog Anda terlebih dahulu pergi ke Blog
Judul
→ Tata Letak
→ Tambah Widget
→ HTML / JavaScript.

Tambahkan kode di bawah ini diberikan.

<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://dl.dropboxusercontent.com/s/wzlpwkhvlqu3gt7/PAMBAHCorps%20SideBar%20Slider.js?dl=1&token_hash=AAGgVHyAvMaUR9r1PgWYbiGpTgnOwIIQuxnbS8FBq0ju2A" type="text/javascript"></script>
    <script type='text/javascript'>
        //<![CDATA[
        FeaturedPostSide({
            blogURL: "http://palmahutabarat.blogspot.com/",
            MaxPost: 8,
            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">
        /*
Made by PAMBAH.Corps with lot of hardwork please keep the comment intact*/
      
        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%;
        }
      
        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;
        }
      
        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 {
            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>

Silahkan Ganti URL BOLD diatas dengan URL blog Anda sendiri. Ada pilihan lain juga untuk pengguna advance.
Setelah mengedit kode, simpan widget dan akhirnya menyimpan template.
Anda selesai sekarang. Sekarang Anda dan pengunjung Anda dapat melihat slider ini mengagumkan di blog Anda.