• Privacy Policy
Tuong.Me
  • Thủ thuật
    • Thủ thuật Android
    • Thủ thuật Blogspot
    • Thủ thuật Facebook
    • Thủ thuật Internet
    • Thủ thuật máy tính
      • Thủ thuật Ubuntu
      • Thủ thuật Windows
    • Thủ thuật WordPress
  • FIFA
    • FIFA 14
    • FIFA 16
    • FIFA 18
    • FIFA 19
    • FIFA 20
  • PES
    • PES 2013
      • Patch PES 2013
    • PES 2016
      • Patch PES 2016
    • PES 2017
      • Patch PES 2017
      • PES 2017 Ballpack
      • PES 2017 Bootpack
      • PES 2017 Facepack
      • PES 2017 Gameplay
      • PES 2017 Graphic
      • PES 2017 Kitpack
      • PES 2017 Stadium
    • PES 2018
      • Patch PES 2018
      • PES 2018 Facepack
    • PES 2019
      • Patch PES 2019
      • PES 2019 Bootpack
      • PES 2019 Facepack
      • PES 2019 Kitpack
    • PES 2020
      • Patch PES 2020
      • PES 2020 Bootpack
      • PES 2020 Facepack
      • PES 2020 Graphics
      • PES 2020 Option File
      • PES 2020 Tools
    • PES 2021
      • PES 2021 Balls
      • PES 2021 Facepack
      • PES 2021 Option File
      • PES 2021 Patch
      • PES 2021 Stadium
      • PES 2021 Tools
    • PES 6
      • Patch PES 6
  • Phần mềm
    • Phần mềm Android
    • Phần mềm Windows
    • Sử dụng phần mềm
  • Hackintosh
  • Top 10
  • MMO
No Result
View All Result
  • Thủ thuật
    • Thủ thuật Android
    • Thủ thuật Blogspot
    • Thủ thuật Facebook
    • Thủ thuật Internet
    • Thủ thuật máy tính
      • Thủ thuật Ubuntu
      • Thủ thuật Windows
    • Thủ thuật WordPress
  • FIFA
    • FIFA 14
    • FIFA 16
    • FIFA 18
    • FIFA 19
    • FIFA 20
  • PES
    • PES 2013
      • Patch PES 2013
    • PES 2016
      • Patch PES 2016
    • PES 2017
      • Patch PES 2017
      • PES 2017 Ballpack
      • PES 2017 Bootpack
      • PES 2017 Facepack
      • PES 2017 Gameplay
      • PES 2017 Graphic
      • PES 2017 Kitpack
      • PES 2017 Stadium
    • PES 2018
      • Patch PES 2018
      • PES 2018 Facepack
    • PES 2019
      • Patch PES 2019
      • PES 2019 Bootpack
      • PES 2019 Facepack
      • PES 2019 Kitpack
    • PES 2020
      • Patch PES 2020
      • PES 2020 Bootpack
      • PES 2020 Facepack
      • PES 2020 Graphics
      • PES 2020 Option File
      • PES 2020 Tools
    • PES 2021
      • PES 2021 Balls
      • PES 2021 Facepack
      • PES 2021 Option File
      • PES 2021 Patch
      • PES 2021 Stadium
      • PES 2021 Tools
    • PES 6
      • Patch PES 6
  • Phần mềm
    • Phần mềm Android
    • Phần mềm Windows
    • Sử dụng phần mềm
  • Hackintosh
  • Top 10
  • MMO
No Result
View All Result
Tuong.Me
No Result
View All Result
Home Thủ thuật

Code Tạo Recent Post dạng Tab đẹp cho Blogspot (Blogger)

Nguyễn Tường by Nguyễn Tường
December 30, 2016
in Thủ thuật, Thủ thuật Blogspot
Reading Time: 5 mins read
0
0
SHARES
108
VIEWS
Share on FacebookShare on Twitter

Có thể bạn thích

No Content Available

Bài viết chia sẻ code và hướng dẫn Thêm tiện ích bài viết gần đây (Recent Posts) theo dạng Tab đẹp mắt cho Blogspot (Blogger).

Code Tạo Recent Post dạng Tab đẹp cho Blogspot (Blogger)

Một Blog thiết kế đẹp, bố cục gọn gàng thì sẽ lấy được cảm tình từ các khách hàng truy cập và họ sẽ muốn truy cập tiếp vào lần sau. Còn nếu blog có bố cục không hài hòa, thời gian tải trang lâu sẽ khiến họ không muốn truy cập vào các lần tiếp theo.

Để giúp các bạn làm đẹp cho trang chủ blog của mình, hôm nay Tuong.Me xin chia sẻ cho các bạn đoạn code tạo Recent Post (bài viết mới nhất) theo dạng tab đẹp mắt và gọn gàng cho Blogger – Blogspot. Khi sử dụng đoạn code này khách hàng có thể di chuyển qua lại giữa các chuyên mục dễ dàng thông qua việc click chuột vào các tab.

Mục Lục

  1. Có thể bạn thích
  2. Các bước thực hiện thêm tiện ích bài viết gần đây theo dạng Tab đẹp cho Blogspot

Các bước thực hiện thêm tiện ích bài viết gần đây theo dạng Tab đẹp cho Blogspot

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trước thẻ ]]></b:skin>.

/* Recent Post Label */
.recent-labpost{margin:20px;}
.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}
.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}
.rctab-button > span.active:before{content:'';top:0;opacity:1}
.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto}
.rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;}
.rctab-item:hover{border:1px solid rgba(0,0,0,0.1);}
.rctab-item-inner{padding:10px}
.rctab-item img{float:left;width:120px;height:auto;}
.rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%}
.rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c}
.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}
.hide-load .loader{opacity:0}
.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}
.enter{top:0;opacity:1}
.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}
.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}
.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}
.squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}
.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}
.squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}
.squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}
@media screen and (max-width:768px) {
.rctab-item{float:left;width:100%;}
.rctab-item {margin:10px auto;}}

