Chào các bạn, trong bài trước mình có hướng dẩn các bạn tạo Slide Label khá là đẹp lấy từ bên BSW, trong hôm nay mình làm tiếp style 2, hiệu ứng trượt rất là ngầu luôn :))
Slide Chuyên Mục Tuyệt Đẹp (Style 2)

DEMO

Các Bước Thực Hiện

Bước 1: Chèn Đoạn Code bên dưới vào trước ]]></b:skin>
/* Chuyên mục home */
.chuyenmuc   { background: #fff;
    padding: 25px 0;
}
.chuyenmuc-home{
 width: 100%;
 max-width: 1200px;
 height: 250px;
 overflow: hidden;
 margin:auto;
}
.chuyenmuc-home ul{
 width: 100%;
 display: table;
 table-layout: fixed;
 margin: 0;
 padding: 0;
}
.chuyenmuc-home ul li{
 display: table-cell;
 vertical-align: bottom;
 position: relative;
 width: 16.666%;
 height: 250px;
 background-repeat: no-repeat;
 background-position: center center;
 transition: all 500ms ease;
}
.chuyenmuc-home ul li div{
 display: block;
 overflow: hidden;
 width: 100%;
}
.chuyenmuc-home ul li div a{
 display: block;
 height: 250px;
 width: 100%;
 position: relative;
 z-index: 3;
 vertical-align: bottom:
 padding: 15px 20px;
 box-sizing: border-box;
 color: #fff;
 text-decoration: none;
 transition: all 200ms ease;
}
.chuyenmuc-home ul li div a *{
 opacity: 0;
 margin: 0;
 width: 100%;
 text-overflow: ellipsis;
 position: relative;
 z-index: 5;
 white-space: nowrap;
 overflow: hidden;
 -webkit-transform: translateX(-20px);
 transform: translateX(-20px);
 -webkit-transition: all 400ms ease;
 transition: all 400ms ease;
}
.chuyenmuc-home ul li div a h2{
 text-overflow: clip;
 font-size: 24px;
 text-transform: uppercase;
 margin-bottom: 2px;
 top: 160px;
 margin-left: 20px;
}
.chuyenmuc-home ul li div a p{
 top: 160px;
 font-size: 16px;
 margin-left: 20px;
}
.chuyenmuc-home ul li:nth-child(1){
 background-image: url("https://lh6.googleusercontent.com/proxy/_WH_hWmq4bYcEB2u0ZVvcCmQEJLTtGQB1kprV1zIzZpBXnJehMnAaVbnWtERwHT6l2M=s0-d");
}
.chuyenmuc-home ul li:nth-child(2){
 background-image: url("https://lh4.googleusercontent.com/proxy/VPvhCU98_Vaalh4y4UCUQmML3Kmrz8JCksWufKZcrXP0d4EtEXHKmlbTWThewBmqAIk=s0-d")
}
.chuyenmuc-home ul li:nth-child(3){
 background-image: url("https://lh5.googleusercontent.com/proxy/mTsWemJPhBCzFnvW4yUjLZLgN745UIX0oH5P-T0HolyaZ69GhaBXtCPUrBg4zK6nK7Y=s0-d");
}
.chuyenmuc-home ul li:nth-child(4){
 background-image: url("https://lh5.googleusercontent.com/proxy/GKTN2zaOAHQ58_zTSFme9ErNWNuYjqpfdQSC8KyJw4n6kHx6Onv7AMLQSHwJOh0tQfo=s0-d");
}
.chuyenmuc-home ul li:nth-child(5){
 background-image: url("https://lh4.googleusercontent.com/proxy/VI2-lN1cnor99rWUT1fwbbm_EKY1i01aA2OQINZxbaU7xNKkBI7OiFuP_gnsYul4DN0=s0-d");
}
.chuyenmuc-home ul:hover li{
 width: 8%;
}
.chuyenmuc-home ul:hover li:hover{
 width: 40%;
}
.chuyenmuc-home ul:hover li:hover a{
 background: rgba(0, 0, 0, 0.4);
}
.chuyenmuc-home ul:hover li:hover a *{
 opacity: 1;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
Bước 2: Chèn Đoạn Code sau vào nơi bạn muốn hiển thị, nên để trên bài viết hoặc dưới menu
<div class="chuyenmuc">
<div class="chuyenmuc-home">
<ul>
<li>
<div>
<a href="/search/label/Blogger" onclick="document.getElementById('id01').style.display='block'" target="_blank">
<h2>Blogger</h2>
<p>Thủ thuật Blogger</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Facebook" onclick="document.getElementById('id02').style.display='block'" target="_blank">
<h2>Facebook</h2>
<p>Thủ thuật Facebook</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Photoshop" onclick="document.getElementById('id03').style.display='block'" target="_blank">
<h2>Photoshop</h2>
<p>Thủ thuật Photoshop</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Youtube" onclick="document.getElementById('id04').style.display='block'" target="_blank">
<h2>Youtube</h2>
<p>Thủ thuật Youtube</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Windows" onclick="document.getElementById('id05').style.display='block'" target="_blank">
<h2>Windows</h2>
<p>Thủ thuật Windows</p>
</a>
</div>
</li>
</ul>
</div>
</div>
Bước 3: Lưu Template Và Tận Hưởng

Lời Kết

Như vậy là mình vừa Hướng dẩn cho các bạn xong cách tạo slide chuyên mục tuyệt đẹp (style 2), các bạn hãy chỉnh những từ mình in đậm trong code lại thành đúng đường link trỏ về các chuyên mục của blog các bạn nhé, nếu có gì thắc mắc hãy để lại comment bên dưới, mình sẽ trả lời nhanh nhất có thể cho các bạn!
Chúc các bạn thành công!
view-source: khophimplus.net
- - 81 bình luận
CHUYÊN MỤC

BÌNH LUẬN (81)

  1. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  2. Đang cần tiện ích này. cảm ơn Star Cường IT :(

    Trả lờiXóa
  3. Anh cường unl hộ em FAQ MD vs

    Trả lờiXóa
  4. Anh cường unl hộ em FAQ MD vs

    Trả lờiXóa
    Trả lời
    1. Em inbox facebook anh ấy : https://www.facebook.com/pnn1999

      Xóa
  5. Tôn trọng người làm TEMP đi bạn :)

    Trả lờiXóa
    Trả lời
    1. Tôn trọng cái gì bác ? cái này e thấy bên Star Bình cũng có mà

      Xóa
    2. Code chính k phải từ thằng Bình đâu bác. Hôm đó nhớ k nhầm lúc đêm e có qua blog nó khi mà nó còn dùng template Vũ Tiến Anh ý thì nó view source từ 1 blog chuyên về game, temp đen xì. Khi đó nó còn chưa sửa link nên e biết đc blog kia :))

      Xóa
    3. :v Thế thì biết phải ghi nguồn ai bây giờ =))

      Xóa
    4. Theo e thì view source từ đâu thì ghi nguồn chỗ đó. Trc giờ vẫn thế mà. Vì mình cũng k biết đc cái nào là cái thứ nhất mà. Vs lại phải biết CSS, HTML, Javascript mới view ra đc. Cũng là công sức mình r.

      Xóa
    5. người làm ở đây là ai? :))

      Xóa
    6. lấy từ bên này http://bns.khophimplus.net/ về edit nhé :))

      Xóa
    7. https://testtemplatesbit.blogspot.com/
      gốc đây nhé :))

      Xóa
    8. Khi nào wee2k vô nhận đã rồi mới thay nguồn :)) Tạm thời éo tin vào m được :v

      Xóa
    9. Code ko phải của mình. Mình viewsource từ Temp của STB / về chỉnh lại Class. Mình thấy bạn lấy y nguyên bên temp mình mà ko đề cập gì đến nguồn nên mới nói !

      Xóa
    10. Lúc bạn viết bài nên viết là CHIA SẺ chứ đừng nói mình làm !

      Xóa
    11. Mình chả nói là ai làm hay là chia sẽ gì cả, một câu đơn giản là view-source từ Wee2k.

      Xóa
    12. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    13. Ăn Nói cho lịch sự nhé :) Không t xóa comment đấy.

      Xóa
  6. Cập nhật rồi tiếp à ! Wow pải test bênh blog phụ mới được, đẹp phết đó star cường ơi. À mà quên nhớ ghé thăm trang web mình nhé ! có bài viết mới nè : http://anonshas.blogspot.com/2017/09/tao-khung-tac-gia-cuc-ep-cho-blogspot.html

    CẢM ƠN STAR CƯỜNG nhiều hehe.

    Trả lờiXóa
    Trả lời
    1. Cảm ơn em! Lần sau đừng có trỏ link ngoài vào bài viết nhé, lần thứ nhất nên a tạm thời để vậy, lần sau anh xóa đấy!

      Xóa
  7. đặt liên kết với Cường ơi

    Trả lờiXóa
  8. Trả lời
    1. Nguồn cái gì? Bài này t tự viết, câu từ của t, còn code thì view-source: Wee2k có ghi rõ dưới góc, không biết thì đừng có nói nhảm :)

      Xóa
    2. lấy từ trang này http://bns.khophimplus.net/ về tao edit nhé :)|)

      Xóa
    3. Edit lại :) thế chả nhẻ wee2k lấy của m :))

      Xóa
    4. ông an vũ chỉnh lại id, class :))

      Xóa
  9. ước 1 người share cái avt có tên mình víp như của văn vỹ

    Trả lờiXóa
    Trả lời
    1. Là sao nhỉ :)) Mình chưa hiểu ý bạn lắm :v

      Xóa
    2. có link fb ko e xin đi rồi em đưa hình cho xem nè

      Xóa
  10. Cường ơi ra bài nhanh thế này biết xài cái nào bây h hả :(

    Trả lờiXóa
    Trả lời
    1. :v Thấy cái nào đẹp thì cứ triển thôi =)) còn không thì chọn đại đi.

      Xóa
    2. Xài TOP 1 cái - BOTTOM 1 cái - qá chuẩn :v :v

      Xóa
  11. có link fb ko đưa em em send hình cho xem nè cái psd avt đó đẹp mà xin ai cũng ko cho :(

    Trả lờiXóa
  12. Toàn đi cop về ghi :)) và chả thaasyc ái nguồn nào :)

    Trả lờiXóa
    Trả lời
    1. Nguồn ? Nói mình nghe nguồn chổ nào :)

      Xóa
    2. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    3. Nguồn cái gì? Cho xin cái bài viết, còn code thì t lấy từ bên Wee2k về viết bài, chả liên quan gì đến Star Bình ở đây.

      Xóa
    4. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    5. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    6. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    7. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    8. Tự đọc và tự hiểu nhé, bài viết bên TSM Blogger :
      http://www.tsmblogger.com/2017/09/van-de-ban-quyen-may-ngay-nay.html

      Xóa
    9. hiểu cái gì? bọn mày chôm :)

      Xóa
    10. Chôm cái gì ? Cái đó từ blog nước ngoài, m cũng đem về edit vài cái rồi nhét vô blog thôi :D còn cái này t xem từ đâu t viết ở đó.

      Xóa
  13. Có cái nguồn mà mấy chú tranh cãi vui nhỉ. Klq chứ Niệm đẹp trai đang xài cái tut này thấy rất kích thích nhé! :v

    Trả lờiXóa
    Trả lời
    1. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
  14. - em set admin r mà sao vẫn chưa thấy ad hồi ậm ạ

    Trả lờiXóa
  15. - em set admin r mà sao vẫn chưa thấy ad hồi ậm ạ

    Trả lờiXóa
    Trả lời
    1. starbaoit.ml ! hởm e có nhờ ad vào xem vị trí chèn code dưới menu đấy ạ

      Xóa
    2. Anh thấy em chưa set a lên admin ?

      Xóa
    3. Cái blog của em bị xung đột gì hay sao ấy, xóa 1 đoạn code là tự bay qua template khác :v

      Xóa
  16. Con lạy mẹ, code của con mà ghi nguồn của trang khác. Code chính bns.khophimplus.net nhé! Nó lấy của con về đấy!

    Trả lờiXóa
    Trả lời
    1. ừ, nhìn kĩ cái mục nó giống :v

      Xóa
    2. Rồi man :)) Đã sửa nguồn, tại nhiều nơi có quá nên không biết ghi ở đâu.

      Xóa
  17. Đang cần may quá tìm đc, thanks bạn nhoa :)

    Trả lờiXóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé