Slider bài viết mới nhất cho blogspot giống nhac.vui.vn

Feature Slider with Navigation for Blogger website

This is an automatic slider with small navigation which is used to navigate next and prev. In this widget there is a specialty that is you don’t won’t to add image url and link text, it pick out your blog recent post automatically as compared to other slider we have to manually add image url and link text. You just have to add your blog address that’s all.

Steps
1. Go to your blogger layout page
2. Click Add Gadget and select HTML/JavaScript.
3. Now paste the following code into it.

view sourceprint?

01.<style type="text/css">

02.#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

03.#slides ul,#slides li{<span id="IL_AD12"class="IL_AD">padding</span>:0;margin:0;list-style:none;position:<span id="IL_AD4" class="IL_AD">relative</span>}

04.#slides ul{<span id="IL_AD6" class="IL_AD">height</span>:250px}

05.#slides li{width:49.9%;height:100%;position:absolute;display:none}

06.#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}

07.#slides li:nth-child(1){left:0;top:0}

08.#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}

09.#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}

10.#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}

11.#slides a{display:block;width:100%;height:100%;<span id="IL_AD10"class="IL_AD">overflow</span>:hidden}

12.#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}

13.#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

14.#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}

15.#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}

16.#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}

17.#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}

18.#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}

19.#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}

20.#buttons{margin: 5px auto;text-align: center;background:#00BD79;width:10%;}

21.#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}

22.#buttons a::before{content:"";width:0;height:0;border-width:8px7px;border-style:solid;border-color:transparent #535353 transparenttransparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

23.#buttons a#nextx::before{border-color:transparent transparenttransparent #535353;margin-left:-3px}

24.@media only screen and (max-width:600px){

25.#slides ul{height:600px}

26.#slides li:nth-child(1){width:100%;height:49.8%}

27.#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}

28.#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}

29.#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}

30.}

31.</style>

32.<div id="featuredpost"></div>

33.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

34.<script src="http://Yourwebsite.com/widgets/slider.js"type="text/javascript"></script>

35.<script type='text/javascript'>

36.//<![CDATA[

37.$(document).ready(function () {

38.FeaturedPost({

39.blogURL:"<strong>http://Yourwebsite.com<;/strong>",

40.MaxPost:8,

41.idcontaint:"#featuredpost",

42.ImageSize:300,

43.interval:5000,

44.autoplay:true,

45.tagName:false

46.});

47.});

48.//]]>

49.</script>

Now replace the url (highlighted in bold) 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.

I’m suggested you to add this widget above your blog post section.

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.
1. Goto template page and click edit HTML. Check mark Expand widget template.
2. 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

view sourceprint?

01.<b:widget id='HTML7' locked='false' title='' type='HTML'>

02.<b:includable id='main'>

03.<strong><b:if cond='data:blog.homepageUrl == data:blog.url'></strong>

04.<!-- only display title if it's non-empty -->

05.<b:if cond='data:title != &amp;quot;&amp;quot;'>

06.<h2 class='title'><data:title/></h2>

07.</b:if>

08.<div class='widget-content'>

09.<data:content/>

10.</div>

11. 

12.<b:include name='quickedit'/>

13.<strong></b:if></strong>

14.</b:includable>

15.</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.

In addition you can create a js code file and upload on your server to fetch data for the slider

Slider.js code

view sourceprint?

1.function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://yourwebsite.com/images/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);varc=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){varq,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&amp;orderby=published&amp;alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&amp;orderby=published&amp;alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));returnfalse});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});functionj(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};

2. 

3.<em id="__mceDel">function rotate() {

4.$('#nextx').click();

5.}</em>

Related Article