KD-DT: ThuthuatBlog

Home » ThuthuatBlog

Bài viết mới tự động cuộn ngang với 2 nút điều khiển

19:26 |

(Traidatmui.com) – Nếu bạn thường xuyên vào trang tin tức vnexpress.net thì chắc hẳn bạn cũng có để ý thấy ở cuối trang có một tiện ích trình bày về thông tin doanh nghiệp với hiệu ứng cuộn ngang với 2 nút điều khiển. Hôm nay mình chia sẻ cùng các bạn thủ thuật tạo tiện ích với hiệu ứng tuong tự cho bài viết mới trong blogger.

Hôm trước thì mình đã có giới thiệu thủ thuật cũng cuộn ngang với 2 nút điều khiển qua lại, tuy nhiên với thủ thuật trước thì nó không có tự động cuộn mà chỉ khi bạn click vào mũi tên nó mới di chuyển. Khác thủ thuật trước thì tiện ích này có thể tự động cuộn ngang sau một khoản thời gian nhất định,để thấy rỏ bạn có thể xem demo bên dưới.

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> hoặc trước thẻ </head>

5. Thêm 1 HTML/Javascript và thêm vào code bên dưới

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

Và mình cũng cung cấp cho các bạn file JS dành cho bạn muốn hiển thị bài viết cho toàn blog.

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

Nguồn : traidatmui.com

Read more…

Tạo trang Karaoke cho Blog

19:37 |

Bạn là người thích hát Karaoke? Bạn đã có website riêng của mình và muốn web này có nhiều người ghé thăm. Đồng thời vừa làm cho trang web của mình thêm nội dung phong phú, trang trí cho đẹp?
Vậy thì tại sao không làm một trang hát Karaoke cho mọi cùng ca?

Bài viết này sẽ hướng dẫn các bạn tạo một trang Karaoke trong website của bạn.

http://www.sangnguyenmskg.blogspot.com/p/karaoke.html

Bước 1: Đăng nhập vào blogger => Trang => Trang mới => Trang trống.

Bước 2: Qua thẻ HTML của trang trống, dán đoạn code sau.

Tùy chỉnh 2 thông số màu đỏ cho phù hợp với website.

Height: Chiều cao;

Width: Chiều rộng;

Bước 3: Nhấn Xuất bản.

Sau đó về trang xem thử thành quả như thế nào!

Read more…

7 Dịch vụ chuyển đổi PDF trực tuyến miễn phí

21:34 |

Nếu bạn cần chuyển đổi một tài liệu nào đó sang định dạng PDF hoặc ngược lại mà trong tay không có bất kỳ một phần mềm nào khả dĩ dùng được? Vậy tại sao bạn không thử dùng một vài dịch vụ trực tuyến cho phép làm những tính năng vốn chỉ có trên phần mềm? Dưới đây là 7 dịch vụ trực tuyến cho phép bạn chuyển đổi trực tuyến hoàn toàn miễn phí.

Đương nhiên các dịch vụ Google Docs và Zoho Writer cho phép người dùng có thêm tính năng lưu tài liệu dưới dạng Acrobat nhưng bạn cần đăng ký tài khoản để sử dụng dịch vụ của họ. Những dịch vụ dưới đây đơn giản chỉ cần truy cập tới, tải lên tài liệu cần chuyển đổi và tải về kết quả mà không cần phải cung cấp bất kỳ một thông tin cá nhân nào, một vài dịch vụ có những tính năng cao cấp như mã hóa hoặc đóng dấu chìm…

Free PDF converter: Tải lên tài liệu và bạn sẽ được cung cấp url để tải về tập tin Acrobat của mình hoặc bạn có thể nhận nó bằng email. Nó hỗ trợ các định dạng phổ biến như Microsoft Office, Open Office, các tập tin đồ họa, vector…
PDF Online: Chấp nhận bất kỳ tập tin văn bản nào và các tập tin hình ảnh với dung lượng tối đa là 2MB để chuyển sang định dạng PDF. PDF Online sẽ gửi kết quả qua email cho bạn.
Kinati 2PDF: Các tính năng giống như 2 dịch vụ trên và có thể gửi kết quả qua email. Kinati cũng có các tính năng cao cấp như mã hóa, bảo vệ bằng mật khẩu và cho phép tài liệu lớn tới 15MB.
Primo PDF: Một dịch vụ hữu ích khác giống như những dịch vụ trên bên cạnh đó nó còn có phiên bản phần mềm có thể tải về máy tính để sử dụng.
ExpressPDF: ExpressPDF là dịch vụ trực tuyến cho phép bạn chuyển các tài liệu Microsoft Office sang định dạng PDF. Dịch vụ này cũng cung cấp khả năng chuyển các trang Web sang PDF. Kích thước tối đa của tài liệu tải lên là 20MB.
Neevia: Neevia Document Converter eXpress hỗ trợ mã hóa và đóng dấu chìm, sau khi chuyển đổi bạn có thể tải về hoặc nhận qua email tuy nhiên dung lượng tài liệu chuyển đổi tối đa chỉ được 1MB.
DOCTransformer: DocTransformer là một dịch vụ của công ty Pisa của Italy. Nó cho phép bạn tải tài liệu lên và chuyển đổi sang định dạng PDF, RTF hay định dạng của OpenOffice Write. Có nhiều tùy chọn hơn về kết quả và mặc dù nó bằng tiếng Italy nhưng cũng không khó để hoàn thành công việc chuyển đổi một chút nào.

