Tiện ích hộp nội dung trước blog với hiệu ứng cực cool bằng JQuery

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Hôm nay mình sẽ giúp các bạn tạo một box nội dung xuất hiện trước blog với hiệu ứng rất đẹp mắt. Hiệu ứng này chúng ta sử dụng JQuery, ban đầu bạn sẽ nhìn thấy các có một số mẫu hình vuông nằm rải rác ở đầu trang blog/web, sau khi bạn click vào một thư mục trong menu thì các hộp nhỏ này sẽ tập hợp lại thành nội dung hiển thị trước blog/web của của bạn. Để thấy rỏ và trực quan hơn, bạn hãy click demo để xem thêm và bây giờ mình sẽ hướng dẫn các bước thự hiện thủ thuật này.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.jspContainer{
overflow: hidden;
position: relative;
}
.jspPane{
position: absolute;
}
.jspVerticalBar{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: #000;
}
.jspHorizontalBar{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #000;
}
.jspVerticalBar *,.jspHorizontalBar *{
margin: 0;
padding: 0;
}
.jspCap{
display: none;
}
.jspHorizontalBar .jspCap{ float: left;
}
.jspTrack{
background: #000033; /*màu của thanh scroll*/
position: relative;
}
.jspDrag{
background: #ccc; /*màu của nút scroll*/
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.mb_pattern div{
position:fixed;
width:50px; /*độ rộng của các hộp nhỏ ở đầu trang*/
height:50px; /*chiều cao của các hộp nhỏ ở đầu trang*/
background:#000; /*màu của các hộp nhỏ ở đầu trang*/
z-index:10;
}
.mb_menu{
position:fixed;
top:154px; /*cách trên của các menu*/
left:0px;
z-index:11;
}

.mb_menu a{
display: block;
margin-left: -2px;
width: 80px; /*độ rộng của các menu*/
font-size:14px;
background-color:#cfcfcf;
background-position:center center;
border:1px solid #AFAFAF;
color:#000;
line-height:1.4em;
text-align:center;
text-transform:uppercase;
outline:none;
padding:15px 5px 15px 5px;
font-weight:bold;
text-decoration:none;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
.mb_menu a:hover{
color:#000033;
background-color:#fff;
}
.mb_content_wrapper{
background:#505152; /*màu nền của hộp chứa nội dung*/
border:5px solid #7f8183;
width:400px; /*độ rộng box nội dung*/
height:350px; /*chiều cao của box nội dung*/
position:absolute;
top:154px;
left:300px;
z-index:4;
display:none;
color:#fff;
}
span.mb_close{
position:absolute;
top:-9px;
right:-9px;
width:16px;
height:16px;
cursor:pointer;
background:transparent url(https://lh3.googleusercontent.com/_BTztXRwC9ik/TZbUGs-eDsI/AAAAAAAAHo4/Q3ikg8E9nwE/cancelt.png) no-repeat top right;
opacity:0.7;
}
span.mb_close:hover{
opacity:1.0;
}
.mb_content{
padding:5px 8px 8px 8px;
display:none;
}
.mb_content h2{
color:#000; /*màu tiêu đề trong box*/
text-shadow:0px 0px 1px 1px #fff;
font-size:15px;
background:#ccc;
padding:3px 0px 3px 0px;
text-align:center;
margin-bottom:4px;
}
.mb_content_inner{
line-height:1.4em;
height:305px;
outline: none;
}
.mb_content_inner p{
padding:0px 0px;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div id="mb_pattern" class="mb_pattern"></div>
<div id="mb_menu" class="mb_menu">
<a href="#" data-speed="1000" data-easing="easeOutBack">Giới thiệu</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Đăng ký RSS</a>
<a href="#" data-speed="1000" data-easing="easeOutBack">Logo website</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Truyện cười</a>
</div>

<div id="mb_content_wrapper" class="mb_content_wrapper">
<span class="mb_close"></span>
<div class="mb_content">
<h2>Giới thiệu</h2>

<div class="mb_content_inner">
<p>
Nội dung của phần menu thứ nhất
</p>

</div>
</div>

<div class="mb_content">
<h2>Đăng ký RSS</h2>
<div class="mb_content_inner">

<p>
Nội dung của phần menu thứ 2
</p>

</div>
</div>
<div class="mb_content">
<h2>Logo website</h2>

<div class="mb_content_inner">

<p>
Nội dung của phần menu thứ 3
</p>

</div>
</div>

<div class="mb_content">
<h2>Truyện cười</h2>
<div class="mb_content_inner">

<p>
Nội dung của phần menu thứ 4
</p>

</div>
</div></div>

» Chỉnh sửa code:
- Phần màu tím ở trên là tên của các menu hiển thị, bạn có thể thay chúng thành các menu bạn muốn hiển thị, tương ứng với các tiêu đề của hộp box (phần h2). Nếu bạn không muốn hiển thị tiêu đề thì bạn có thể xóa bỏ thẻ h2 ở trong phần mb_content.
- Phần màu đỏ là nơi chứa các nội dung tương ứng với từng menu của bạn, nội dung này sẽ ẩn đi và chúng sẽ hiện ra khi bạn click vào các menu tương ứng.

8. Cuối cùng save tiện ích lại là xong

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

Tham khảo tympanus.net