CANIAGO-ELECTRONICS: How To Add Featured Auto Posts Slider Using JQuery To Blogger

menu slider/ featured auto posts slider

Sebagaimana janji saya sebelumnya untuk segera berbagi setiap ilmu penerapan JQuery untuk template blogger yang baru saya dapatkan, maka postingan ini masih akan mengetengahkan tutorial JQuery dengan tema yang serupa dengan tutorial sebelumnya pula, yaitu modifikasi featured posts atau content slider (menu slider). Agar teman-teman juga memiliki banyak pilihan, bahkan bagi teman yang sudah bisa mengedit CSS bisa juga memodifikasi kembali tampilan featured post ini sesuai kreatifitas masing-masing.

Berikut tutorial membuat featured posts slider part 6 (karena sebelumnya sudah ada 5 tutorial membuat featured posts/ content slider yang pernah saya posting)

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah kedua abaikan saja,

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/stepcarousel.js'/>
<script type='text/javascript'>
stepcarousel.setup({
    galleryid: 'board_carusel', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'board_item', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:5000},
    panelbehavior: {speed:500, wraparound:false, persist:false},
    defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/*board*/
#board{
    width:977px;
    height:276px;
    overflow:hidden;
    margin:0 0 0 0px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbFWqk_XjWTmbLLLRRG0CXxSHG8IgdndGhMAZdaEufA2HgP0X_1i62oFMBHoTGGnaNY6ebYD8HyOXjSJNeYN8eJntTBPOlilzgHawEsC822DfIpPHetx6SDmQOF1hQQWfVWdOHACbJduI/s1600/bgr_board.png) no-repeat;
}
#board_left{
    float:left;
    padding:22px 0 0 27px;
}

#header_rss{
    float:right;
    padding:78px 80px 0 0;
}
#board_items{
    width:679px;
    padding:5px 0 0 0;
}
#board_body{
    width:647px;
    margin:0 0 0 15px;
}
#board_carusel{
    width:647px;
    height:131px;
    position:relative;
}
#board_carusel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}
.board_item{
    width:647px;
    height:173px;
    overflow:hidden;
}
#board_body h2{
    color:#000;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:23px;
    font-weight:normal;
    margin:0 0 28px 0;
}
#board_body strong{
    font-size:12px;
    color:#000;
    line-height:18px;
    display:block;
}
#board_body p{
    font-size:12px;
    color:#000;
    line-height:18px;
    padding:0 0 10px 0;
}
#board_body p img{
    float:left;
    border:1px solid #83b2c4;
    margin:0 10px 0 0;
    width:161px;
    height:107px;
}
#board_body p a{
    color:#000;
}
#board_body p.more a{
    text-decoration:underline;
}
#board_body p.more a:hover{
    text-decoration:none;
}
#board_carusel_nav{
    width:100%;
    overflow:hidden;
}
#board_carusel_nav li{
    font-size:12px;
    font-family:Verdana, Geneva, sans-serif;
    float:left;
}
#board_carusel_nav a{
    display:block;
    float:left;
    background:#7ac2df;
    border-right:1px solid #85d7f7;
    width:33px;
    text-align:center;
    padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
    text-decoration:underline;
    font-weight:bold;
    background:#a7e2f9;
    border-right:1px solid #a7e2f9;
}

5. Tambahkan kode HTML berikut diatas <div id='content-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id='board'>
    <div id='board_left'>
        <div id='board_items'>
            <div id='board_body'>
                <h2>Featured Posts</h2>
                <div id='board_carusel'>
                    <div class='belt'>
                    <div class='board_item'>
            
            <p><img alt='Shafiyyah Binti Abdul Muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Asiyah, Wanita yang Ditampakkan Surga Untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta’ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir’aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Fathimah binti Al-Yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra', nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Ummu Fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu 'anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu 'anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu 'anhu, "Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Ummu Haram Binti Malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div>                    </div>
                </div>
            </div>
            <ul id='board_carusel_nav'>
                            <li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo('board_carusel', 1)'>1</a></li>
                            <li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo('board_carusel', 2)'>2</a></li>
                            <li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo('board_carusel', 3)'>3</a></li>
                            <li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo('board_carusel', 4)'>4</a></li>
                            <li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo('board_carusel', 5)'>5</a></li>
                        </ul>
        </div>
    </div>
    <div id='header_rss'>
        <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Rss'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2Wm5vzdbiY6xks4R_7RK_Mh53lVXhuq5aXPITSLZxGxdp7TroAXvPqxQSK8eMr44S_MzBaXNQTYpq22QULiERolQD7rFqIxOXO1CsJt9uBfk4OHNBZYTQURr_y_kk62hpTIhDxE11KAS/s1600/button_rss.png'/></a>
    </div>
</div>

6. Selesai. Semoga bermanfaat

Lihat live demo disini ((template yang memberi inspirasi tutorial ini) atau disini (hasil uji coba saya pada template default minima-karena semua tutorial diblog ini tdk saya posting kecuali setelah saya sendiri berhasil mempraktekkannya). Oke, selamat mencoba!!!