How to Show Featured Posts with Automatic Sliding Effect

You may choose specified posts to show it as featured posts with automatic sliding effects and keep visitors engaged for long time on your sites.

In this tutorial you will learn to display your BlogSpot blog posts or WordPress blog posts or other sites stories/articles as featured posts on all or any page of your site. With the help of this auto sliding featured posts you will be able to show posts with images, descriptions/snippets and titles of that posts/stories/articles.

You can display any number of posts as featured posts with automatic sliding effects. That means you may choose which posts should be displayed as featured posts.

Featured-Posts-Slider

Add featured posts slider to your WordPress/BlogSpot blogs

Step-1:

Add these CSS codes into your site. For blogger, just go to the template editor and find closing ]]></b:skin> tag and paste these CSS codes before/above ]]></b:skin>

ul.swtSlideShow {/* SWT Featured Posts Slider by Showeblogin START */
list-style:none;
width:100%;
height:250px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
}
ul.swtSlideShow li {
position:absolute;
left:0;
right:0;
}
ul.swtSlideShow li.show {
z-index:500;
}
ul.swtSlideShow img {
width:100%;
height:250px;
border:none;
}
#swtSlideShow-caption {
width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#swtSlideShow-caption .swtSlideShow-caption-container {
padding:5px 10px;
z-index:1000;
}
#swtSlideShow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#swtSlideShow-caption p {
margin:5px 0 0 0;
padding:0;
}
#swtSlideShowTitle > h3 {
font-weight: normal;
text-align:center;
margin: .5em 1em;
padding: 0 10px;
font-size: 130%;
position: relative;
line-height: 32px;
z-index: 1;
left: -5px;
bottom: -5px;
border-bottom: 5px solid #1ABC9C;
height: 32px;
background-color: #192a3e;
color: #fff;
text-decoration: none;
}
#swtSlideShowTitle > h3:before, #swtSlideShowTitle > h3:after {
width:0;
height:0;
content:"";
position:absolute;
z-index:10;
border:0 solid transparent;
}
#swtSlideShowTitle > h3:before {
border-bottom: 32px solid #1ABC9C;
border-right-width: 0;
border-left-width: 14px;
right: 100%;
bottom: 0;
}
#swtSlideShowTitle > h3:after {
border-bottom: 32px solid #1ABC9C;
border-right-width: 14px;
border-left-width: 0;
left: 100%;
bottom: 0;
/* SWT Featured Posts Slider Tutorial at http://www.superwebtricks.com/?p=765 */}

Step-2:

Now, copy and paste these JavaScript file into your site within head tag. For blogger, just find closing </head> tag in your blog template editor and paste these JavaScript codes file before/above it. You may ignore the first JavaScript file if you have already added it into your blog/site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtFeaturedPostsSlideShow.js"></script>

Step-3:

Finally, you have to copy and paste these html codes into your site. If you have WordPress blog then paste it into text box ignoring the conditional tag. However, if you have blogger blog then visit the layout tab of your blog and add a new HTML/JavaScript Gadget.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span id='swtSlideShowTitle'><h3>Featured Posts Slide Show</h3>
</span><ul class='swtSlideShow'>
<li><a href='#'><img alt='S' src='W' title='T' /></a></li>
<li><a href='#'><img alt='S' src='W' title='T' /></a></li>
<li><a href='#'><img alt='S' src='W' title='T' /></a></li>
<li><a href='#'><img alt='S' src='W' title='T' /></a></li>
<!-- Respect our hard work and please do not edit the last Slide of Showeblogin -->
<li><a class='swtSliderRight' href='http://www.superwebtricks.com/?p=765'><img id='swtSlideShowRight' alt='You may choose specified posts to show it as featured posts with automatic sliding effects and keep visitors engaged for long time on your sites.' src='http://img.superwebtricks.com/files/Featured-Posts-Slider.png' title='How to Show Featured Posts with Automatic Sliding Effect'/></a></li></ul>
</b:if>

Customization of SWT Featured Posts Slider

1) Add <li><a href='#'><img alt='S' src='W' title='T' /></a></li> as many as you want the featured posts.
2) Replace # with featured post URL.
3) Replace S with featured post description/summary/snippet.
4) Replace W with featured post image/photo URL.
5) Replace T with featured post title.
6) Blogger user may also remove first and last line (i.e. conditional tag b:if) of above codes (step-3) if they want to show featured posts on all blog pages.

Now save the gadget and see a live featured posts with auto slide effect on your blog/site. Enjoy!

Shortlink: http://www.superwebtricks.com/?p=765 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»Widgets»WordPress Blog»How to Show Featured Posts with Automatic Sliding Effect
Top