Feature post ap ki site ke liye kafi faide mand ho sakti hai.Feature post ap ki site main mojud Posts ke hi hoti hain jo kre ap ke main page main Navigation bar ke neech dekhai deti hai.Aksar aapne daikha ho ga ke ap jab koe template add karte hain apne blog main toh us ke main page par kuch images sliding kar rahi hoti hain.Ye ap ke blog ko or ziyada beautiful bhi dikhati hain.
Aj main apko yehi btaoun ga ke ap apne blog main features post kaise add kar sakte hain.
Ye koe ziyada mushqil nahi hain.Just apko mere steps ko hi follow karna pare ga.
Ab ham daikhte hain ke apne blog main Feature post kaise add kar sakte hain.
Step 1. Sab se pehle ap apne blog main log in hon.
Step2. Ab ap Adit HTML par click kare.
Step3. Ab ap </head> search kare or ye code </head> ke uper past kar dain.
Step 1. Sab se pehle ap apne blog main log in hon.
Step2. Ab ap Adit HTML par click kare.
Step3. Ab ap </head> search kare or ye code </head> ke uper past kar dain.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
/*!
* jCarouselLite - v1.1 - 2014-09-28
* http://www.gmarwaha.com/jquery/jcarousellite/
* Copyright (c) 2014 Ganeshji Marwaha
* Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
*/
!function(a){a.jCarouselLite={version:"1.1"},a.fn.jCarouselLite=function(b){return b=a.extend({},a.fn.jCarouselLite.options,b||{}),this.each(function(){function c(a){return n||(clearTimeout(A),z=a,b.beforeStart&&b.beforeStart.call(this,i()),b.circular?j(a):k(a),m({start:function(){n=!0},done:function(){b.afterEnd&&b.afterEnd.call(this,i()),b.auto&&h(),n=!1}}),b.circular||l()),!1}function d(){if(n=!1,o=b.vertical?"top":"left",p=b.vertical?"height":"width",q=B.find(">ul"),r=q.find(">li"),x=r.size(),w=x<b.visible?x:b.visible,b.circular){var c=r.slice(x-w).clone(),d=r.slice(0,w).clone();q.prepend(c).append(d),b.start+=w}s=a("li",q),y=s.size(),z=b.start}function e(){B.css("visibility","visible"),s.css({overflow:"hidden","float":b.vertical?"none":"left"}),q.css({margin:"0",padding:"0",position:"relative","list-style":"none","z-index":"1"}),B.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"}),!b.circular&&b.btnPrev&&0==b.start&&a(b.btnPrev).addClass("disabled")}function f(){t=b.vertical?s.outerHeight(!0):s.outerWidth(!0),u=t*y,v=t*w,s.css({width:s.width(),height:s.height()}),q.css(p,u+"px").css(o,-(z*t)),B.css(p,v+"px")}function g(){b.btnPrev&&a(b.btnPrev).click(function(){return c(z-b.scroll)}),b.btnNext&&a(b.btnNext).click(function(){return c(z+b.scroll)}),b.btnGo&&a.each(b.btnGo,function(d,e){a(e).click(function(){return c(b.circular?w+d:d)})}),b.mouseWheel&&B.mousewheel&&B.mousewheel(function(a,d){return c(d>0?z-b.scroll:z+b.scroll)}),b.auto&&h()}function h(){A=setTimeout(function(){c(z+b.scroll)},b.auto)}function i(){return s.slice(z).slice(0,w)}function j(a){var c;a<=b.start-w-1?(c=a+x+b.scroll,q.css(o,-(c*t)+"px"),z=c-b.scroll):a>=y-w+1&&(c=a-x-b.scroll,q.css(o,-(c*t)+"px"),z=c+b.scroll)}function k(a){0>a?z=0:a>y-w&&(z=y-w)}function l(){a(b.btnPrev+","+b.btnNext).removeClass("disabled"),a(z-b.scroll<0&&b.btnPrev||z+b.scroll>y-w&&b.btnNext||[]).addClass("disabled")}function m(c){n=!0,q.animate("left"==o?{left:-(z*t)}:{top:-(z*t)},a.extend({duration:b.speed,easing:b.easing},c))}var n,o,p,q,r,s,t,u,v,w,x,y,z,A,B=a(this);d(),e(),f(),g()})},a.fn.jCarouselLite.options={btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}}(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*!
* Featured Post Content Slider to Blogger
* http://www.bloggertipandtrick.net/featured-post-content-slider-blogger/
*/
jQuery(document).ready(function ($) {
$(".btt-slider").jCarouselLite({
btnPrev: ".btt-next", // CSS Selector for the previous button
btnNext: ".btt-prev", // CSS Selector for the next button
btnGo: null, // CSS Selector for the go button
mouseWheel: true, // Set "true" if you want the carousel scrolled using mouse wheel
auto: 2000, // Set to a numeric value (800) in millis. Time period between auto scrolls
speed: 1000, // Set to a numeric value in millis. Speed of scroll
easing: "easeOutBounce", // Set to easing (bounceout) to specify the animation easing
vertical: false, // Set to "true" to make the carousel scroll vertically
circular: true, // Set to "true" to make it an infinite carousel
visible: 1, // Set to a numeric value to specify the number of visible elements at a time
start: 0, // Set to a numeric value to specify which item to start from
scroll: 1, // Set to a numeric value to specify how many items to scroll for one scroll event
beforeStart: null, // Set to a function to receive a callback before every scroll start
afterEnd: null // Set to a function to receive a callback after every scroll end
});
});
//]]>
</script>
<style type='text/css'>
#btt-slidearea {
width: 680px;
height: 230px;
background: #242424;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
#btt-slidercover {
margin: 0;
padding: 0;
overflow: hidden;
}
.btt-slider {
overflow: hidden;
position: relative;
}
.btt-slidecontent {
position: relative;
margin: 0px 0px;
height: 200px;
width: 680px;
float: left;
display: inline;
color: #ccc;
font: 13px/18px 'Roboto',Georgia,century gothic,Verdana, sans-serif;
}
.btt-slidecontent img {
position: absolute;
left: 10px;
top: 10px;
padding: 5px;
background: #000000;
border: 1px solid #383838;
width: 270px;
height: 170px;
}
.btt-slidecontent ul {
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.btt-slidecontent ul li {
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
height: 200px;
}
.btt-slidecontent a:link, .btt-slidecontent a:visited {
color: #fff;
}
.btt-slidecontent h2 {
font: 18px/22px Georgia,century gothic,Verdana, sans-serif;
margin: 15px 0px 5px 305px;
padding: 0;
font-weight: normal;
width: 350px;
height: 24px;
overflow: hidden;
}
.btt-slidecontent h2 a {
color: #fff;
text-decoration: none;
}
.btt-slidecontent h2 a:hover {
color: #eee;
text-decoration: none;
}
.btt-slidecontent p {
width: 350px;
margin: 0px 0px 5px 305px;
padding: 0;
max-height: 130px;
overflow: hidden;
}
.btt-slnav {
padding: 3px 0px;
background: #000;
}
.btt-prev {
float: left;
width: 24px;
height: 24px;
z-index: 200;
margin-left: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8Q_YsKzV3Y6AFbhOECm-w_YdO-tvb1lZDHHz5Qjkd-4eCRwx9GL3P9mxTUHrlj97inNU99MkgqExSnCWYSK4uqdzG9hLxMsjv0vId96APBKPYsGL9_c7yxa1EylxExH7T1hd_8jttuCn/);
}
.btt-next {
float: right;
width: 24px;
height: 24px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhtcBhA2pSLpzKKK9TLZLzvc7nyFtB7IvKOziihk1mQyBLvyW0CZRGPcMu9HwI4el6PBIJOYbVI5lDYmBVNohoWdWL4bOSOs59-IfJdkOqtNsOlQc8YPuk9n6Co6Z1F8oGs1tnOZtxg48/);
display: block;
}
.clear{
clear:both;
}
</style>
Post a Comment
Thank You for comment