Wednesday, November 28, 2012

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nútRead More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact…

- Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

» 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 mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F) 
<div class='post-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div

=> Không phải template nào cũng có đoạn code như trên, chỉ tìm tương tự thôi. Chủ yếu là có 3 dòng tô đỏ.

6. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> <data:post.body/> <b:else/>
7. Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>

- Nếu không có  thì tìm dòng: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

- Và thêm vào trước (hay sau nó cũng được) thẻ đóng </b:if>

=> Toàn bộ phần mã sau khi thực hiện có dạng như sau
:
 Tìm đến thẻ :  ]]></b:skin> và dán code bên dưới trên nó 

<div class='post-body'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div>



Những dòng đánh dấu màu xanh là phần được thêm vào theo thủ thuật này.

- Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.

Chúc thành công!

Monday, November 26, 2012

HƯỚNG DẪN SỐ 01-HD/TW THI HÀNH ĐIỀU LỆ ĐẢNG


BAN CHẤP HÀNH TRUNG ƯƠNG
*
Số 01 - HD/TW
ĐẢNG CỘNG SẢN VIỆT NAM

Hà Nội, ngày 05 tháng 01 năm 2012


HƯỚNG DẪN
 một số vấn đề cụ thể thi hành Điều lệ Đảng
--------------
-     Căn cứ Điều lệ Đảng; Quy định thi hành Điều lệ Đảng số 45-QĐ/TW, ngày 01-11-2011 của Ban Chấp hành Trung ương khoá XI;
-    Căn cứ Quy chế làm việc của Ban Chấp hành Trung ương, Bộ Chính trị và Ban Bí thư khoá XI,
Ban Bí thư hướng dẫn một số vấn đề cụ thể thi hành Điều lệ Đảng như sau :
.

NỘI DUNG KIỂM ĐIỂM THEO TW4 (KHÓA XI)



2. Về chuẩn bị báo cáo kiểm điểm tự phê bình và phê bình của tập thể, cá nhân.
2.1- Về chuẩn bị báo cáo kiểm điểm tự phê bình và phê bình của tập thể:
Chuẩn bị dự thảo báo cáo kiểm điểm tự phê bình và phê bình của tập thể theo tinh thần khách quan, nhìn thẳng vào sự thật, đánh giá đúng sự thật, không nể nang, né tránh, thể hiện tính gương mẫu.
- Về phạm vi nội dung, căn cứ trách nhiệm và quyền hạn được nêu trong Quy chế làm việc của ban chấp hành, ban thường vụ, thường trực cấp uỷ, các đoàn thể của đơn vị mình. Báo cáo kiểm điểm tập trung vào 3 nhóm nội dung của Nghị quyết Trung ương 4: (1) Về đấu tranh, ngăn chặn và đẩy lùi suy thoái tư tưởng, đạo đức, lối sống, (2) Về xây dựng đội ngũ cán bộ lãnh đạo, quản lý các cấp (3) Về thực hiện nguyên tắc tập trung, dân chủ, tập thể lãnh đạo, cá nhân phụ trách.
Trong từng nội dung, báo cáo cố gắng làm rõ những ưu, khuyết điểm chủ yếu hiện nay, nhưng trong từng vấn đề cụ thể có liên hệ đến thời gian trước (khóa trước) để làm rõ trách nhiệm, quyền hạn của tập thể lãnh đạo. Báo cáo tập trung chủ yếu vào các ưu, khuyết điểm, xác định một số nguyên nhân chủ yếu của những hạn chế, khuyết điểm để từ đó đề ra biện pháp khắc phục.
.

MẪU KIỂM ĐIỂM ĐẢNG VIÊN 2012



ĐẢNG CỘNG SẢN VIỆT NAM
..........., ngày .... tháng.... năm 2012

BẢN TỰ KIỂM ĐIỂM
đánh giá chất lượng đảng viên năm 2012

          Họ và tên: ..........
          Sinh ngày 02 tháng 10 năm .......
          Ngày kết nạp Đảng:
          Ngày chính thức:
          Chức vụ trong Đảng:
          - Bí thư Đảng ủy ..........;
          - Kiêm ...................;
          Chức vụ quản lý.............
          Chức vụ đoàn thể..........
         
.

Friday, November 23, 2012

