27 Membuat Sebuah Simple Featured Content SlideShow Menggunakan JQuery

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

menu slider simple menggunakan JQuery untuk template blogger
View Demo

InsyaAllah postingan kali ini, kembali saya ingin mengetengahkan tutorial penerapan JQuery pada template blogger. Berbeda dari tutorial-tutorial sebelumnya dimana source saya peroleh dari web-web designer luar, maka tutorial kali ini lahir dari hasil pengamatan pada sebuah free blogger template yang dikenal dengan Elegant Dashboard, tidak jauh berbeda dengan lahirnya tutorial terdahulu dengan judul menu slider versi 2 yang juga saya pelajari dari free blogger template Zinmag Primus. Bagi yang belum pernah mencoba membuat menu slider versi 2 seperti screenshot berikut, silahkan klik disini, atau silahkan lihat dulu demo featured content slider post using JQuery/ menu slider versi 2 menggunakan JQuery disini
menu slider simple menggunakan JQuery untuk template blogger
Nah sekarang langsung pada tutorial, cara membuat simple content slideshow menggunakan JQuery
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat script JQuery maka langkah kedua abaikan saja.
3. Tambahkan juga script berikut setelah script JQuery tadi

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=845;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>
#contentSlide {
background : #ddd;
height : 228px;
padding : 10px 0;
}
#slideshow {
margin : 0 auto;
width : 945px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px; 
}
Catatan: masih memungkinkan bagi sobat untuk mengedit CSS diatas, seperti mengganti labar dan tinggi dari content, fariasi border, atau merubah warna background dan image. Untuk kode warna silahkan lihat disini.
5. Terakhir tambahkan kode HTML berikut diatas <div id='content-wrapper'>
<!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>Featured Content Slider Using JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html'><img alt='External links - Jquery' height='115' src='http://lh5.ggpht.com/_5yyQgf23Pco/S3riQNSaxAI/AAAAAAAABoA/jvKRL63kyT4/image8_thumb%5B1%5D.png?imgmax=800' width='215'/></a> Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much &#8220;out of the box&#8221;. Sure the design was heavily altered to fit the job, but the actual functionality wasn&#8217;t altered in any way. I recently had the calling to build a &#8220;featured content area&#8221;.</p>
<p>All you need to try it here you wont be sorry ! go try it GUMGUM :) <a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html' target='_blank'>visit my another explained post</a> about this tutorial</p>
</div>
<div class='slide'>
<h2>Thumbnail With Caption Using Simple JQuery</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html'><img alt='External links - Jquery' height='115' src='http://lh6.ggpht.com/_5yyQgf23Pco/S4DL4Ixx7PI/AAAAAAAABnE/WxeUCI3u-R0/image_thumb4.png?imgmax=800' width='215'/></a> This tutorial will show how to add heading and caption to your thumbnail and display it with jQuery cool transition effect. It&#39;s an elegant way to put content in your website, and only display it when users want to see it. It keeps your website clean!..</p>
<h3>How to Create a Thumbnail With Caption Using Simple JQuery? <a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html' target='_blank'>GO HERE AND READ HOW</a> :)</h3>
</div>
<div class='slide'>
<h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html'><img alt='External links - Jquery' height='115' src='http://lh5.ggpht.com/_5yyQgf23Pco/S4TjeqfCRoI/AAAAAAAABoo/MiBvj6RtTOU/image_thumb%5B9%5D.png?imgmax=800' width='215'/></a> This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window&#39;s right edge. If you want to create it in your blogger blog, here&#39;s what you should do ! (these instructions refer to the &quot;new&quot; Blogger layouts templates) <a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html' target='_blank'>GO GET IT GUMGUM:)</a></p>
</div>
<div class='slide'>
<h2>Super Sexy Bookmarks Widget for Blogger !</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html'><img alt='Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.' height='115' src='http://lh6.ggpht.com/_5yyQgf23Pco/S4TnyLxV1pI/AAAAAAAABo0/RtBCqSqtmdI/image_thumb%5B7%5D.png?imgmax=800' width='215'/></a> Looking for professional Social Bookmark Buttons for your blog ! me too :) however, while i was searching the net too, I came across a post by Naeemnur, that had instructions for Blogger (BlogSpot.com) based blogs which was really good.If you have a blog on blogger you can definitely give this a try. </p>
<p>Its very attractive social bookmarking widget ! it can help you to let your visitors bookmark your page effectively .</p>
<p>for instructions about the use of this SEXY Social bookmarking widget ! <a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html' target='_blank'>you can go here and get it GUMGUM:)</a></p>
</div>
</div>
</div></div>
<!-- Slideshow HTML -->
<div class='clear'/>
Catatan: Silahkan sobat edit Judul dari content, deskripsi dan link content.
>6. Simpan dan simpan lagi. Silahkan lihat hasilnya diblog sobat.
Selamat mencoba, semoga berhasil, semoga bermanfaat.
Salam.


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

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

