21:22 - 10/11/2013

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

    Feature Slider with Navigation for Blogger website

    post-sliderThis 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.
    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{margin5px auto;text-aligncenter;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.
    upper part
    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
    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
    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

Bình luận & Góp ý
  1. Cảm ơn chia sẻ của bạn nhé
    Mình chuyên bán bột trà xanh nguyên chất tại TPHCM các bạn liên hệ 0946 406 471 để đặt hàng nhé

    Trả lờiXóa
  2. Bán bột trà xanh nguyên chất
    Xem thêm: http://www.traxanhbaoloc.com.vn/2015/03/bot-tra-xanh-bao-loc-5-cam-ket-chat_29.html

    Trả lờiXóa