Script slideshow area

Saya rasa type slideshow area ini sudah tidak asing lagi untuk anda , tapi siapa tau juga anda belum tau type ini silahkan saja anda ikuti langkah dibawah ini :

1. Login ke akun Blogger anda

2. Klik Template lalu pilih Edit HTML
3. Download Template Lengkap terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini dan simpan diatas kode ]]></b:skin>

/*------------------------------------------------ SLIDESHOW AREA --------------------------------------------------*/ #slideshow {width:940px;margin:0 0 20px 0;background: rgba(255,255,255,0.8);} #slider{float:left;margin:20px 20px 10px 30px} .featured-post{width:900px} .slider-image{width:400px;height:250px;float:left} .slider-post{width:470px;margin:0 0 0 15px;float:left;font-size:110% !important;line-height:1.8em} .slider-post-meta {background:none repeat scroll 0 0 #599531;color:#fff;font-size:11px;margin:5px 0 15px;padding:5px;line-height:1.2em} .slider-post-meta a {color:#BDE9FB;font-style:normal} .slider-post-meta a:hover {color:#F9D7A4} #slider-nav {float:left;padding-left:440px;margin:0 0 20px} #slider-nav a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhviHhUE6uOMiRM66IeuOcgQr53eEfSM2jjaz_y0wOdvIZav6mNZCLrYj0QbvBGb0Z-LCCfSZdlr_PCEMiXdRaFNBh5T60Tp6kb6H51Olq8b2vGW4rabH8g2ixIanL2FzyV5oRZt6JZLcJC/s1600/control-1.png) no-repeat;display:block;float:left;height:14px;margin-right:4px;text-indent:-9999px;width:15px;} div#slider-nav a.activeSlide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPciRYXrs3WFzYJehJRZEgeanqo2Hzjv0g8YZ-C0R8l3i8O4odmVMSd7mVyVV11zcfqufXapLzMBfWWGhuoueZWn6sKgKtZV8k4FKezUiPpUTXtkZAnywC_hQESr5UuhtOBCzcCjlQ9cMd/s1600/control-2.png) no-repeat;} .slider-arrow{position:relative} span#prev, span#next{display:block;height:23px;position:absolute;text-indent:-9999px;top:140px;width:13px;} span#prev {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbrp04n5hQrG9MCvKPPM1aRbKmWheRvbjf_sDtyTm2-V2PCw9e54HA-Glw8JQDaZVI9GHk5lSGi2-W5oBK8RsB5NnXFzz7EbLhfQXS4bpbCG-6I990h2nmcp6KQFRrrCGnU2pCsd2RYrj/s1600/prev.png) no-repeat;left:10px } span#next {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6b0QJR7i6plMCyoUoAAUiPW8MZ_fPm5WbPEZwvYt6VRUsCqlVyTytzcbxdnpljT3ZyzDxkK7b5N_xQiH2B6ubArizc03Tjc3ZbRpnYgg06wVDSAs94lk-a9JO_lH5MpoafrxXPHEBaxf9/s1600/next.png) no-repeat ;right:5px} a.readmore span {display:block;height:34px;padding:0 5px 0 10px;} .readmore{ background:#F4F9FB;display:block;float:right;height:34px;line-height:34px;margin:8px 10px 0 0;padding-right:9px; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px; -moz-box-shadow: 1px 1px 1px #D5D5D5 inset;box-shadow: 1px 1px 1px #D5D5D5 inset;-webkit-box-shadow: 1px 1px 1px #D5D5D5 inset; }.readmore:hover{ background:#ECF1E8;text-shadow:1px 1px 1px #357BC5;color:#fff }

8. Cari kode </head>

