Widget Accordion Featured Post Slider Keren Dengan CSS3

Displays Featured posts slider on the blog is one great way to promote your best articles. Maybe you already have your blog posts featured widgets or at least never find various styles of featured posts slider widget for exploring Dumay, but much of this widget style, even 98% diiantaranya will use some JavaScript or JQuery to produce slides or animation effects. Alhamdulillah, thankfully with the introduction of CSS3
we can get all these effects without using any JavaScript or JQuery which means it could speed up loading our blog. On this occasion God willing I will mempresentasekan accordian style featured posts slider that made purely using CSS. This slider has a smooth sliding effect powered CSS3 transitions. The concept of the effect is somewhat similar to the effects of the widget hover follow us sexy social buttons that just me share yesterday. In this slider image will be expanded to a certain width. Please see the demo to get a clear idea of this amazing widget.

LIVE DEMO

Well if the effect is only possible using a script can be created purely with CSS, no JavaScript, JQuery No. hence why using JS or JQuery. This widget also does not have compatibility issues if we rule out IE. This widget works perfectly in almost all other browsers. Here's a list of browsers that support: 1. Chrome: v4 and diatasx 2. Firefox: v4 and diatasx 3. Safari: v3 and diatasx 4. Opera v10.5 and diatasx 5. IE: v10 and diatasx Well enough for an explanation, now move on adding tutorials featured posts slider widget is pure CSS3 to your blog.

As always login to your blogger account >> Templates >> Edit HTML >> Proceed
Click Ctrl + F Then Find the code <div id = 'main-wrapper'>
Once you can add the following HTML code above code No. 2 above
HTML CODE

<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->        
<b:if cond='data:blog.url == data:blog.homepageUrl'>         
<div id="tbi_slider">         
<ul>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
</ul>         
</div>         
</b:if>         
<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->

Customization

TITLE Change the title of the posts (Make Short Only)
Change POST LINK to link your posts
Change IMAGE LINK to link your images.

After adding the HTML code now add the following CSS code above code]]> </ b: skin>

CSS CODE

/* Accordion Featured Post Slider @ TipsTrikBlogging.com */        
#tbi_slider {         
    overflow: hidden;         
    margin: 20px auto;         
    padding: 0;         
    width: 805px;         
    height: 320px;         
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
}         
#tbi_slider ul {         
    margin: 0;         
    padding: 0;         
    width: 2000px;         
}         
#tbi_slider li {         
    position: relative;         
    display: block;         
float: left;         
    width: 160px;         
    border-left: 1px solid #888;         
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
-webkit-transition: all 0.5s;         
-moz-transition: all 0.5s;         
-ms-transition: all 0.5s;         
-o-transition: all 0.5s;         
    transition: all 0.5s;         
}         
#tbi_slider ul:hover li {         
    width: 40px;         
}         
#tbi_slider ul li:hover {         
    width: 640px;         
}         
#tbi_slider li img {         
    display: block;         
    width: 640px;         
}         
#tbi_title {         
    position: absolute;         
    top: 0;         
    left: 0;         
    padding: 20px;         
    width: 640px;         
    background: rgba(0, 0, 0, 0.5);         
    color: #fff;         
    font: bold 16px 'trebuchet MS', sans-serif;         
}         
#tbi_title a {         
    display: block;         
    color: #fff;         
    text-decoration: none;         
}         
/* Accordion Featured Post Slider @ TipsTrikBlogging.com */

Nothing needs to be changed in this section. Please save the template and see the results of your blog. Again, featured posts slider widget is using CSS3 transitions. Hopefully anada liked this widget, and can help you to promote your best articles or posts. If there is trouble or need help and questions surrounding this widget, please use the comments below. Thank tuk your appreciation.