Bước 2: Tiếp tục tìm đến thẻ </head> và chèn đoạn code sau vào phía trước nó.

<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))});
//]]>
</script>

Thay đổi đoạn màu đỏ thành số bài viết mà bạn muốn hiển thị.

Bước 3: Chèn đoạn mã dưới đây vào bất cứ nơi đâu bạn muốn hiển thị. Đoạn code phải nằm trong cặp thẻ <body></body> của Template Blog bạn.

<div class='recent-labpost' data-label='[&quot;NAME LABEL&quot;,&quot;NAME LABEL&quot;,&quot;NAME LABEL&quot;,&quot;NAMA LABEL&quot;,&quot;NAME LABEL&quot;]'/>

Thay đổi NAME LABEL thành tên nhã bạn muốn hiển thị. Lưu ý phân biệt chữ viết hoa và chữ viết thường.



Demo
Click here

Chúc các bạn thành công!

Tham khảo: arlinadzgn.com

Previous Post

Đặt lịch tự động dọn dẹp thùng rác trên Windows 10, 7, 8.1

Next Post

10 mini game thư giãn của Google giúp giải trí cực tốt

Nguyễn Tường

Nguyễn Tường

Xem thêm bài viết

Cài đặt và kích hoạt bản quyền Office 2021 vĩnh viễn

Cài đặt và kích hoạt bản quyền Office 2021 vĩnh viễn

February 12, 2022
Hướng dẫn kích hoạt bản quyền Office 365 online vĩnh viễn mới nhất 2019

Hướng dẫn kích hoạt bản quyền Office 365 online vĩnh viễn mới nhất 2022

February 10, 2022
Cách nâng cấp Win 11 từ Win 10 không mất dữ liệu

Hướng dẫn cài Win 11 bằng USB

January 11, 2022
Hướng dẫn cách tạo USB cài Win 11,  Win 10 chuẩn UEFI và Legacy

Hướng dẫn cách tạo USB cài Win 11, Win 10 chuẩn UEFI và Legacy

January 11, 2022
Cách cài Ubuntu song song Win 11, 10, 7, 8.1 mới nhất 2022

Cách cài Ubuntu song song Win 11, 10, 7, 8.1 mới nhất 2022

January 10, 2022
Top 3 phần mềm mới nhất không trả phí vào website bị chặn 2

Top 3 phần mềm mới nhất không trả phí vào website bị chặn

December 25, 2021
Next Post
10 mini game thư giãn của Google giúp giải trí cực tốt

10 mini game thư giãn của Google giúp giải trí cực tốt

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tìm kiếm:

No Result
View All Result








GIỚI THIỆU

Tuong.Me là blog chia sẻ tất cả những gì mình biết đến mọi người. Bạn có thể tìm thấy Patch PES từ PES 2013, PES 2016, PES 2017, PES 2018 cho đến PES 2022. Và bạn cũng có thể tìm thấy các thủ thuật máy tính Windows, Ubuntu, thủ thuật facebook, thủ thuật internet, thủ thuật Android. Ngoài ra các tài liệu, đề thi thử THPT Quốc Gia các môn Toán, Lý,Hóa,Sinh, Văn, Sử, Địa cũng được chia sẻ miễn phí trên blog này.

LIÊN HỆ

  • Email: contact@tuong.me
  • Facebook: facebook.com/tuong.nguyen.919
  • Twitter: twitter.com/tuongs2it

BÌNH LUẬN MỚI NHẤT

  • Hiếu on PES 2020 SmokePatch20 v4 20.4.2
  • Hoang on Option File cập nhật chuyển nhượng PES 2021 Smoke Patch (13/02/2022)
  • Storm on QPATCH PES 2013 SEASON 2021-2022 – Patch PES 2013 mới nhất
  • Chính sách bảo mật
  • Chuyển hướng
  • Home 1
  • Privacy Policy

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Thủ thuật
    • Thủ thuật Android
    • Thủ thuật Blogspot
    • Thủ thuật Facebook
    • Thủ thuật Internet
    • Thủ thuật máy tính
      • Thủ thuật Ubuntu
      • Thủ thuật Windows
    • Thủ thuật WordPress
  • FIFA
    • FIFA 14
    • FIFA 16
    • FIFA 18
    • FIFA 19
    • FIFA 20
  • PES
    • PES 2013
      • Patch PES 2013
    • PES 2016
      • Patch PES 2016
    • PES 2017
      • Patch PES 2017
      • PES 2017 Ballpack
      • PES 2017 Bootpack
      • PES 2017 Facepack
      • PES 2017 Gameplay
      • PES 2017 Graphic
      • PES 2017 Kitpack
      • PES 2017 Stadium
    • PES 2018
      • Patch PES 2018
      • PES 2018 Facepack
    • PES 2019
      • Patch PES 2019
      • PES 2019 Bootpack
      • PES 2019 Facepack
      • PES 2019 Kitpack
    • PES 2020
      • Patch PES 2020
      • PES 2020 Bootpack
      • PES 2020 Facepack
      • PES 2020 Graphics
      • PES 2020 Option File
      • PES 2020 Tools
    • PES 2021
      • PES 2021 Balls
      • PES 2021 Facepack
      • PES 2021 Option File
      • PES 2021 Patch
      • PES 2021 Stadium
      • PES 2021 Tools
    • PES 6
      • Patch PES 6
  • Phần mềm
    • Phần mềm Android
    • Phần mềm Windows
    • Sử dụng phần mềm
  • Hackintosh
  • Top 10
  • MMO

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.