» » Thêm tính năng kéo thả và sắp xếp các nội dung trên Blogspot
Người đăng: | 24/04/2011 | 14:57

Thêm tính năng kéo thả và sắp xếp các nội dung trên Blogspot

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

(Traidatmui.com) – Nếu bạn là một Blogger thì chắc hẳn là không lạ lẫm gì với giao diện của các phần tử tiện ích trên blog. Ở đây sẽ hiển thị tất cả các tiện ích có trên blog của bạn và bạn có thể sắp xếp vị trí của chúng rất nhanh chóng, bạn sắp xếp chúng bằng cách là kéo thả chúng đến vị trí mà bạn muốn. Vâng bài viết này mình sẽ giới thiệu cùng các bạn thủ thuật để có thể kéo thả và sắp xếp các nội dung trên blog của bạn tương tự như bạn sắp xếp các tiện ích đó. Với thủ thuật này, bạn có thể hoán đổi vị trí của các nội dung trên blog theo ý của mình và chúng sẽ tự động trở về vị trí ban đầu khi bạn reload trang lại. Để thấy rỏ hơn bạn hãy vào DEMO và kéo thả các nội dung trong đó bạn sẽ biết được tác dụng của 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.ui.core.1.8.11.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.ui.widget.1.8.11.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.ui.mouse.1.8.11.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.ui.sort.1.8.11.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$( ".column" ).sortable({
connectWith: ".column"
});

$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick'/>")
.end()
.find( ".portlet-content" );

$( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});

$( ".column" ).disableSelection();
});
</script>
<style type='text/css'>
.column {
width: 250px; /*độ rộng của mội cột*/
float: left; }
.portlet {
border: 1px solid #eee;
margin: 0px 5px 5px 0px; }
.portlet-header {
cursor:move;
color:#fff; /*màu của tiêu đề */
text-transform:uppercase;
background:#ccc url(https://lh4.googleusercontent.com/_BTztXRwC9ik/TRDJIYtmedI/AAAAAAAAF9E/0W3W6wAzMRs/a_bg.gif) repeat-x;
margin: 0px;
padding: 3px 0px 3px 20px; }
.portlet-header .ui-icon {float: right; }
.portlet-content {
background:#fff;padding:5px; }
.ui-sortable-placeholder {
background:#666;
border: 1px dotted #000;
visibility: visible !important; }
.ui-sortable-placeholder * { visibility: hidden; }

</style>

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

<div class="portlet">
<div class="portlet-header">Tiêu đề nội dung 1</div>
<div class="portlet-content">
Nội dung 1
</div>
</div>

<div class="portlet">

<div class="portlet-header">Tiêu đề nội dung 2</div>
<div class="portlet-content">
Nội dung 2
</div>
</div>

</div>

<div class="column">

<div class="portlet">
<div class="portlet-header">Tiêu đề nội dung 3</div>
<div class="portlet-content">
Nội dung 3
</div></div>

</div>

<div class="column">

<div class="portlet">
<div class="portlet-header">Tiêu đề nội dung 4</div>
<div class="portlet-content">
Nội dung 4
</div>
</div>

<div class="portlet">
<div class="portlet-header">Tiêu đề nội dung 5</div>
<div class="portlet-content">
Nội dung 5
</div>
</div>

</div>

» Chỉnh sửa code: Bạn thay các tiêu đề (màu xanh dương) và nội dung (màu đỏ) cho phù hợp là xong. Phần nội dung bạn có thể chèn code HTML vào hoặc dạng text tùy ý.

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

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

Tham khảo jqueryui

Chuyên mục:

Không có nhận xét nào