Tạo Readmore trong Blogger ves 1



Để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ <!--more--> này sẽ được hiển thị ở trang chủ và các trang category, phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.


Chức năng Scrip:
- Nếu trong bài viết của bạn có thẻ <!--more--> (), nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ <!--more-->, thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).
» 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
4. Chọn Mở rộng tiện ích .
5.
 Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
function createSummary(id) {
var p = document.getElementById(id), content = p.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
} else {
var imgTag = '', img = p.getElementsByTagName('img');
if (img.length >= 1) {
imgTag = '<img class="thumb" src="'+img[0].src+'" />';
}
p.innerHTML = imgTag + strip(content, 125) + '...';
}
}
//]]>
</script>
</b:if>
6. Thêm đoạn CSS dưới vào trước thẻ ]]></b:skin>.


.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}
- Bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

7. Tìm thẻ <data:post.body/> và thay thế bắng đoạn mã sau:



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
<a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
<data:post.body/>
</b:if>
Lưu template lại và xem kết quả
- Hiện nay đã có bản cập nhất mới hơn và load ổn định hơn các bạn xem Tại đây
Chú thành công!

Wednesday, November 21, 2012

Auto readmore với thumbnail trên Blogger dùng Script - Style 1



Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.


Ảnh minh họa:



☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (process)
4- Click chọn  Mở rộng tiện ích mẫu (  Expand Template Widgets) => Xem vdeo:
5- Tìm (Ctrl +F) thẻ bên dưới:
<data:post.body/> 
- Và thay nó bằng đoạn mã sau đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>


Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:
  • summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
  • summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
  • img_thumb_height chiều cao của hình đại diện (pixel).
  • img_thumb_width chiều rộng của hình đại diện (pixel).
7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.

Tuesday, November 20, 2012

Tạo popup chỉ xuất hiện một lần duy nhất cho blog

Thường vào các blogspot lớn bạn sẽ rất nhiều popup xuất hiện quảng cáo cho site khác. Chỉ cần load lại trang là lại thêm một số popup khác xuất hiện .Dẫn đến nhiều trường hợp giảm dần lượng khách đến site bạn .Đoạn code sau sẽ giúp bạn chèn quảng cáo popup và chỉ hiện 1 lần duy nhất tránh gây phiền hà cho khách khi truy cập.

Demo: bạn có thể thấy khi bạn bấm vào vị trí bất kỳ trong khi xem bài viết này của mình
Cách 1 ( chèn file js )
1.Đầu tiên bạn cần copy đoạn code sau vào Notepad và chỉnh sữa các dòng chữ mình đã đánh dấu cho phù hợp với site của bạn
.

Tạo nút button bằng css

Nút button được ứng dụng khá nhiều trên các blog có thể làm nút home link, nút RSS... bạn cũng có thể sử dụng để làm menu cho blog. Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Chèn code bên dưới vào trước thẻ  ]]></b:skin>
.button{
background: #00ccff; /*màu nền của nút*/
border: 3px #00ccff outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana; /*kích thước của text*/
color:#ff0000; /*màu text*/
}

.button:hover {
border-style: inset;
background: #33ffff; /*màu nền của nút khi rê chuột*/
padding: 2px 3px 0 5px;
color:#000099; /*màu text khi rê chuột*/
}

.button:visited {
background: #00ffff; /*màu nền của nút sau khi click chuột*/
color:#ff6600; /*màu text khi đã click chuột*/
}

.button:active{
color: white;
}

- Bạn chỉ việc dựa vào chú thích và chỉnh sửa lại cho phù hợp, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích màu xanh để không bị lỗi code.
- Bạn có thể xem bảng mã màu TẠI ĐÂY

5- Save template lại

Để tạo nút cho link trong bài đăng hay trên blog, bạn chỉ việc thêm và link đó lệnh "class="button" như bên dưới.
<a class="button" href="http://quangvietmkt.blogspot.com/2011/12/tao-nut-button-bang-css.html">Blog Namkna</a>

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

