Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[ Hỏi ] Về code tạo Slider cho Blogspot

Chủ đề thuộc danh mục 'Blogspot' được đăng bởi Nhox_SoCk, 22/7/15.

Lượt xem: 4,264

  1. Nhox_SoCk Thành viên cấp 1

    Như tiêu đề ạ : e có sd code này để tạo slider cho blog :

    Code:
    <style scoped="" 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{width:680px;height:270px}
    #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://2.bp.blogspot.com/-24miAg53eQo/Uaq2dwSNZyI/AAAAAAAAaz8/IavWv66LN14/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
    #slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";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 0 0}
    #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 #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
    #buttons a#nextx::before{border-color:transparent transparent transparent #535353;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 type='text/javascript'>
    //<![CDATA[
    function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/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);var c=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){var q,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+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&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"));return false});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)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};
    function rotate() {
    $('#nextx').click();
    }
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"http://truyencuamua.blogspot.com/",//URL Blog của bạn
    MaxPost:8,//Số bài trình chiếu
    idcontaint:"#featuredpost",
    ImageSize:300,
    interval:4500,//Tốc độ dịch chuyển
    autoplay:true,//Tự động
    tagName:false
    });
    });
    //]]>
    </script>


    Vấn đề là Ảnh bải đăng nó ko hiển tị trên slider .Ngay cả Mấy cái bên cạnh như
    POPULAR POSTS
    cũng thế ạ @@
    Có b nào giúp e vs ạ @@
    [​IMG]

    Xem tập tin đính kèm 13484

    ...
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Cho cái link demo xem nào.

    Ảnh thumbnail ở Popular Post ko có là do bài đó bạn ko up ảnh = công cụ của Blogger mà copy ảnh từ nơi khác vào nên thế!
    Nhox_SoCkKent Netter thích bài viết này.
  3. Kent Netter

    Kent Netter Thành viên cấp 1

    Như anh Dư nói nhé. Bác up lại hình rồi thêm vào bằng công cụ của Blogger là được.
    ------
    Fix rồi à @@
    truyencuamua.blogspot.com
    Nhox_SoCk thích bài viết này
  4. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    2 bác Phạm Hữu Dư với Kent Tran ơi e.fix đc rồi ạ.Cho e hỏi thêm làm thế nào để xóa cái phần này ạ ? nhìn thừa quá @@
    QEIwrDh.jpg
  5. Kent Netter

    Kent Netter Thành viên cấp 1

    Bác vào "Mẫu" -> chỉnh sửa HTML -> tìm "main-nav" rồi xóa mấy cái home, about, site map... ấy đi.
    Nếu không có thì vào "Bố cục" tìm cái Widget HTML/Javascript nào ở đầu thì xóa nó đi.
    Cẩn thận coi chừng nhầm nhé, em ko thấy trực tiếp template như thế nào nên ko biết chắc chắn lắm.
  6. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    Kent Netter đây ạ @@ Xóa cả code hay chỉ xóa mấy chữ ấy thôi b @@
    Code:
    <b:includable id='main'>
              <nav class='main-nav'>
                <ul>
                  <li class='home1'><a expr:href='data:blog.homepageUrl'>Home</a></li>
                  <li><a href='#'>About</a></li>
                  <li><a href='#'>Sitemap</a></li>
                  <li><a href='#'>Contact</a></li>
                  <li><a href='#'>Forum</a></li>
  7. Kent Netter

    Kent Netter Thành viên cấp 1

    Theo đoạn code bác post thì bác chỉ vừa post 1 nửa thôi. Còn 1 nửa đoạn nữa.
    Bác xóa từ
    <nav class='main-nav'>
    ....</nav> nhé
    Nhox_SoCk thích bài viết này
  8. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    Được rồi b Kent Netter ơi ^^.Tks b nha.b cho e hỏi thêm là muốn làm cho nền blog trong suốt thì có cách nào ko ạ ?
  9. Kent Netter

    Kent Netter Thành viên cấp 1

    Nền web site thường người ta quy định bằng 1 màu nào đó chứ không ai để trong suốt đâu bác.
    Nhox_SoCk thích bài viết này
  10. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    Thế nếu e muốn đổi màu nền Blog thì làm tn ạ ? Cái tem e sd nó ko cho phép đổi @@ bác ạ :((
    Kent Netter
    Với bác cho e hỏi thêm là e muốn có cái phân trang ntn thì dùng code gì đc ạ ? e làm blog truyện ạ @@
    tiIOeeI.jpg
    Chỉnh sửa lần cuối: 26/7/15
  11. Kent Netter

    Kent Netter Thành viên cấp 1

    Mở template lên tìm đoạn giống như trong ảnh nhé:
    [​IMG]
    #f6f4f5 là mã màu bác muốn đặt làm nền. Google mã màu để biết mã của màu bác muốn chọn.
    url(....bp.blogspot.com/-7dWCTih0g-0/Va0noc9DzeI/AAAAAAAAAP4/fO9JhERz7fw/s1600/anh-hai-huoc2264.jpg) là hình ảnh bác muốn đặt làm ảnh nền.
    Nếu bác chỉ muốn đặt màu, không muốn đặt ảnh thì xóa từ:
    Chỉ cần để lại như này thôi
    Còn chia trang thì bác google: "Code phân trang cho blogger" thử xem.
    Thắc mắc gì nữa thì add friend, inbox face em. Em onl facebook nhiều hơn bên đây nên đôi khi trả lời chậm.
    Chỉnh sửa lần cuối: 26/7/15
    Nhox_SoCk thích bài viết này
  12. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    Để e test thử ^^.tks b nhiệt tình chỉ giáo :D e add fr rồi đấy ạ @@ Có gì nhờ b giúp đỡ :D
    Ak mà b Kent Netter ơi.Cái đấy là ảnh nền đằng sau e thay đc rồi.Ý e là cái nền trắng trắng ấy ạ @@
  13. Kent Netter

    Kent Netter Thành viên cấp 1

    Cái đó bác ngâm cứu thêm HTML & CSS để sửa nhé.
    Với kinh nghiệm học HTML, CSS ...... 1 ngày của em thì em hết khả năng rồi.
    Nhox_SoCk thích bài viết này

Ủng hộ diễn đàn