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

(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>
<script src="http://data-traidatmui.appspot.com/scripts/Jquery.min.1.5.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery.transform.0.9.3.min.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery-ui.min.1.8.11.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery.jscrollpane.min.2.0.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/box_content.js" type="text/javascript"></script>

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

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

5/14/2011 07:42:00 SA Trả lời

Cuoilon, nặng kí gớm

5/14/2011 10:32:00 SA Trả lời

Bác chủ blog có thể hướng dẫn mình chèn emoticons vào blog như blog của bác ko? hehehe

Admin
5/14/2011 08:00:00 CH Trả lời

Bạn theo dõi thời gian tới mình sẽ post bài hướng dẫn nhé

1/16/2012 10:37:00 CH Trả lời

tại sao mình làm thử thì thấy nó chỉ hiện menu chứ chẳng thấy hiệu ứng gì cả

Admin
1/16/2012 11:13:00 CH Trả lời

@ Văn Khương: Hiệu ứng là khi bạn click vào các mục đó nó sẽ hiển thị ra một box.

1/17/2012 11:51:00 CH Trả lời

Mình thử rồi nhưng không được.Đưa chuột vào đó thì nó hiện link abc.blogspot.com/# chuws không phải http://www.blogger.com/post-create.g?blogID=74399552567309656# giống như deno

Nặc danh
3/07/2012 09:58:00 CH Trả lời

https://lh3.googleusercontent.com/-JFWpYDYqmNA/TkfWGsuBO6I/AAAAAAAAAnI/ndIT8PMoYZU/000127-medium.gif

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang