30 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: &#39;board_carusel&#39;, //id of carousel DIV
    beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
    panelclass: &#39;board_item&#39;, //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: [&#39;http://i34.tinypic.com/317e0s5.gif&#39;, -5, 80], rightnav: [&#39;http://i38.tinypic.com/33o7di8.gif&#39;, -20, 80]},
    statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: [&#39;inline&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</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(http://2.bp.blogspot.com/_jA-SP6SAtfY/SrnOlyLzIMI/AAAAAAAABrc/I_CuXi2Jnaw/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'>
            <!-- 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>
            <!-- /board_item -->
        </div><div class='board_item'>
            <!-- 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&#8217;ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir&#8217;aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            <!-- /board_item -->
        </div><div class='board_item'>           
            <!-- 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&#39;, 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>
            <!-- /board_item -->
        </div><div class='board_item'>
            <!-- board_item -->
            <p><img alt='Ummu Fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu &#39;anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu &#39;anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu &#39;anhu, &quot;Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            <!-- /board_item -->
        </div><div class='board_item'>
            <!-- 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>
            <!-- /board_item -->
        </div>                    </div>
                </div>
            </div>
            <ul id='board_carusel_nav'>
                            <li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 1)'>1</a></li>
                            <li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 2)'>2</a></li>
                            <li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 3)'>3</a></li>
                            <li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 4)'>4</a></li>
                            <li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo(&apos;board_carusel&apos;, 5)'>5</a></li>                           
                        </ul>
        </div>
    </div>
    <div id='header_rss'>
        <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Rss'><img alt='Rss' src='http://2.bp.blogspot.com/_jA-SP6SAtfY/SrnYXJoGNyI/AAAAAAAABuU/rh4w2hnRJmI/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!!!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

