This is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents. Basically all business information thinkable.

CSS Light Style!

/* Services Slider Light */
.example-wrapper{position:relative;width:980px;height:400px;margin:auto;margin-top:20px;}

/* THEME 1 SETTINGS */
.theme1 .main-container {background-color:#fff;border:1px solid #e6e6e6;padding:30px;-webkit-box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);-moz-box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);box-shadow:0px 0px 5px 1px rgba(100,100,100,0.1);
}
.theme1 {font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#777;text-shadow:#fff 1px 1px 1px;}
.theme1 h2{font-family: PT Sans Narrow, sans-serif;font-size:18px;font-weight:normal;color:#999;text-shadow:#fff 1px 1px 1px;margin:0px;width:100%;}
.theme1 .thumb{padding:4px;height:auto;background:#fff;position:relative;z-index:50;
box-shadow:0 5px 4px -5px #bbb;-webkit-box-shadow:0 5px 4px -5px #bbb;-moz-box-shadow:0 5px 4px -5px #bbb;border-bottom:1px solid #fff;border:1px solid #eee;}

/* THEME-1 MORE */
.theme1 .page-more{visibility:hidden;}
.theme1 >ul{visibility:hidden;}
.theme1 .big-image{
float:left;border:1px solid #ddd;padding:4px;height:auto;background:#fff;position:relative;z-index:50;margin-right:30px;}
.theme1 .details{position:relative;float:left;width:160px;margin-right:30px;}
.theme1 .details_double{position:relative;float:left;width:320px;margin-right:30px;}
.theme1 .video_clip{position:relative;float:left;width:498px;height:280px;border:1px solid #ddd;padding:4px;margin-right:30px;}
.theme1 .check {list-style:none;margin-left:0px;padding-left:0px;}
.theme1 .check li{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/check.png) no-repeat left;padding-left:25px;list-style:none;line-height:27px;margin:0px;}
.theme1 .closer{width:30px;height:30px;position:absolute;background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/close.png) no-repeat top;right:0px;margin-right:-20px;margin-top:-20px;top:0px;cursor:pointer;z-index:10000;}

.theme1 .closer:hover{background-position:bottom;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";cursor:pointer;}

/* BUTTON LIGHT */
.buttonlight {margin-top:10px;height:30px;line-height:30px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.buttonlight:link, .buttonlight:visited {color:#777;padding:5px 20px 5px 20px;text-align:center;text-shadow:1px 1px 0px #fff;background: #999 url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/btn_light.png) repeat-x center top;border:1px solid #cdcdcd;text-decoration:none;font-weight:bold;}
.buttonlight:hover, .comment-reply-link:hover {color:#fff;text-shadow:1px 1px 0px #000;background:#333;border:1px solid #555555;text-decoration:none;}

/* TOOLBAR Light */
.toolbar{visibility:hidden;}
.toolbar .left{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/left.png) no-repeat top;width:30px;height:45px;position:absolute;left:0px;top:60px;z-index:100;margin-left:-29px;cursor:pointer;}
.toolbar .left:hover{background-position:bottom;}
.toolbar .right:hover{background-position:bottom;}
.toolbar .right{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/right.png) no-repeat top;width:30px;height:45px;position:absolute;right:0px;top:60px;z-index:100;margin-right:-30px;cursor:pointer;}

/* More SIGNS Light */   
.hover-more-sign{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/more.png) no-repeat;width:50px;height:50px;position:absolute;margin-left:-25px;margin-top:-25px;cursor:pointer;}
.hover-blog-link-sign{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/link.png) no-repeat;width:50px;height:50px;position:absolute;cursor:pointer;}

/* THE PRELOADER Light */
.services-preloader{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/loader/preloader.gif) no-repeat;width:24px;height:24px;position:absolute;left:49%;top:49%;z-index:9999;}

CSS Dark Style!

/* Services Slider Dark */
.example-wrapper2{position:relative;width:761px;height:400px;margin:auto;margin-top:20px;}
/* THEME 2 SETTINGS */
.theme2 .main-container {background-color:#111;border:1px solid #222;padding:20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

.theme2 {font-family: Arial, sans-serif;font-size:12px;line-height:20px;color:#999;text-shadow:#000 1px 1px 1px;}
.theme2 h2{font-family: PT Sans Narrow, sans-serif;font-size:17px;font-weight:bold;color:#ddd;text-shadow:#000 1px 1px 1px;margin:0px;width:100%;}

.theme2 .thumb{border:1px solid #222;padding:0px;height:auto;background:#111;position:relative;z-index:50;box-shadow:0 5px 4px -5px #000;-webkit-box-shadow:0 5px 4px -5px #000;-moz-box-shadow:0 5px 4px -5px #000;border-bottom:1px solid #111;}

/* THEME-2 MORE */
.theme2 .page-more{visibility:hidden;}
.theme2 >ul{visibility:hidden;}
.theme2 .big-image{float:left;border:1px solid #222;height:auto;background:#111;position:relative;z-index:50;margin-right:30px;}
.theme2 .details{position:relative;float:left;width:140px;margin-right:20px;}
.theme2 .details_double{position:relative;float:left;width:300px;margin-right:20px;}
.theme2 .video_clip{position:relative;float:left;width:533px;height:300px;border:1px solid #222;margin-right:20px;}
.theme2 .check {list-style:none;margin-left:0px;padding-left:0px;}
.theme2 .check li{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/check.png) no-repeat left;padding-left:25px;list-style:none;line-height:27px;margin:0px;}
.theme2 .closer{width:30px;height:30px;position:absolute;background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/close_dark.png) no-repeat top;right:0px;margin-right:-10px;margin-top:-10px;top:0px;cursor:pointer;z-index:10000;}
.theme2 .closer:hover{background-position:bottom;opacity:0.5;filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";cursor:pointer;}

/* BUTTON DARK */
.buttondark {margin-top:10px;float:left;height:30px;line-height:30px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.buttondark:link, .buttondark:visited {color:#fff;padding:0 20px 0 20px;text-align:center;text-shadow:1px 1px 0px #000;background:#999 url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/btn_dark.png) repeat-x center top;border: 1px solid #222;text-decoration:none;font-weight:bold;}
.buttondark:hover, .comment-reply-link:hover {color:#fff;text-shadow:1px 1px 0px #000;background:#111;border:1px solid #222;text-decoration:none;}

/* TOOLBAR Dark */
.toolbar{visibility:hidden;}
.theme2 .toolbar .left{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/left_dark.png) no-repeat top;width:30px;height:45px;position:absolute;left:0px;top:60px;z-index:100;margin-left:-29px;cursor:pointer;}
.theme2 .toolbar .right{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/right_dark.png) no-repeat top;width:30px;height:45px;position:absolute;right:0px;top:60px;z-index:100;margin-right:-30px;cursor:pointer;}
.theme2 .toolbar .left:hover{background-position:bottom;}
.theme2 .toolbar .right:hover{background-position:bottom;}

/* More SIGNS Dark */   
.hover-more-sign{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/more.png) no-repeat;width:50px;height:50px;position:absolute;margin-left:-25px;margin-top:-25px;cursor:pointer;}
.hover-blog-link-sign{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/button/link.png) no-repeat;width:50px;height:50px;position:absolute;cursor:pointer;}

/* THE PRELOADER DARK */
.services-preloader{background:url(http://www.themepunch.com/codecanyon/showbiz/services-plugin/assets/loader/preloader.gif) no-repeat;width:24px;height:24px;position:absolute;left:49%;top:49%;z-index:9999;}

HTML Light Style!

<div class="example-wrapper" style="margin-top:20px;">

<div id="services-example-1" class="theme1">
<ul>

<!-- SLIDE 1 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service1_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Slide With Large Image</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 2 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service2_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 3 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service3_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Vimeo Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 4 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service4_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Design Your Layout</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large2.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 5 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service5_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>No Image Just Text</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Diverse Layouts</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="details_double">
<h2>Wide Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Short Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 6 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service1_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Slide With Large Image</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 7 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service2_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 8 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service3_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Vimeo Video</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 9 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service4_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>Design Your Layout</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="498" height="280" src="http://www.themepunch.com/codecanyon/showbiz/images/services/large2.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 10 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services/service5_bw.jpg"/>
<div style="margin-top:16px"></div>
<h2>No Image Just Text</h2>
<p>Lorem ipsum dolor sit amet, conseteetur sadipscing elitr,<br> sed diam monumy eirmod...</p>
<a class="buttonlight morebutton" href="#">View More</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details">
<h2>Diverse Layouts</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>List Item Number One</li>
<li>List Item Number Two</li>
<li>List Item Number Three</li>
<li>List Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified.png"/>
</div>
<div class="details_double">
<h2>Wide Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttonlight" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Short Text Block</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<div class="closer"></div>
</div>
</li>

</ul>
<div class="toolbar">
<div class="left"></div><div class="right"></div>
</div>

</div>
</div>

HTML Dark Style!

<div class="example-wrapper2" style="margin-top:20px;">
<div id="services-example-2" class="theme2">
<ul>

<!-- SLIDE 1 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service1.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service1_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Jack</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg"/>
<div class="details">
<h2>Our Strategy</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Step Towards Success</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="details">
<h2>Read This</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen.</p>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 2 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service2.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service2_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Melissa</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="280" width="498" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 3 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service3.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service3_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Claire</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="498" height="280" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<div class="details">
<h2>Vimeo Video</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 4 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service4.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service4_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Gina</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg"/>
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<div class="details">
<h2>Useful Things</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div class="closer"></div>
</div>
</li>

<!-- SLIDE 5 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service5.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service5_bw.jpg"/>
<div style="margin-top:10px"></div>
<h2>Thomas</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark morebutton" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more">
<div class="details_double">
<h2>Just An Image & Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labora et dolore magna.</p>
<p>At vero eou et accusam et justo duo dolores et ea rebum.<br>Stet clita kasd gubergen, no sea takimata sanctus est Lorem ipsum dolor.</p>
<a class="buttondark" href="#">Visit Website</a>
</div>
<img class="big-image" width="200" height="338" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/large1.jpg">
<div class="details">
<h2>Useful Things</h2>
<ul class="check">
<li>Item Number One</li>
<li>Item Number Two</li>
<li>Item Number Three</li>
<li>Item Number Four</li>
</ul>
<img src="http://www.themepunch.com/codecanyon/showbiz/images/certified_dark.png"/>
</div>
<div  class="closer"></div>
</div>
</li>

<!-- SLIDE 6 -->
<li>
<img class="thumb" src="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service6.jpg" data-bw="http://www.themepunch.com/codecanyon/showbiz/images/services_dark/service6_bw.jpg">
<div style="margin-top:10px"></div>
<h2>Just A Link</h2>
<p>Lorem ipsum dolor sit amet...</p>
<a class="buttondark" href="#">Detail</a>
<!--
***********************************************************************************************************
- HERE YOU CAN DEFINE THE EXTRA PAGE WHICH SHOULD BE SHOWN IN CASE THE "BUTTON" HAS BEED PRESSED -
***********************************************************************************************************
-->
<div class="page-more"></div>
</li>

</ul>
<div class="toolbar">
<div class="left"></div><div class="right"></div>
</div>

</div>
</div>

SCRIPT Light Style!

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.cssAnimate.mini.js"></script>

<!-- TOUCH AND MOUSE WHEEL SETTINGS -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.touchwipe.min.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.mousewheel.min.js"></script>

<!-- jQuery SERVICES Slider  -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.themepunch.services.min.js"></script>

<!-- ACTIVATE THE BANNER HERE -->
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery(#services-example-1).services(
{
width:920,
height:290,
slideAmount:5,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"on",
callBack:function() { }
});
});
</script>

SCRIPT Dark Style!

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.cssAnimate.mini.js"></script>

<!-- TOUCH AND MOUSE WHEEL SETTINGS -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.touchwipe.min.js"></script>

<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.mousewheel.min.js"></script>

<!-- jQuery SERVICES Slider  -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/showbiz/services-plugin/js/jquery.themepunch.services.min.js"></script>

<!-- ACTIVATE THE BANNER HERE -->
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
jQuery(#services-example-2).services(
{
width:720,
height:345,
slideAmount:6,
slideSpacing:20,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"on",
callBack:function() { }
});
});
</script>

Example Showbiz Business Carousel With jQuery Plugin (Dark Style)

Membuat breadcrumbs with CSS3 Bag.2 - ini adalah lanjutan dari Cara Pasang Navigasi Breadcrumb Karena belum lengkap rasanya jika saya tidak merubah tampilan "Navigasi Breadcrumbs" yang sebelumnya.Baiklah Seperti yang sudah saya jelaskan di postingan sebelumnya tentang pentingnya navigasi breadcrumbs, selain bisa membantu pegunjung blog untuk mengetahui lokasi artikel, memasang navigasi breadcrumbs memang disarankan oleh mbah google.

Tulisan ini menjelaskan bagaimana membuat navigasi breadcrumbs yang bisa terindeks oleh google ketika tampil di mesin pencari.

Nah Bagaimana Apakah Anda Tertarik bila ia silahkan ikuti langkah - langkah di bawah ini.

#breadcrumbs-system{
overflow: hidden;
width: 100%;
}
#breadcrumbs-system li{
float: left;
margin: 0 .5em 0 1em;
list-style-type: none;
font-size: 13px;
}
#breadcrumbs-system a{
background: #1478ff;
padding: 2px 5px;
float: left;
text-decoration: none;
color: #DDD;
position: relative;
}
#breadcrumbs-system a:hover{
background: #0f53b0;
}
#breadcrumbs-system a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #1478ff #1478ff #1478ff transparent;
left: -1em;
}
#breadcrumbs-system a:hover::before{
border-color: #0f53b0 #0f53b0 #0f53b0 transparent;
}
#breadcrumbs-system a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #1478ff;
right: -1em;
}
#breadcrumbs-system a:hover::after{
border-left-color: #0f53b0;
}

