13 Featured Posts Slider Using JQuery (Menu Slider Part 7)

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

image 

Tutorial kali ini merupakan tutorial membuat featured posts slider ke-7 yang terispirasi dari free blogger template Glory. Bagi yang ingin mencoba menggunakan featured post slider ini pada salah satu blognya atau sekedar untuk latihan desain template silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas ]]></b:skin>

/* featured fade */

#wrapper-featured{
    padding:10px 0 ;
    width:650px;
    height: 326px;
    margin:0 ;
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIf5_AoJI/AAAAAAAABTU/fV-Ca8f3_lI/s1600/bg_featured.jpg) no-repeat;
    position:relative;
    }
#wrapper-myslides {
    width:550px;
    height:210px;
    padding: 0 0 ; 
    margin:  3px 0 0 10px;
    position:relative;
    float:left;
    }
#myslides {
    width:550px;
    height:210px;
    padding: 0 0 50px; 
    margin:  0 18px ;
    overflow:hidden;
    }
.panel{
    width:550px;
    height:210px;
    }
#myslides img.crop-foto { 
    margin:8px 10px 10px 9px;
    border:1px solid #fff;
    display:block;
    position:absolute;
    right:3px;
    top:0;
    }
.featured-entry {
    text-align:left;
    line-height:1.5em;
    font-style:italic;
    font-size:12px;
    font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
    padding: 20px 10px 0;
     width:280px;
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    }       
h3.featured-title {
    font-size:22px;
    text-align:left;
    font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
    margin:10px 0 5px;
    padding:0 0 5px;
    font-weight:normal;
    line-height:1em;
    font-style:normal;
    }
h3.featured-title a:link, h3.featured-title a:visited{
    color:#fff;
    }       
h3.featured-title a:hover {
    color:#b1e1ff;
    }
#nav-slides  a#prev  {
    position:absolute;
    bottom:105px;
    left:135px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(http://4.bp.blogspot.com/_j82W7u9kZbs/S4PIgGqiI2I/AAAAAAAABTc/TVJVRxgolPg/s400/prev.jpg) no-repeat;
    }
#nav-slides  a#prev:hover{
    background: url(http://3.bp.blogspot.com/_j82W7u9kZbs/S4PIgrELHJI/AAAAAAAABTk/7fHHap-Uvks/s400/prev_hover.jpg) no-repeat;
    }
#nav-slides  a#next  {
    position:absolute;
    bottom:105px;
    left:160px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIg6l0qKI/AAAAAAAABTs/FA8fvPY0wlA/s400/next.jpg) no-repeat;
    }
#nav-slides  a#next:hover{
    background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIhJz7YvI/AAAAAAAABT0/B6PleC4jlUk/s400/next_hover.jpg) no-repeat;
    }   

Catatan: untuk yang terbiasa ngedit CSS, kode diatas masih memungkinkan untuk diedit dan modifikasi termasuk background image silahkan ganti dan sesuaikan dengan template blog sobat. Oke, selanjutnya...

3. 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 ketiga abaikan saja,

4. Tambahkan juga script berikut: (Script berikut bisa sobat upload lagi pada tempat hosting masing masing)

<!-- start slider script -->

<script src='http://btemplatescripts.googlecode.com/files/jquery.cycle.all.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#myslides&#39;).cycle({
fx: &#39;fade&#39;,
speed: 700,
timeout: 3000,
next:   &#39;#next&#39;,
prev:   &#39;#prev&#39;
});
});
</script>

<!-- end slider script -->

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

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->

<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->

<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title=POST TITLE>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->

</div><!--end myslides-->
</div><!--end wrapper-myslides-->

<div id='nav-slides'>
<a href='#' id='prev'/>
<a href='#' id='next'/>
</div>

</div><!-- wrapper featured-->

Catatan: Silahkan isi tulisan berwarna merah dengan titel postingan, deskripsi singkat postingan dan ganti url image atau thumbnails dari menu slider diatas

Selesai, jangan lupa save/ simpan template dan lihat hasilnya.


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

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

13 komentar :

  1. wah materi postingannya tentang J query.... keren sob

    BalasHapus
  2. jika memang di butuhkan silakan d ambil, napa musti izin gpp lagi sob

    BalasHapus
  3. @ Rizky2009: Alhamdulillah, makasih. InsyaAllah ana gunakan untuk tutorial berikutnya.

    BalasHapus
  4. aku dah coba Munculnya :

    Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "title".

    BalasHapus
  5. Bagaimana Solusinya mbak..?? trims jawabannya..

    BalasHapus
  6. @ Seputar Gresik: Jika ada pesan error seperti itu, coba pahami perintahnya dengan baik!

    Saya kira sobat lupa menutup tanda petik " pada title post atau title image?

    Perhatikan jg kode2 lain yg harus ditutup dgn tanda yang sama seperti url postingan.

    Silahkan coba lagi, semoga berhasil!

    BalasHapus
  7. Saya jadi pingin nyoba lagi nih Mbak..
    O ya, buat "Seputar Gresik" coba periksa lagi kode HTML nya mungkin ada yang ketinggalan tanda "/" (slash) sebelum tanda ">".

    Thanks.

    BalasHapus
  8. @ Yuda: Silahkan dan Terimakasih tambahanx

    BalasHapus
  9. halooo sooob slam kenal

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. Featured Post Content Slider 1

    mau nanya soal yg di atas..

    kok sudah aku terapkan semua tutorial dari mba'
    tapi ga jalan yah slidenya??

    butuh pencerahannya mohon sangat..

    (aku komentar disini, karena di link sana tidak bisa)

    BalasHapus
  12. Komentar di postingan featured post 1 memeng sudah saya tutup.

    BalasHapus
  13. @SEPUTAR GRESIK:
    Iya emang ada sedikit kslahan, cuman mgkin adminnya tdk teliti..hehehe...
    Setelah sy buat jg muncul error, tapi setelah dicari trnyata kslahannya cuman kurang tanda petik pada tag : POST TITLE
    Langkah ke=5
    Baris ke= 30

    Cuma dtambahin petik aj di POST TITLE ("POST TITLE") beres deh...

    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!