Showing posts with label Requests. Show all posts
Showing posts with label Requests. Show all posts

Sunday, July 31, 2011

Thủ thuật yêu cầu: Gắn tem cho bài viết đang chờ duyệt

Chắc hẳn một khi blogspot của bạn đã phát triển ổn định và có một chỗ đứng nhất định trong cộng đồng, hơn nữa bạn không có nhiều thời gian để viết bài trong khi bạn vẫn muốn duy trì bài viết đều đặn cho blogspot của mình; bạn sẽ nghĩ đến việc tìm cộng tác viên viết bài cho bạn. Từ nhu cầu này, nảy sinh việc cần phải gắn tem bài đang chờ duyệt (Pending Post Stamp) cho bài viết mới của cộng tác viên. Thủ thuật này mình viết theo yêu cầu của bạn Minh Quân tại trang ICTSOFT.

Tính năng của thủ thuật này là gắn tem Bài này đang chờ duyệt cho bất kỳ một bài viết nào đó của cộng tác viên, theo đó các bài được gắn tem khi được hiển thị ở trang index (trang chủ, trang nhãn và trang lưu trữ) sẽ được nhìn thấy song không thể click vào link dẫn đến nội dung bài viết. Trong trường hợp blogspot của bạn có gắn tiện ích Bài viết mới nhất (hoặc link bài viết xuất hiện trên kết quả các công cụ tìm kiếm) thì một khi link bài viết được click vẫn không thể nhìn thấy nội dung bài viết (bởi một lý do là bài viết đang được admin kiểm duyệt trước khi xuất bản chính thức); tuy nhiên bạn đọc vẫn có thể chém gió tại phần Comments của bài viết này. Định dạng này sẽ tạo sự thú vị cho trang bài viết đang được duyệt, theo đó người đọc có thể bàn tán, đưa ra quan điểm, ý kiến, cảm nghĩ của mình về bài viết sắp được xuất bản chính thức.

Xem Demo 1Demo 2.



Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates (mở rộng mẫu tiện ích). Tìm đến dòng <b:include data='post' name='post'/> và thay nó bằng đoạn code bên dưới:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
Ở đoạn code trên bạn cần thay URL cho bài viết đang chờ duyệt.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.
.pendingpost-stamp {
z-index: 200;
width: 550px; // chỉnh chiều rộng tương thích với phần Main
height: 150px;
position: absolute;
color:#ed0000; // màu chữ của dòng tem thông báo ở kiểu trang index
text-align: right;
font: bold 15px Arial;
background:#d7d7ff;
opacity: 0.5;
filter: alpha(opacity=50);
margin:0;
padding:2px;
}
.pendingpost-message {
float:center;
color: #2B65EC; // màu chữ của dòng thông báo ở kiểu trang item
font: bold 15px Arial;
text-align:center
}
Đoạn code CSS này giúp vô hiệu hóa link ở các kiểu trang index (không thể click vào tiêu đề bài viết). Bạn có thể tùy biến CSS theo các chú thích ở trên.

Sau đó lưu Template là xong.

Trong trường hợp bạn cần dán tem cho một số bài viết đang chờ duyệt thì sử dụng code ở Bước 2 theo kiểu như sau:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if> </b:if> </b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if></b:if></b:if>
</b:if>
Bạn cần thay các URL cho các bài viết đang chờ duyệt tương ứng nhé. Lưu ý một khi bất kỳ bài viết nào đó đã được bạn duyệt rồi thì bạn chỉ cần xóa URL của bài viết đang được duyệt ấy ra khỏi code thủ thuật hoặc làm ngược lại các bước trên để trở về trạng thái bình thường. Thủ thuật này không dùng Javascript nên rất nhẹ nhàng. Nếu bạn gặp khó khăn trong việc cài đặt, xin vui lòng để lại lời nhắn dưới đây.

Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar

Thủ thuật này được viết theo yêu cầu của bạn Blue79blog, với ý tưởng tạo hiệu ứng ẩn hiện tiện ích trên phần sidebar của blogspot. Thủ thuật này lấy cảm hứng từ style ở trang cokhi-hui.net (xin lưu ý, ở đây chỉ lấy cảm hứng theo yêu cầu của bạn đọc chứ script không liên quan đến trang cokhi-hui.net).

Xem Demo.

Bây giờ chúng ta cùng bắt đầu thực hành nhé.

Bước 1. Sử dụng javascript bên dưới để tạo hiệu ứng, đặt code trước thẻ </head>.
<script type="text/javascript">
//<![CDATA[
// Hide and Show Toggle Effect Script. Please keep www.vntai.com source for your using in any ways
function toggle( targetId )
{
var state = 0;
var blockname = "block" + targetId;
var blockimage = "blockcollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockimage ).src = state ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/s1600/minus.gif" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/s1600/plus.gif";
}
}
//]]>
</script>

Bước 2. Thiết lập cấu trúc HTML theo các trường hợp sau đây (áp dụng chung cho website và blogspot):

Trường hợp 1: Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm nằm bên trái tiêu đề.
<a href="javascript: void(0);" onclick="toggle(&quot;1&quot;); return false">
<img border="0" id="blockcollapse1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/s1600/plus.gif" style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block1" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh …
</div>


Đây là một tiêu đề


Trường hợp 2: Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên trái tiêu đề
<a href="javascript: void(0);" onclick="toggle(&quot;2&quot;); return false">
<img border="0" id="blockcollapse2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/s1600/minus.gif" style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block2">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>


Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Trường hợp 3. Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm bên phải tiêu đề.
<a href="javascript: void(0);" onclick="toggle(&quot;3&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/s1600/plus.gif" style="margin-left: 5px;" />
</a>
<div id="block3" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>


Đây là một tiêu đề


Trường hợp 4. Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên phải tiêu đề.
<a href="javascript: void(0);" onclick="toggle(&quot;4&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/s1600/minus.gif" style="margin-left: 5px;" />
</a>
<div id="block4">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>


Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Đến đây là phần quan trọng đối với blogspot, áp dụng để tạo hiệu ứng ẩn hiện đối với tiện ích trên blogspot. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ thực hiện Bước 1 xong). Xác định ID của một tiện ích và tìm đến đoạn code của nó, ví dụ đối với tiện ích có ID là HTML1:
<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Chỉnh code của tiện ích đó lại như bên dưới. Ở đây mình áp dụng cho trường hợp 1, các trường hợp còn lại bạn có thể tự thực hiện.
<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<a href='javascript: void(0);' onclick='toggle(&quot;1&quot;); return false'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><img border='0' id='blockcollapse1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJc9u7F0VRT_bEt6QmgX9ZkeObzpSePjBviU_nC1RXC-QpEoIrZV8jWQOiSwXe9FwmsJVwLo4dlqSKpehVhNq1ZxI_gHkhteRB89f6RW7nQhDAI8nOLHe7U8W3uXMI5rBGwHenkkNMXSd/s1600/mas.gif' style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='block1' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div> </div>
</b:includable>
</b:widget>
Lưu Template là xong. Bạn có thể sử dụng cấu trúc tương tự như trên để vận dụng cho nhiều tiện ích khác nhau nhé.