4. Kemudian cari kode <b:include data=top name=status-message/> kalau ada 2 maka copas kode berikut ini di atas semua kode <b:include data=top name=status-message/>

<b:include data=posts name=breadcrumb/>

5. Nah Sekarang cari kode <b:includable id=main var=top> kalau sudah ketemu paste kode berikut ini di atasnya.

<b:includable id=breadcrumb var=posts>
<b:if cond=data:blog.homepageUrl != data:blog.url>
<b:if cond=data:blog.pageType == &quot;static_page&quot;>
<ul id=breadcrumbs-system>
<li><span><a expr:href=data:blog.homepageUrl rel=tag>Home</a></span></li>
<li><span><data:blog.pageName/></span></li>
</ul>
<b:else/>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<!-- breadcrumb for the post page -->
<b:loop values=data:posts var=post>
<b:if cond=data:post.labels>
<ul id=breadcrumbs-system xmlns:v=http://rdf.data-vocabulary.org/#>
<li><span typeof=v:Breadcrumb><a expr:href=data:blog.homepageUrl property=v:title rel=v:url>Home</a></span></li>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast == &quot;true&quot;>
<li><span typeof=v:Breadcrumb><a expr:href=data:label.url property=v:title rel=v:url><data:label.name/></a></span></li>
</b:if>
</b:loop>
<li><span><data:post.title/></span></li>
</ul>
<b:else/>
<ul id=breadcrumbs-system>
<li><span><a expr:href=data:blog.homepageUrl rel=tag>Home</a></span></li>
<li><span>Unlabelled</span></li>
<li><span><data:post.title/></span></li>
</ul>
</b:if>
</b:loop>
<b:else/>
<b:if cond=data:blog.pageType == &quot;archive&quot;>
<!-- breadcrumb for the label archive page and search pages.. -->
<ul id=breadcrumbs-system>
<li><span><a expr:href=data:blog.homepageUrl>Home</a></span></li>
<li><span>Archives for <data:blog.pageName/></span></li>
</ul>
<b:else/>
<b:if cond=data:blog.pageType == &quot;index&quot;>
<ul id=breadcrumbs-system>
<b:if cond=data:blog.pageName == &quot;&quot;>
<li><span><a expr:href=data:blog.homepageUrl>Home</a></span></li>
<li><span>All posts</span></li>
<b:else/>
<li><span><a expr:href=data:blog.homepageUrl>Home</a></span></li>
<li><span>Posts filed under <data:blog.pageName/></span></li>
</b:if>
</ul>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