27 komentar :

  1. matur nuwun & tararengkyu atas ilmunya kawan..

    oia saya mau tanya, kok tutor tentang Membuat Komentar Admin Berbeda Dgn Pengunjung Blog, di blog saya tidak berfungsi yah? padahal saya sudah semua petunjuknya,, apakah karena templatenya? atau yang lainnya? ada saran?

    btw thanks for sharing^^

    salam blogger:D

    BalasHapus
  2. Wah keren nih... Tx for Share!!

    BalasHapus
  3. makasih ni mas buat infonya, mo dicoba dulu..

    BalasHapus
  4. oh iya mas lupa blognya sudah saya follow klo berkenan follow balik y...

    BalasHapus
  5. makasih infonya inya allah saya akan terapkan,,numpang baca-baca,banyak konten bermanfaat di sini

    BalasHapus
  6. datang kembali untuk klarifikasi mba, mohon maaf klo saya salah mengucapkan mengucapkan saya benar2 tidak tau, mohon maaf sekali lg..

    BalasHapus
  7. Trims atas bagi2 ilmunya.....
    Mirip kayak apa ya judulnya yang gini juga???
    saya lupa namanya.....

    Makasih atas infonya.....

    BalasHapus
  8. langsung simpan ya sob, thanx atas sharenya

    BalasHapus
  9. ilmu yg bermanfaat nich, saya akan coba dan terima kasih ya

    BalasHapus
  10. yang ini bagus,tapi saya masih bingung..

    BalasHapus
  11. ijin disimpan Sob... saya lagi bikin template nih, pengen pake slider yang kayak beginian... terima kasih Sob...

    BalasHapus
  12. Wow.. keren... mampir lagi sis.. mumpung di warnet

    BalasHapus
  13. Tutorial yang sangat menarik, tapi gak bikin berat loading blog ya...?
    Makasih berbaginya

    BalasHapus
  14. blog q dah terlalu beat sob buat d tambahin scrip2 lagi
    Renungkan Wahai Sahabat Ku

    BalasHapus
  15. Ukhti ana mau ganti template aj lagi dhe.. kayaknya yg sekrang ribet byak bgd jadi ku susah...
    mau ganti aja yah ukhti bisa bantu kan??
    saya kash templtenya yg bentuknya Winrar...

    BalasHapus
  16. UKhti maksdKU di edit aja gitu bacroundnya N YG BUAT POSTINGAN AGAK BESAR GTU KLW BISA DI TENGAH...
    LALU SBGIAN DI BWAHNYA

    BalasHapus
  17. mampir lagi di sini....
    makin mantep aja nih tutorialnya, insyaAllah jika memungkinkan nanti di pake.....
    salam.

    BalasHapus
  18. thx for share information,,

    segera dipraktekkan

    BalasHapus
  19. keren tipsnya mbak
    mempengaruhi load blog g?
    cz blog saya sudah berat mbk

    BalasHapus
  20. Assalam Alaikum wr wb... kunjungan perdana.wah blog yang bagus nich............ tapi blum sempat baca smuanya.. saya ijin kopi yah buat baca dirumah.. nti besok2 tak kunjungi lagi... makasih yah..............

    BalasHapus
  21. nanti deh aku coba tipsnya.. ni lagi nyari teman.hehehe kalo bisa follow balik ya?

    BalasHapus
  22. Assalamu'alaikum,
    Ukhti...RSS-nya di sebelah mana ?, soalnya saya akan memindahkan Link Ukhti pada sidebar blogroll (bukan pada sidebar "Saya dan Teman") agar setiap kali blog ini diupdate akan dapat saya lihat.
    Terima kasih.

    BalasHapus
  23. Maksud saya di atas begini. Setaip kali saya simpan diblogroll RSS ukhti tidak aktif, kemudian saya simpan di website static saya tetapi masih tidak bisa. Kenapa?, Apa ada yang salah.
    Mohon percerahannya.
    Terima ksih.

    BalasHapus
  24. O yah, monggo mbak. Saya malah senang kalau mbak bersedia untuk men-sharing template bikinan mbak..., thanks

    BalasHapus
  25. Silahkan disharing templatenya mbak....^ ditunggu nggeh...

    BalasHapus
  26. kenapa mas, # Multi Level Drop-Down Menu Dengan CSS dan JQuery
    # Cara Membuat Menu Slider Versi 2 Menggunakan JQuery gak pernah berhasil yaaa....

    BalasHapus