Melihat widget ini memang sudah tak asing lagi dengan. Tampilan content dengan bergeser kekanan (right slider) dan kekiri (left slider). Tampilan blog akan lebih elegan dan pengunjung lebih terterik untuk dapat membaca artikel pada konten yang ditampilkan.
letakkan kode warna biru ini sebelum ]]></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;
}
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;
}
Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<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>
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>
tambahkan kode berikut pada elemen laman
<!-- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDyRDRuORJ_1L2F7j_GNVPW4wdGNMjMN7bWyQsnxaHFMotg2ryzeJIh8JKswybchl8QBY6bzoNdfbOAgEzCOoqf2jLdFjcB_gDhnP4pvm-caXnp98hy5awA8Y4p3ZLXQ2v4fg2pE_uNep/?imgmax=800' width='215'/></a> Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”.</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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZfHdbnSQkTYCcMD7fIwSsSX0-4fN6doFEZSqQ0QF6Opb_4_h59zuMvKNo_6OOzckO4FKAz_p8Qb2kyzKYIJPMnR6cKLhmwFR-EVcHqe730kl7UjIWshErtbKEjzDT7X0tSOm4B6uIsY/?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'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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrFiQdYAfz8-pLzFZTjqH-kByQvwgLx8-Wm8hxo8oLsDFHzevbQzFAzhqAqExGPfPBNrVjIRsXXdb2yxIqAfnDfvoFFuLvj2yxpfaUPLtZMP04Gf3A670aGYSplJvnARq2JqzWzHJ4-0/?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's right edge. If you want to create it in your blogger blog, here's what you should do ! (these instructions refer to the "new" 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmy6BXQjbEG6usdtelmlgwOf1BdLjUfKrZgu4NZYHX8NEviUVQJji-okxQEXf-mp8XwERh73rMbz7FwHLbW4kwDE7xVE1pfUaa07te0gA5oVyMGC4U-su5U9cSBKinTlIQYVO7CH_Ol70/?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'/>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDyRDRuORJ_1L2F7j_GNVPW4wdGNMjMN7bWyQsnxaHFMotg2ryzeJIh8JKswybchl8QBY6bzoNdfbOAgEzCOoqf2jLdFjcB_gDhnP4pvm-caXnp98hy5awA8Y4p3ZLXQ2v4fg2pE_uNep/?imgmax=800' width='215'/></a> Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”.</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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZfHdbnSQkTYCcMD7fIwSsSX0-4fN6doFEZSqQ0QF6Opb_4_h59zuMvKNo_6OOzckO4FKAz_p8Qb2kyzKYIJPMnR6cKLhmwFR-EVcHqe730kl7UjIWshErtbKEjzDT7X0tSOm4B6uIsY/?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'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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrFiQdYAfz8-pLzFZTjqH-kByQvwgLx8-Wm8hxo8oLsDFHzevbQzFAzhqAqExGPfPBNrVjIRsXXdb2yxIqAfnDfvoFFuLvj2yxpfaUPLtZMP04Gf3A670aGYSplJvnARq2JqzWzHJ4-0/?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's right edge. If you want to create it in your blogger blog, here's what you should do ! (these instructions refer to the "new" 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmy6BXQjbEG6usdtelmlgwOf1BdLjUfKrZgu4NZYHX8NEviUVQJji-okxQEXf-mp8XwERh73rMbz7FwHLbW4kwDE7xVE1pfUaa07te0gA5oVyMGC4U-su5U9cSBKinTlIQYVO7CH_Ol70/?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'/>
