This is Lovely Featured Slider With Navigator For Blogger/Blog with widget navigation that is employed to navigate next and prev. during this gizmo there's a specialty that's you do not will not to feature image URL and link text, it discover your journal recent post mechanically as compared to alternative slider we've to manually add image URL and link text. you only have to be compelled to add your blog address that is all.
Live Demo Below
How To Add Featured Slider In Blogger
- Step 1 : Go To Blogger > Design > Page Elements
- Step 2: Click on "Add a Gadget" link
- Step 3: From the pop-up window, choose HTML/JavaScript
- Step 4: Copy and paste the following code below
Now replace the url (highlighted in blue) with your blog url and Save It. You can also customize image size, auto play, number of post to display and interval time on the above code.
<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLT9rl71qjD-0H70zslHsGLpxA3NRlQBpnSQsvZ_eINYod6nN-dWTAj4m_DKBjsikoKWS0LVnUNA_TsKUnFfYi6i5HsdpQJivgNchAGmWYlytb7HtoMM_Rf92wi2r8n8H8DUQv9a67QTLf/s320/bloggerheroe.com-fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#1BA1E2;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #FFFFFF transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #FFFFFF;margin-left:-3px}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/81212926/bloggerheroe.com-fade.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.bloggerheroe.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Optional
This widget will show in every pages of your blog like post, archive, static, label page. So if you wish to display this widget only in home page then you may have to follow below tips.- Goto template page and click edit HTML. Check mark Expand widget template.
- Find the following piece of code in your blog, Below code is not exactly same in your blog. It will different widget id, here is an just example HTML7
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
- You cannot find the third line and last third line code (highlighted in red) but you have to copy paste and add it between your widget in your template.
Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^
Posted by 8:43 PM and have
2
comments
My friend was reading the article onHow To Add Lovely Featured Slider With Navigator For Blogger/Blog. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.
, Published at Writed by : Admin ID-Netblog

ARTIKEL TERKAIT:
Blogger Plugins
- Cool Recent Cooment Widgets For Blogger/Blog
- Blogger's New Template HTML Editor
- Tooltips Recent Post Widget For Blogger With Thumbnail
- Automatic Hide Facebook Like Button And Twitter Follower On Blogger/Blog
- How To Add Floating Social Bookmark with Easing Effect
- Adding Automatic And Simple Slider To Your Blogger/Blog
- How To Add Cool Hover Subscription Box Every Post For Blogger
- How to Add Wordpress Style Floating Social Sharing Bar Widget For Blogger
- Recommended Post Slide Out Widget With Social Share Buttons For Blogger
- How To Add Flashing Christmas Lights for blogger/blog
- How To Add Google+ Followers Widget For Blogger/wordpress/website
- How To Add Sliding In-Out Social Sharing For Blogger V2
- Adding Ads Box with cool CSS effect as used in Spice Up Your Blog
- How To Add Sliding In-Out Social Sharing For Blogger
- How To Add Cool Blockquote Style In Blogger!
- How To Add A Unique Message Box For Blogger
- How To Add Horizontal Tab menu with Search Form
- How To Add Notification Box For Blogger/Blog
- How To Add Multi-Colored Popular Posts Widget For Blogger
- How To Remove Titles / Header On Label Page For Blogger Blog
- How To Add Mashable WordPress Style Social Subscription Form To Blogger
- How To Build Subscription Box With Facebook Like And Send Button To Blogger Blog
- Add a Stylish Subscription Box With Social Media Buttons Below Every Posts
- How To Add Heading Tag With Drop Shadow And Mouse Hover Effect
Blogger Widgets
- Cool Recent Cooment Widgets For Blogger/Blog
- Automatic Hide Links From Comments In Blogger
- Tooltips Recent Post Widget For Blogger With Thumbnail
- Automatic Hide Facebook Like Button And Twitter Follower On Blogger/Blog
- How To Add Floating Social Bookmark with Easing Effect
- Adding Automatic And Simple Slider To Your Blogger/Blog
- How to Add Wordpress Style Floating Social Sharing Bar Widget For Blogger
- How To Add Pro Facebook Like Box Widget Beside Beautiful Social Sharing Box in Blogger Post Footer
- How To Add Google+ Followers Widget For Blogger/wordpress/website
- Author Bio Box Widget Generator For Blogger/Blog
- How To Add Static Google Plus Pop Out Box With Smooth Hover Effect
- How To Add Sliding In-Out Social Sharing For Blogger V2
- How To Add Sliding In-Out Social Sharing For Blogger
- How To Add Cool Blockquote Style In Blogger!
- How To Add A Unique Message Box For Blogger
- Hover Link Color Rainbow - Rainbow Color Effect with CSS3 Animation For Blogger
- How To Add Horizontal Tab menu with Search Form
- How To Add Spice Up Your Blog Comment System
- How To Add Cool Hover Blogger Widget
- How To Add Stylish Animated Blogger Recent Posts Widget
- How To Add Multi-Colored Popular Posts Widget For Blogger
- How To Add Mashable WordPress Style Social Subscription Form To Blogger
- How To Build Subscription Box With Facebook Like And Send Button To Blogger Blog
- Add a Stylish Subscription Box With Social Media Buttons Below Every Posts
I do consider all the ideas you have introduced for your post.They’re really convincing and can definitely work. Thanks for sharing post.
ReplyDeletewebsite design
Thanks for sharing this nice article it have some great useful blog....
ReplyDelete