Monday, November 19, 2012

Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung

Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông qua các tab đó. Chủ đề về tạo Tab chứa nội dung thì mình trước đây đã chia sẻ cùng các bạn một số bài, tuy nhiên các thủ thuật trước thì thường nội dung của từng tab lại được thêm vào trong thẻ <div> </div>. Thủ thuật hôm nay mình chia sẻ cùng các bạn cách tạo các Tab nội dung từ những tiện ích có sẵn trên blog của bạn. Nói dễ hiểu là thủ thuật này sẽ tự động gom các tiện ích có sẵn trên blog của bạn chỉ cần bạn chỉ định số lượng tiện ích cần gom và điều kiện là các tiện ích có tiêu đề thì mời có thể gom vào trong tab.
Hình ảnh minh họa

.

Thủ thuật tạo các nút điều khiển cho Blogspot

Qua một số web mình thấy tiện ích này cũng khá hay nên mình viết bài chia sẻ cùng các bạn để mọi người có thể sử dụng cho Blogspot của mình. Tiện ích đó đơn giản là các nút bấm điều khiển trên blog của bạn, các nút như lên đầu trang hay xuống cuối trang thì bạn đã quen thuộc, ở đây mình sẽ có thêm 3 nút với tính năng như trở về trang trước, nút tự động cuộn blog và ngưng cuộn blog. Nút tự động cuộn tức là khi bạn bấm vào nút này thì blog bạn sẽ tự động cuộn xuống dưới từ từ, đây sẽ giúp người đọc có thể đọc bài viết mà không cần dùng chuột kéo thanh trượt nữa. Bạn có thể xem demo trực tiếp trên site mình, bạn nhìn san bên phải sẽ thấy các nút bạn bấm vào lần lượt các nút để xem tính năng của nó.
.

Saturday, November 17, 2012

Thành phần hiển thị popup đóng tự động

Một thông báo dạng popup rất cần thiết trong thiết kế web, đặc biệt ứng dụng cho các hình ảnh quảng cáo động. Bạn có thể điều chỉnh khoảng thời gian hiển thị để thành phần popup tự động đóng. 

Thông thường để tạo một kiểu quảng cáo dạng popup như vậy, kỹ thuật webdesign phải dùng đến script có dung lượng khá lớn. Tuy nhiên ở đây, tôi sử dụng chức năng đóng thành phần giúp cho script khá gọn nhẹ.

Bạn hãy đặt đoạn code sau đây vào trước thẻ
</head>

.

Tiện ích "Bài viết liên quan" cho Blogger, bản nâng cao, có phân trang

Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản "bài viết liên quan" hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang. Trong bài viết này, tôi sẽ hướng dẫn các bạn làm phân trang cho chúng.

Script này thích hợp với các blog cần liệt kê số lượng lớn các bài viết liên quan (VD như các tập trong 1 bộ truyện tranh). Nếu blog bạn không có nhu cầu này, hãy dùng các bản cũ mà bạn thấy phù hợp.




.

Sunday, November 11, 2012

Tạo tab nhiều tiện ích cho blogspot

Khi trên blog có nhiều tiện ích thì câu hỏi cần đặt ra là làm sao để có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Hình ảnh minh họa
.

Hướng dẫn tạo Drop Menu cho blog

Trong bài viết share template 01 (white template) mình viết hôm trước Dlai có nhờ mình hướng dẫn tạo dropdown menu như trên template đó nên hôm nay mình viết bài viết này để thực hiện thủ thuật trên.



1. Vào Thiết kế → chỉnh sửa HTML chèn đoạn code sau vào trước thẻ ]]></b:skin>
.

Tạo Menu Labels (Nhãn) xổ xuống cho Blogger


Nếu bạn thấy widget Labels mặc định của blogger (blogspot) chiếm diện tích blog (với những blog nhiều Labels), bạn có thể chuyển dạng hiển thị mặc định sang dạng Menu xổ xuống (Drop down Menu) gọn gàng như hình minh họa bên dưới.
Drop down menu for Labels
Menu cho Labels dạng list xổ xuống
.

Phân trang cho blog - Page Navigation


Page Navigation đối với đa số các website là một công cụ không còn xa lạ. Nhưng với blogger thì công cụ này vẫn chưa được hỗ trợ mạnh lắm. Chỉ có nút Next và Preview thôi. Tham khảo ở một số nơi mình đã chế biến lại cái navipage cho blog của mình. Bạn có thể làm theo hướng dẫn dưới đây.
.