Với vô số các dịch vụ miễn phí trực tuyến đang phát triển mạnh khiến người dùng đôi khi thấy không thực sự cần thiết phải cài đặt phần mềm chuyên dụng cho một vài công việc đột xuất nào đó như việc chuyển đổi định dạng tài liệu sang PDF này vậy.

Read more…

Update key mới Tháng 8/2012 cho Kaspersky Đức

02:17 |

(SN-MS) - Đã có key mới cho Kaspersky Đức (91 ngày), ai chưa có thì vào đây tải về. Bài này mình chỉ hướng dẫn cách kích hoạt Key mới tháng 8/2012 cho 91 ngày còn ai chưa biết cách cài đặt cả phần mềm thì đọc tại đây.

Hướng dẫn: Kích hoạt Kaspersky Internet Security 2012 bằng file key (Không cần ngắt mạng).
Đầu tiên, các bạn phải xóa key cũ đi. Nhấn vào dấu X như hình bên dưới.

Sau khi đã xóa, nhấn vào Activate new license.

Nhập vào mã như hình sau.

Chú ý: Check vào ô "kích hoạt phiên bản thương mại" rồi nhập mã 22222-22222-22222-2222U. Chữ cuối cùng là chữ U

Sau đó nhấn vào "Duyệt" rồi tìm đến file Ola vừa tải về ở trên, nhấn "Tiếp theo".

Đợi một lúc kết nối với máy chủ là thành công.

* HƯỚNG DẪN THÊM VỀ UPDATE OFFLINE CHO KAS MỚI CÀI LẦN ĐẦU:
(Để kas tự cập nhật online lần đầu lâu rất, có thể đến vài giờ mới xong)
- Vào đây tải bản update offline cho kas và làm theo hướng dẫn:
Hình 1

Hình 2

- Khi update offline xong nhớ tick vào ô " Các máy chủ cập nhật của Kaspersky Lab" để kas cập nhật online hàng ngày nhé.

Read more…

Tạo hộp thoại thông báo cho blog

22:35 |

[SN-MS]- Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.

Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó. Demo ngay trên dầu của site này
Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.

Hình ảnh minh họa từ blog của mình:

- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :

- Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.

- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :

thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';

Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :

thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';

Như vậy đã hoàn thành. Chúc các bạn thành công.

Theo fandung.com

Read more…

Auto Readmore cho Blogspot

05:56 |

Auto Readmore với ảnh thumbnail là tiện ích xuất hiện đã lâu và được cộng đồng Blogspot sử dụng rất phổ biến bởi những lợi ích rất thiết thực mà nó mạng lại. Tuy Google cũng đã bổ sung JumpLink ( một dạng Readmore ) cho Blogspot nhưng dường như vẫn chưa thỏa mãn yêu cầu của các Blogger. Việc thực hiện thủ công JumpLink cho từng bài post xem ra khá nhọc nhằn đối với những Blog đã có nhiều bài viết.

Bây giờ chúng ta bắt đầu thủ thuật:

Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
<b:else/>
<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:10px;'><a expr:href='data:post.url'> Đọc tiếp… </a></span>
</b:if></b:if>

Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>var thumbnail_mode = "float" ;
summary_noimg = 430; // Số ký tự hiển thị khi không có ảnh
summary_img = 340; // Số ký tự hiển thị khi bài viết có ảnh
img_thumb_height = 100; // Chiều cao của ảnh
img_thumb_width = 120; // Bề rộng của ảnh
</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;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEtrqstsA8kqnAO6GbV4Z847xjyqXUm-9JsYc22AsLr9KUlhDXj6jr89fJ6Aeuj58GKbpbVbQRWI4b3HxxWWB5Ay0HZnPHvaLh7Ez-3OqvLqtfry5gsYCBBvoS-S1uVJczCNRy7sajD8U/" 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>

* Đoạn code trên đã thêm ảnh mặc định cho những bài viết không có ảnh, Căn cứ vào các chú thích để chỉnh sửa cho phù hợp với blog.
Bước 4 : Save template .

Read more…

Phân trang cho blog - Page Navigation

01:23 |

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.

1. Trước tiên việc bạn cần làm là chọn 1 trong các mẫu phía dưới.

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Vào Thiết kế → chỉnh sửa HTML → Mở rộng tiện ích mẫu. Chèn đoạn code bạn đã chọn vào phía trên thẻ ]]></b:skin>

2. Tiếp tục tìm đoạn code sau:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog. Bạn chèn sau nó đoạn code sau.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First", 
lastText: "Last", 
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Tiếp tục tìm đoạn code sau:

<!-- navigation -->
<b:include name='nextprev'/>

Thay đoạn code trên bằng đoạn code dưới đây:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Lưu template lại là xong.
Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ First Last có thể thay thế bằng chữ khác tùy thích.

Nguồn bài viết: voquocan.com

Read more…

Photoshop

Dựng Phim

Thủ thuật

Kho template

Văn phòng

Mạng máy tính

Blogspot

Photoshop

Blogspot

Photoshop

Blogspot

Photoshop

Công cụ 1

Công cụ 2

Popular Posts

KD-DT

Giới thiệu về tôi

Lưu trữ Blog

Bài viết mới tự động cuộn ngang với 2 nút điều khiển

Tạo trang Karaoke cho Blog

7 Dịch vụ chuyển đổi PDF trực tuyến miễn phí

Update key mới Tháng 8/2012 cho Kaspersky Đức

Tạo hộp thoại thông báo cho blog

Auto Readmore cho Blogspot

Phân trang cho blog - Page Navigation

Hot