30 komentar :

  1. Saya bukan ahli Jquery, yang saya bisa hanya copy paste tetapi sedikit bisa mengedit code CSS.
    O ya Ukhti, maksimal Fiture Post dan gambar yang bisa tampil berapa?, terus kalau mengatur waktu tampil agar lebih lama gimana?

    Terima kasih sebelumnya.

    BalasHapus
  2. @ Yuda: JQuery mmg script yg udah tersedia dari pubhliser.

    Maksimal featured post terserah sobat mau menampilkan berapa postingan, untuk menambahnya edit pada bagian kode HTML (ikuti contoh yg telah ada) sedangkan untuk mengatur waktu tampilan, edit pada bagian script diatas (autostep...pause 5000 anda ganti sesuai selera deh).

    @ Secangkir: Tidak jg kok.

    BalasHapus
  3. wah lama nggak mampir sini.. makin mantab aja trrik triknya...

    BalasHapus
  4. iissshhhh si jQuery ada dicinih jugah..huhhohohhihihaiahiehiheieh

    BalasHapus
  5. berkunjung kawand :) happy wekeend, dan sukss sll bwt Anda :)

    waahh keren sobat tutorialnya...

    BalasHapus
  6. so usefull... tx friend....

    BalasHapus
  7. keren sih tp blog q dah cukup berat'o sob

    BalasHapus
  8. wah... tutorial yang sangat bermanfaat banget nih.... Thanks sudah sharing..... tapi klo di tambah tutoril ini di blog saya... bisa bisa loading blog saya setengah jam......... hihihihi

    BalasHapus
  9. @ Robby: silahkan lihat demonya dulu, loadingnya aja g' nyampe 1/2 menit, malah lbh kurang lagi. silahkan cek dgn tool pengecek kecepatan blog/web.

    Kecuali... blog teman dah banyak widget dgn JS lainnya dan koneksi memang lambat.

    Bagi yg ingin memasang widget ini tapi tdk ingin trlalu mempengaruhi load page bisa meletakkan widget ini hanya pada halaman depan blog (home/beranda) saja.

    BalasHapus
  10. Makasih banyak Ukhti, Kalau saya sudah mencobabanya Insya Allah akan saya beri tahu Ukhti blognya, biar ngalahin Guru...(he..he..).
    Buat "Secangkir Teh dan Sekerat Roti" program ini cukup panjang tetapi setelah saya coba tidak memberatkan seperti flash slideshow lain.

    BalasHapus
  11. WAH BAGUS HEHHEHE

    aku suka yg ini kayaknya gak ribet hehhehee

    BalasHapus
  12. Hebat sob....... Bikin berat ga loading dengan HTML yang terlalu buanyak???

    BalasHapus
  13. bagus sih cuman keliatannya loadingnya bakal lambat ya....???

    tapi thanks infonya bermanfaat.. ^_^

    BalasHapus
  14. keren sobat..
    memang dirasa perlu untuk menarik visitor juga kira2...
    salam persahabatan sobat

    BalasHapus
  15. kayaknya perlu beberapa tambahan lagi sob biar g terlalu berat dan bisa jadi maksimal...

    yang paling kerasa adalah link yang digunakan, belum bisa berjalan dengan baik tuh...!!!

    maaf y bukan bermaksud menggurui...!!!

    BalasHapus
  16. @ Kian: Menggurui? Tak apa kok, sy menerima saran dan kritik membangun. Hanya sj saran kritik anda kurang jelas.

    Apa yg harus ditambahkan? Yg mana yg broken link? Jika yg anda maksud link pada menu slider, mmg sy tdk mengisinya karena hanya contoh. Yang ingin membuat silahkan masukkan link sendiri menuju postingan pada menu slider yg ditampilkan.

    BalasHapus
  17. Terima Kasih ya infomasinya......... ^^

    Salam kenal...

    BalasHapus
  18. wah bagus nih mbak
    tapi kenya gak ada tempat disaya

    BalasHapus
  19. Wah, tp itu cukup memberatkan blog ya?

    BalasHapus
  20. Sudah selesai nih, semua tip Jquary dary Ukhti sudah saya praktekan dan saya edit banyak-banyak biar rada-rada beda.

    Ukhti bisa melihatnya di "http://bambu-eul-eul.blogspot.com" lumayan buat contoh life demo lain (lol). Gimana cukup bagus kan...?
    Thanks tipnya.

    BalasHapus
  21. @Kian Coi : Saya sudah praktekan semua dan langsung berhasil walupun gambar-gambar dan tulisan seperti pada DEMO nya tetapi yang jelas tidak ada brokenlink, bahkan saya dengan mudah mengeditnya. Mas Kian Coi boleh melihat hasilnya di sini

    BalasHapus
  22. mangstab sob. ijin bookmark, soalnya cari2 template biar pas ama slidernya

    BalasHapus
  23. Ukhti, kalau diizinkan, kapan-2 saya akan buat posting seperti ini pada blog saya tetapi tentu saja dengan referensi halaman/ artikel ini karena saya bukan ahli jquary sehingga kalau ada yang nanya-2, akan saya persilahkan untuk berkunjung ke blog ini. Maksud saya adalah sekedar ingin berbagi dengan bahasa saya sendiri.
    Terus terang, saya banyak terinspirasi dari tutorial-2 yang Ukhti tulis pada blog "Indahnya Berbagi"

    Terima kasih sebelumnya.

    BalasHapus
  24. @ Yuda: iya silahkan. terimakasih apresiasinya

    BalasHapus
  25. Saya masih belum berhasil mengikuti tutorialnya,padahal sudah sesuai petunjuknya tapi tetap saja jquery tersebut tidak berjalan di blog saya. Mohon bantuanya...

    BalasHapus
  26. @ Supardi: Maaf saya kira anda perlu lebih teliti lagi mengikuti step by step tutorial diatas! Karena selain sy ada juga komentator postingan ini yg telah berhasil menerapkan tutorial diatas bahkan disertai live demo.

    Selamat mencoba kembali, smg berhasil. Terimakasih kunjungan dan apresiasinya.

    BalasHapus
  27. mantaaaaap bos tutorialnya .....mau coba ah

    BalasHapus
  28. blogg ini tutorialnya keran keren.....
    waaaauu
    maantap nihh

    BalasHapus
  29. maaf gan sdikit telat belajar
    mau tanya nih...apa featured postnya bisa menampilkan post terbaru secara otomatis??

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!