Posted by Syed Muhammad Ali
 |
Today I am sharing a great blogger widget for those who want to decorate their blog. This is a content Image Slider which is easy to Install and help you to Customize your Blogger Template.
Just Follow the Below Steps to Add this Slider To Blogger:
- Go to Blogger
- Log-In to your Dashboard
- Go to Template Section
- Click Edit Html
- Find ]]> By pressing Ctrl+F Button.
- Paste the Below Code Just Above ]]>
.itbfp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.itbfp-slides-container {
}
.itbfp-slides, .itbfp-thumbnail, .itbfp-prev-next, .itbfp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.itbfp-slides, .itbfp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.itbfp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.itbfp-title a, .itbfp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.itbfp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.itbfp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.itbfp-more, .itbfp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.itbfp-nav {
background: url(“http://3.bp.blogspot.com/-T2u14ZkViVc/UDVDYSb6qoI/AAAAAAAAA4U/xgSh7zYVwGY/s1600/h2.png”) repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.itbfp-pager a {
background-image: url(“http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png”);
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.itbfp-pager a:hover, .itbfp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.itbfp-prev-next-wrap {
position: relative;
z-index: 200;
}
.itbfp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.itbfp-prev {
background: url(“http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png”) no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.itbfp-prev:hover {
opacity: 0.8;
}
.itbfp-next {
background: url(“http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png”) no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.itbfp-next:hover {
opacity: 0.8;
}
- Change 329px to Change Height of the Slider
- Change 850px to Change Width of Slider
- Find tag By Pressing Ctrl+F Key.
- Paste the below code just Above tag
/* jQuery.noConflict();
jQuery(function(){
jQuery(‘ul.menu-primary’).superfish({
animation: {
opacity:’show’}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery(‘ul.menu-secondary’).superfish({
animation: {
opacity:’show’}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery(‘.itbfp-slides’).cycle({
fx: ‘scrollHorz’,
timeout: 4000,
delay: 0,
speed: 400,
next: ‘.itbfp-next’,
prev: ‘.itbfp-prev’,
pager: ‘.itbfp-pager’,
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
- Find by Pressing Ctrl+F
- Paste the Below Code Just After/Below
Latest Seo Techniques
Write your description and information for the first image here.
Blogging Tips and Tricks
Write Your Description For Image Two Here.
Blogger Templates
Write Your Description For Image Three Here.
Blogger Widgets
Write Your Description For Image Four Here.
Customization:
- Remove and if you want the Widget to Appear in Post Pages
- Change http://www.infotechbloging.blogspot.com with you Blog Post Pages Url
You are Done! If you get any Problem During Installation, Please Let us Know by Commenting Below
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