6. Lalu klik PRATINJAU jika sudah OK silahkan klik SIMPAN TEMPLATE.

::: Tulisan berwarna merah itulah yang membedakan dengan membuat breadcrumbs sebelumnya.
Untuk melihat keberhasilan dari membuat menu navigasi breadcrumbs ini sobat bisa cek langsung di Google Rich Snippet Tool.:::

Selesai deh tutorial ini, selamat mencoba..^^

Sekarang Anda dapat membuat pita dengan murni CSS dan markup sedikit. Tidak ada lebih banyak menggunakan gambar besar dan kuat. Ini melibatkan penggunaan: sebelum dan: setelah unsur-unsur bersama dengan beberapa sifat perbatasan. Kelas non-semantik-pelindung menggunakan negatif z-indeks nilai untuk memperbaiki gangguan elemen latar belakang. Ini hanya diperlukan jika desain tidak muncul dengan benar. Berikut adalah Hasilnya :

KODE CSS :

.ribbontd {
 font-size: 20px !important;
 width: 50%;
 position: relative;
 background: #1daaeb;
 color: #fff;
 text-align: center !important;
 padding: 1em 1em !important;
 margin: 1em auto 3em;
}
.ribbontd:before, .ribbontd:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #148ec7;
 z-index: -1;
}
.ribbontd:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbontd:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbontd-content {
 color:#fff;
}
.ribbontd .ribbontd-content:before, .ribbontd .ribbontd-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #1077a7 transparent transparent transparent;
 bottom: -1em;
}
.ribbontd .ribbontd-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbontd .ribbontd-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }

KODE HTML :

<div class="non-semantic-protector">
<h1 class="ribbontd"><strong class="ribbontd-content">UTta MOG-MOG!!!</strong></h1>
</div>