9. Masukkan script dibawah ini dan simpan diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- /* * Superfish v1.4.8 - jQuery menu widget Copyright (c) 2008 Joel Birch */ ;(function($){$.fn.superfish=function(op){var sf=$.fn.superfish,c=sf.c,$arrow=$(['<span class="',c.arrowClass,'"> �</span>'].join('')),over=function(){var $$=$(this),menu=getMenu($$);clearTimeout(menu.sfTimer);$$.showSuperfishUl().siblings().hideSuperfishUl();},out=function(){var $$=$(this),menu=getMenu($$),o=sf.op;clearTimeout(menu.sfTimer);menu.sfTimer=setTimeout(function(){o.retainPath=($.inArray($$[0],o.$path)>-1);$$.hideSuperfishUl();if(o.$path.length&&$$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}},o.delay);},getMenu=function($menu){var menu=$menu.parents(['ul.',c.menuClass,':first'].join(''))[0];sf.op=sf.o[menu.serial];return menu;},addArrow=function($a){$a.addClass(c.anchorClass).append($arrow.clone());};return this.each(function(){var s=this.serial=sf.o.length;var o=$.extend({},sf.defaults,op);o.$path=$('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){$(this).addClass([o.hoverClass,c.bcClass].join(' ')).filter('li:has(ul)').removeClass(o.pathClass);});sf.o[s]=sf.op=o;$('li:has(ul)',this)[($.fn.hoverIntent&&!o.disableHI)?'hoverIntent':'hover'](over,out).each(function(){if(o.autoArrows)addArrow($('>a:first-child',this));}).not('.'+c.bcClass).hideSuperfishUl();var $a=$('a',this);$a.each(function(i){var $li=$a.eq(i).parents('li');$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});});o.onInit.call(this);}).each(function(){var menuClasses=[c.menuClass];if(sf.op.dropShadows&&!($.browser.msie&&$.browser.version<7))menuClasses.push(c.shadowClass);$(this).addClass(menuClasses.join(' '));});};var sf=$.fn.superfish;sf.o=[];sf.op={};sf.IE7fix=function(){var o=sf.op;if($.browser.msie&&$.browser.version>6&&o.dropShadows&&o.animation.opacity!=undefined) this.toggleClass(sf.c.shadowClass+'-off');};sf.c={bcClass:'sf-breadcrumb',menuClass:'sf-js-enabled',anchorClass:'sf-with-ul',arrowClass:'sf-sub-indicator',shadowClass:'sf-shadow'};sf.defaults={hoverClass:'sfHover',pathClass:'overideThisToUse',pathLevels:1,delay:200,animation:{opacity:'show'},speed:'normal',autoArrows:true,dropShadows:true,disableHI:false,onInit:function(){},onBeforeShow:function(){},onShow:function(){},onHide:function(){}};$.fn.extend({hideSuperfishUl:function(){var o=sf.op,not=(o.retainPath===true)?o.$path:'';o.retainPath=false;var $ul=$(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass).find('>ul').hide().css('visibility','hidden');o.onHide.call($ul);return this;},showSuperfishUl:function(){var o=sf.op,sh=sf.c.shadowClass+'-off',$ul=this.addClass(o.hoverClass).find('>ul:hidden').css('visibility','visible');sf.IE7fix.call($ul);o.onBeforeShow.call($ul);$ul.animate(o.animation,o.speed,function(){sf.IE7fix.call($ul);o.onShow.call($ul);});return this;}});})(jQuery); //--><!]]></script> <script src='http://sites.google.com/site/bthemenet/jquery.lazyload.mini.js' type='text/javascript'/> <script src='http://sites.google.com/site/bthemenet/theme-script.js' type='text/javascript'/> <script src='http://sites.google.com/site/bthemenet/jquery.cycle.all.min.js' type='text/javascript'/>

10. Cari kode <div id='header-wrapper'>

11. Masukkan script dibawah ini dan simpan diatas kode <div id='header-wrapper'>

<script type='text/javascript'> //Initiate Featured Content Slider $('#slider') .cycle({ fx: 'fade', pager: '#slider-nav' , speed: 300, pause: true , prev: '#prev', next: '#next' }); </script> <div class='clearfix' id='slideshow'> <div id='slider'> <div class='featured-post clearfix'> <div class='slider-image'> <img alt='feat0' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBTsJvJ5k2a5qdSYrHht8lU37GjgRM3SKwte2hkKJGM-U8_SzfdXusP7iZLAbCPbO0hRBODLMlogB6HQAQDjZF1NStXYnWhHadbier2vsMLfW8vNSDChksMo4BhmfXDIw9CtmZsRjjhE4/s1600/feat01.jpg' title='feat0' width='400'/> </div> <div class='slider-post'> <h2> <a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='your title co'>Another Post with Everything In It</a></h2> <div class='slider-post-meta'> <span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 17, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category I'>Child Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category II'>Parent Category II</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Another Post with Everything In It'>5 Comments</a> </span> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p> <a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a> </div> </div> <!-- .featured-post --> <div class='featured-post clearfix'> <div class='slider-image'> <img alt='feat2' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdrXzANU8WSmesAw3FD7jLvRSRECr82FZdvLDJ5Dp7v41FnW9I5-Q3wL-Z8YekgEGaJpkCgaFuj6tZqD6jAUip9go54CclDOb2FfVfniM2MmwphFrtzQgiQ4VcbYF9SpAtCJo3C0desA/s1600/feat21.jpg' title='feat2' width='400'/> </div> <div class='slider-post'> <h2> <a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to A Post With Everything In It'>A Post With Everything In It</a></h2> <div class='slider-post-meta'> <span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE LABELS HERE' title='Comment on A Post With Everything In It'>2 Comments</a> </span> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p> <a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a> </div> </div> <!-- .featured-post --> <div class='featured-post clearfix'> <div class='slider-image'> <img alt='feat3' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcS9hRP8LWEpgCxAVZ1g-XT-tJHUOgTigoiPPkOJ9dtLnWojcQglzx4dN7tOKMzyloi8LaRVi0vzywFx10raKuo3JS6kp2zSJTbhpSdMaUBPrU-HfdKYN4FzqpNdj9rbWmsSkP-IvS6D0/s1600/feat31.jpg' title='feat3' width='400'/> </div> <div class='slider-post'> <h2> <a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to Quotes Time!'>Quotes Time!</a></h2> <div class='slider-post-meta'> <span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Quotes Time!'>1 Comment</a> </span> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. Proin vestibulum. Ut ligula. Nullam sed dolor id odio volutpat pulvinar. Integer a leo. In et eros </p> <a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a> </div> </div> <!-- .featured-post --> <div class='featured-post clearfix'> <div class='slider-image'> <img alt='feat4' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmb2rf4W4iEDa5y9p7nRWN7lwdKEIS4pPHCLg97Zlykck2vQ_nnRfU91YkAEMxj2mpVYJd6MBHLV_hl-d1OOga37MFFbBKDQ0bDAbxdjGrp6PTwsy8oplw_jjNna3vsgk6tYCw8emy04Y/s1600/feat41.jpg' title='feat4' width='400'/> </div> <div class='slider-post'> <h2> <a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to Another Text-Only Post'>Another Text-Only Post</a></h2> <div class='slider-post-meta'> <span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on September 11, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category II'>Child Category II</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Grandchild Category I'>Grandchild Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on Another Text-Only Post'>1 Comment</a> </span> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend urna eu sapien. Quisque posuere nunc eu massa. Praesent bibendum lorem non leo. Morbi volutpat, urna eu fermentum rutrum, ligula lacus interdum mauris, ac pulvinar libero pede a enim. Etiam commodo malesuada ante. Donec nec ligula. Curabitur mollis semper diam.</p> <a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a> </div> </div> <!-- .featured-post --> <div class='featured-post clearfix'> <div class='slider-image'> <img alt='feat5' class='featured-image wp-post-image' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYY4vIC7QnatNg44Wz46tdv-OFxuzvrvUuhP0-Jll4kOGV72f-rXiF0b9hyJhGxyXgknCmIeXaSL5hKgKyDqMZwx15Z73ucqYCwdVpmmjQEPNlyTt1LAPycXhL6SCJLbbdJs2qrIIq0E/s1600/feat51-400x250.jpg' title='feat5' width='400'/> </div> <div class='slider-post'> <h2> <a href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='Permanent Link to A Simple Post with Text'>A Simple Post with Text</a></h2> <div class='slider-post-meta'> <span class='italic'>Posted by <a href='#YOUR LINKS HERE' title='Posts by admin'>admin</a> on August 2, 2008. <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Child Category I'>Child Category I</a>, <a href='#YOUR LINKS TO THE LABELS HERE' rel='category' title='View all posts in Parent Category I'>Parent Category I</a> - <a href='#YOUR LINKS TO THE POSTS HERE' title='Comment on A Simple Post with Text'>1 Comment</a> </span> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend urna eu sapien. Quisque posuere nunc eu massa. Praesent bibendum lorem non leo. Morbi volutpat, urna eu fermentum rutrum, ligula lacus interdum mauris, ac pulvinar libero pede a enim. Etiam commodo malesuada ante. Donec nec ligula. Curabitur mollis semper diam.</p> <a class='readmore' href='#YOUR LINKS TO THE POSTS HERE'><span>Read More</span></a> </div> </div> <!-- .featured-post --> </div> <!-- end #slider --> <div class='slider-arrow'> <a href='#'><span id='prev'>Prev</span></a> <a href='#'><span id='next'>Next</span></a> </div> <div id='slider-nav'/> </div> <!-- End of #slideshow-->

11 . Klik simpan template

Semoga bermanfaat...!!!

Admin .:: Get Widget ::.

Keterangan Artikel Ditulis oleh : Dhecun Blog Judul : Script slideshow area Berlangganan artikel Komentari artikel ini...!!! <b>Dhecun Blog : <a href='http://dhecun.blogspot.com/2012/11/script-slideshow-area.html'>Script slideshow area</a></b>

Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.

Sumber : <a href='http://dhecun.blogspot.com/2012/11/script-slideshow-area.html'>Script slideshow area</a>