Cara Membuat Featured Auto Content Slider Menggunakan JQuery
Saturday, September 1, 2012
Edit
Cara Membuat Featured Auto Content Slider Menggunakan JQuery
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>
<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/AVvXsEjcDu4m94oWhlVYTuiMysQBSIK0bWvtQwRPBzqrxrgQU3LxBSMOr3zOAAtUbkYY7zIYjXGiYlAx3DO3ToNao666iVf5hzoVMGDBccUi-Kka1mvL-KLKidNKZc5M3W4QAlwc_2S6loEDD-d-/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;
}
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDu4m94oWhlVYTuiMysQBSIK0bWvtQwRPBzqrxrgQU3LxBSMOr3zOAAtUbkYY7zIYjXGiYlAx3DO3ToNao666iVf5hzoVMGDBccUi-Kka1mvL-KLKidNKZc5M3W4QAlwc_2S6loEDD-d-/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’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>
<!-- /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', 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 '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>
<!-- /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('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/AVvXsEgwdu32Jl54Ph3nG0fBH1E9P6Ha_Myyq3xTjETXYaeUiClgPENcp2fPzCLZMM_jqTbY5xM4-WtO1vvim4wNqxW6IfuA2ewK8E4-X2SMTxGRItYfUcIhAY4LMn26HJb2mA1Z3f-cgcQMRkJj/s1600/button_rss.png'/></a>
</div>
</div>
<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’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>
<!-- /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', 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 '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>
<!-- /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('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/AVvXsEgwdu32Jl54Ph3nG0fBH1E9P6Ha_Myyq3xTjETXYaeUiClgPENcp2fPzCLZMM_jqTbY5xM4-WtO1vvim4wNqxW6IfuA2ewK8E4-X2SMTxGRItYfUcIhAY4LMn26HJb2mA1Z3f-cgcQMRkJj/s1600/button_rss.png'/></a>
</div>
</div>
6. Selesai. Semoga bermanfaat
Source