TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

Share:
TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

Hồng Hải đã đăng Thứ Bảy, 4 tháng 11, 2017
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • Chào Các Bạn Thì Hôm Nay Mình Xin Share Cách TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB ...

    CÁCH THỰC HIỆN

    Bước 1: Vào Blogger ->  Chủ Đề -> Chỉnh Sửa HTML
    Bước 2: Các Bạn Chèn Đoạn Code Dưới Này Trước Thẻ ]]></b:skin>
    .tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin:auto;display:table;overflow:hidden}
    .tabs-st{background:#eee;display:block;height:45px}
    .tabs:after{content:&#39;&#39;;display:table;clear:both}
    .tabs input[type=radio]{display:none}
    .tabs label{display:table-cell;float:left;width:25%;color:#555;font-size:19px;font-weight:400;text-align:center;cursor:pointer;transition:all .3s;height:45px;line-height:45px;text-transform:uppercase;margin-right:10px;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
    .more-tabs{width:21.1%;float:right;height:45px;margin:-45px 0 0;line-height:45px;font-size:25px;text-align:center;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
    .more-tabs a{color:#555}
    .more-tabs a:hover{color:#52537d}
    .tabs label span{display:inline-block}
    .tabs label i{margin-right: 5px;height:45px;line-height:45px}
    .tabs label:hover{color:#52537d}
    .tabs label:focus{color:#fff}
    .tab-content{display:none;width:100%;float:left}
    .tab-content *{-webkit-animation:showx .5s ease-in-out;-moz-animation:showx .5s ease-in-out;animation:showx .5s ease-in-out}
    .tabs [id^=&quot;tab&quot;]:checked + label{color:#fff;background:#52537d}
    #tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block;background:#eee}
    @media screen and (max-width:768px){
    .tabs label{width:23.4%}
    .tabs label span{display:none}
    }
    .widget-home img{float:left;clear:both;object-fit:cover;transition:.33s;margin:0 0 6px 0}
    .widget-home img:hover{-webkit-filter:brightness(80%)}
    .widget-home{overflow:hidden}
    #widget-00 .featuredPost a:hover {color:rgba(234, 25, 25, 0.77)}
    #widget-0 .featuredPost a:hover {color:rgb(255, 153, 0)}
    .widget-home a{color:#555;text-decoration:none;line-height: normal;}
    .widget-home a:hover{color:#0087be}
    .widget-homewrap{margin-top:10px;overflow:hidden}
    Bước 3: Đặt đoạn Javascript dưới đây trên </head>
    <script type='text/javascript'>//<![CDATA[ // blogspot function removeHtmlTag(t,e){for(var s=t.split("<"),i=0;i<s.length;i++)-1!=s[i].indexOf(">")&&(s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length));return s=s.join(""),s=s.substring(0,e-1)}function showrecentposts1(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts5<=t.feed.entry.length?maxpost=numposts1:maxpost=t.feed.entry.length;for(var e=0;e<maxpost;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}if(0==e){var u='<div class="widgetsplitone_left"><a href="'+r+'"><img width="100%" height="260px" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';document.write(u)}if(e>0&&e<maxpost){var u='<a href="'+r+'"><img class="imagewidgetthumb wp-post-image" height="80" src="'+img[e]+'" width="120"/></a><div class="featuredPost"><a href="'+r+'">'+l+"</a></div>";document.write(u)}j++}document.write("</div>")}function showrecentposts3(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;10>e;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<li><a href="'+r+'">'+l+"</a></li>";document.write(u),j++}}function showrecentposts6(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;e<numposts;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<a href="'+r+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div>';document.write(u),j++}}imgr=new Array,imgr[0]="#",showRandomImg=!0,aBold=!0,summaryPost=170,summaryPost1=80,summaryTitle=15,numposts=1,numposts1=5,numposts2=4,numposts3=6,numposts4=1,numposts5=6,numposts6=10,numposts7=10,numposts8=6;eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K(x(p,a,c,k,e,d){e=x(c){u c};A(!\'\'.C(/^/,J)){D(c--){d[c]=k[c]||c}k=[x(e){u d[e]}];e=x(){u\'\\\\w+\'};c=1};D(c--){A(k[c]){p=p.C(M I(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}u p32|34|||||||||||35|36|56|http|www|title|31|33|58|113|103|102|90|84|105|100|98|97|96|99|52|94|87|88|89|visible|93|95|location|91'.split('|'))) //]]></script>
    Bước 4: Chèn đoạn code này dưới thẻ <b:includable id='main' var='top'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='tabs'>
    <div class='tabs-st'>
    <input checked='' id='tab1' name='tabs' type='radio'/>
    <label for='tab1'><i class='fa fa-picture-o'/><span>ẢNH BÌA</span>
    </label>
    <input id='tab2' name='tabs' type='radio'/>
    <label for='tab2'><i class='fa fa-facebook-official'/><span>Facebook</span>
    </label>
    <input id='tab3' name='tabs' type='radio'/>
    <label for='tab3'><i class='fa fa-html5'/><span>BLOGSPOT</span>
    </label>
    <!-- Tab 1 -->
    <div class='tab-content' id='tab-content1'>
    <span class='more-tabs'><a href='/search/label/PSD?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
    <div class='widget-home'>
    <div class='widget-homewrap'>
    <div class='widget-homesplitone'>
    <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/PSD?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
    </div>
    </div>
    </div>
    </div>
    <!-- Tab 2 -->
    <div class='tab-content' id='tab-content2'>
    <span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Facebook?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
    <div class='widget-home'>
    <div class='widget-homewrap'>
    <div class='widget-homesplitone'>
    <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Facebook?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
    </div>
    </div>
    </div>
    </div>
    <!-- Tab 3 -->
    <div class='tab-content' id='tab-content3'>
    <span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
    <div class='widget-home'>
    <div class='widget-homewrap'>
    <div class='widget-homesplitone'>
    <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Blogspot?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </b:if>
    Tùy biến lại sao cho phù hợp với blog của bạn
     Chúc các bạn thành công!!!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    47 nhận xét:

    1. Thích cái màu ở Blog này lắm bác ơi :D Hài Hòa

      Trả lờiXóa
    2. Ok cảm ơn bác nhé. Sẵn tiện cho tui nói thêm câu này: Template đẹp lắm luôn đấy bạn :D

      Trả lờiXóa
      Trả lời
      1. Sao mình làm mà cái phần Blogspot nó không hiện bài đăng ? Bạn giúp mình với :((

        Xóa
      2. bạn có thay đúng k hay set quyền admin mình làm giúp cho gmail:honghai251325@gmail.com

        Xóa
      3. Mình làm đúng luôn đó bạn.

        Xóa
      4. set quyền admin đi bạn

        Xóa
    3. Tìm mãi giờ mới thấy bài này, cảm ơn bạn nhiều nhé!
      Blog bạn đẹp lắm.

      Trả lờiXóa
    4. rảnh thì hướng dẫn chuyển cột này http://sv1.upsieutoc.com/2017/11/07/imagee13b72437dadd567.png sang ntn đi http://sv1.upsieutoc.com/2017/11/07/image2ff3c681aeed4532.png

      Trả lờiXóa
      Trả lời
      1. Chèn cái này: #Stats1:hover h2{background:#069999;color:#fff} trước thẻ ]]></b:skin> nha bạn.

        Xóa
      2. Thay #069999 thành mã màu bạn muốn nhé.

        Xóa
      3. ý tui là từ bình th sang có đoạn cuối bị cắt chéo ấy

        Xóa
    5. Đẹp Lắm Bạn ! Cảm Ơn bạn <3

      Trả lờiXóa
    6. Chỉnh từ màu trắng sang màu khác ở đâu bạn

      Trả lờiXóa
      Trả lời
      1. bạn muốn chuyển màu trắng ở phần nào

        Xóa
      2. Chuyển màu trắng thành màu tím giống như của bạn khi nhấn sang tab khác ấy!

        Xóa
      3. tìm background:#52537d xong đổi

        Xóa
    7. sao mình làm mà nó ko hiện bài đăng

      Trả lờiXóa
      Trả lời
      1. Bạn làm ko đúng link của nhãn nhé.

        Xóa
      2. Mình đã thêm honghai251325@gmail.com vào admin rồi, bạn chỉnh giúp mình với

        Xóa
      3. Để Hải làm nha bạn.

        Xóa
      4. mình làm y chang trên code, và label mình cũng y chang trên luôn, nó ko hiện

        Xóa
    8. Temp không có thẻ < / body > thì sao bác

      Trả lờiXóa
    9. . Vào config giùm mình với bạn ơi. mình làm theo các bước rồi mà nó k hiện ảnh thumbail

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!