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 with automatic sliding effects. That means you may choose which posts should be displayed as featured posts.
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 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 != "item"'>
<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 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 post URL.
3) Replace S with post description/summary/snippet.
4) Replace W with post image/photo URL.
5) Replace T with 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 posts on all blog pages.
Now save the gadget and see a live featured posts with auto slide effect on your blog/site. Enjoy!