Công ty in

Hiển thị

Home » Huongdansudung

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>

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js"></script>
<script language="javascript" type="text/javascript">
var currenttab = 1;
var maxtab = 3; // số tab cuộn qua ví dụ bạn có 15 bài thì chọn là 3, 20 bài chọn 4...
var round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
/* <![CDATA[ */ function slide_forward() {
currenttab++;
if (currenttab > maxtab) currenttab = 1;
if (currenttab <= maxtab) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}
function slide_backward() {
currenttab--;
if (currenttab < 1) currenttab = maxtab;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}

function roundHotNews()
{
if(currenttab == 1) currenttab=2;
else if(currenttab == 2) currenttab=3;
else if(currenttab == 3) currenttab=1;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
}/* ]]> */
</script>

<style>
.slideHighlight {
color:#000;
width: 1040px; /* độ rộng của tiện ích*/
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzIoFKAY8xX2oxBXAL4hMZFzAa8Ev10Y4Y8O1fHQwBoqzlGOvF1MF2lYoHKz0f6HWjD0TToEXFiCoDBJ_Ieo-4peV57iwHxPUIuORYEm9q-3sch7A-yh14t1zm4Bl49nHtFSsXKx97nw/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;}
.slideHighlight .viewpost{float:left;width: 100%;height:120px;overflow:hidden;padding:0px;}
.slideHighlight .viewpost .view {float:left;width: 100%;height:120px;overflow:hidden;position:relative}
#slide_animation{left:0;position:absolute;top:0}
.slide{float:left;width:5000px;}
.vnscrollitem{
font-family:arial;
float:left;
padding:3px 3px 5px 4px;
font-size:12px;
line-height:1.3em;
display:block;
width:200px; /* độ rộng mỗi bài viết*/
height:87px; /* chiều cao của mỗi bài viết*/
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.slidebackward{
cursor:pointer;
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkA1RdekDkw-ntbplkrLYPeNL8j0yp82mjAd49O_1qCIQfPbWfEXSA8nldrXtQ5QrpUbzHeeImCPphyphenhyphen_cc25RZ17Vb8boSJQqyx0Dx0NKK1xZIKyugSzFLXS31FUCCNz9CEt-owbI9Nv4/) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkA1RdekDkw-ntbplkrLYPeNL8j0yp82mjAd49O_1qCIQfPbWfEXSA8nldrXtQ5QrpUbzHeeImCPphyphenhyphen_cc25RZ17Vb8boSJQqyx0Dx0NKK1xZIKyugSzFLXS31FUCCNz9CEt-owbI9Nv4/) 0px 0px no-repeat;
}
.vnscrollitem a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.vnscrollitem a:hover{
color:#666;
text-decoration:underline;}

.vnscrollitemimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}</style>

5. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYmG4HO4SBcos7_FyAmuFJABtQCZCd2De2_V6xnWKq4wyVnbaXirhud4ftkO3CnrMAwci5m4MM0bPdpMUuh9hgwuVxee-NbxK5ddr0P6_g4pN-CH4-XFZcGTHSaECS-ZBnpjnfA2XkHgM/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 50; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiek9KxgUppTodxqhlS_skcYJUlG1OLb2JhKVz9ovXQDyNUL0xZtWOujA-DFZeUk8TotC_aj7R4sUbRpDiN1YmBdQ1hxntE6OMlz3mKJOlAYeft9dukadsdNSzJi0nkWjuoOZpYXt8XdKE/" style="margin:0px 0px 0px 1px;"/>
<div onclick="slide_forward()" class="slideforward"></div><div onclick="slide_backward()" class="slidebackward"></div>
<div class="viewpost"><div class="view"><div class="slide" id="slide_animation">
<script src="http://traidatmui-tips.googlecode.com/files/rescroll_label_new.js" type="text/javascript"></script>
</div></div></div></div>

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.
<script src="http://traidatmui-tips.googlecode.com/files/rescroll_post_new.js" type="text/javascript"></script>

Chúc bạn thành công
Nguồn : traidatmui.com

Read more…

Hướng dẫn cài đặt từ điển Babylon 8.0

19:31 |
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mình. Với Babylon bạn có thể nhanh chóng dịch các email, trang web, tài liệu, tin nhắn tức thời, cùng nhiều nội dung khác. Mọi thứ bạn cần làm là nhấn chuột lên từ hay văn bản muốn dịch và một cửa sổ nhỏ sẽ hiện ra tức thời với các kết quả mong muốn từ cơ sở dữ liệu từ điển, chú giải và công cụ chuyển đổi ngôn ngữ phong phú của Babylon.
 


  • Đầu tiên tải về file .RAR chứa file setup của babylon: Babylon.Pro.v8.0.0.(r38) tại đây.
  • Tiếp theo bạn hãy giải nén file rar vừa tải về như hình:

  • Vào thư mục vừa được giải nén và tiến hành cài đặt từ file Babylon8_setup.exe:
  •  Sẽ có 1 cửa sổ cài đặt hiện ra, và bạn hãy lựa chọn các option như hình vẽ:
  • Chương trình sẽ được tiến hành cài đặt:
  • Sau khi cài đặt thì icon của Babylon sẽ thu xuống system tray ở góc dưới bên phải:

  •  Right click lên icon Babylon chọn Configuration để tinh chỉnh 1 số chức năng chương trình:

  •  Babylon 8 có 1 chức năng mà đa số người dùng đều cho là bất tiện và không thích, đó là Babylon Globe, sẽ disable chức năng này ở tab services, bỏ dấu check như trong hình sau đó bấm OK:
  •  Babylon có chức năng tra từ ngay trong các ứng dụng khác rất hay và mạnh hơn hầu hết các loại từ điển khác, bằng cách sử dụng phím tắt, mặc định Babylon sử dụng tổ hợp phím CTRL + Right Click ,nếu cần bạn có thể đổi tổ hợp phím này ở tab Activation, ở đây mình chọn tổ hợp phím SHIFT + Right Click :
  •  Ở mục Mouse Activation, bạn bấm nút Change như hình trên, sẽ có 1 cửa sổ hiện ra:
  •  Đưa con trỏ chuột vào ô hình chữ nhật màu trắng rồi bấm tổ hợp phím mà bạn muốn dùng thay cho tổ hợp phím mặc định mà Babylon dùng là CTRL + Right Click . Từ nay về sau khi muốn tra nghĩa nhanh từ trong bất cứ ứng dụng nào, các bạn chỉ việc đưa con trỏ chuột lên từ cần tra rồi bấm tổ hợp phím mà bạn vừa định nghĩa.
Các thao tác trên chỉ là cài đặt Babylon, để có thể sử dụng được Babylon, ta cần phải cài đặt thêm các dữ liệu cho nó: như dữ liệu từ điển Anh – Việt, Việt – Anh, từ điển chuyên nghành kỹ thuật Anh – Việt và Việt – Anh, dữ liệu của từ điển Lạc Việt, v.v… Tất cả các từ điển trên đều được tích hợp trong file nén mà bạn vừa tải ở trên.

Để cài các dữ liệu này chỉ cần click đúp chuột vào từng dữ liệu từ điển, đợi trong ít giây là cài xong.
Chúc các bạn thành công.

Để hiểu rõ hơn, mời các bạn xem đoạn clip sau:

Read more…

Tiện ích đếm số lần truy cập cho Blogspot

19:17 |
(Traidatmui.com) - Hôm nay mình giới thiệu đến bạn tiện ích cũng khá hay dành cho Blogger, tiện ích này sẽ hiển thị số lần khách truy cập vào blog của bạn, nói cách khác là nó sẽ đến số lần khách ghé thăm blog của bạn. Ở đây mình giới thiệu cho bạn 2 dạng của tiện ích, một dạng là dạng text đơn giản và một dạng sẽ hiển thị cửa sổ popup.

Bạn có thể chọn một trong hai tiện ích này để đặt vào blog.

Hình ảnh minh họa dạng text
Hình ảnh minh họa dạng popup
1. Đăng nhập tài khoản Blogger
2. Vào thiết kế
3. Chọn thêm tiện ích
4. Thêm 1 HTML/Javascript và thêm vào 1 trong 2 code bên dưới.

a. Dạng cửa sổ popup
<script language="JavaScript">
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (2 < argc) ? argv[2] : null;
var path = (3 < argc) ? argv[3] : null;
var domain = (4 < argc) ? argv[4] : null;
var secure = (5 < argc) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DisplayInfo() {
var expdate = new Date();
var visit;
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
if(!(visit = GetCookie("visit")))
visit = 0;
visit++;
SetCookie("visit", visit, expdate, "/", null, false);
var message;
if(visit == 1)
message=" Chào bạn đến với TRAIDATMUI.com!";
if(visit== 2)
message=" Rất vui bạn trở lại";
if(visit >= 3)
message=" Chúc bạn luôn vui vẻ";
alert("Bạn đã truy cập vào trang này"
+" "+visit+""
+" lần. "
+message);
}
function ResetCounts() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
visit = 0;
SetCookie("visit", visit, expdate , "/", null, false);
history.go(0);
}
window.onload=DisplayInfo
</script>

b. Dạng text
<script language="JavaScript">
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
</script>

<script>
document.write("Bạn đã truy cập vào trang này <b>" + amt() + "</b> lần")
</script>

Bạn có thể thay các dòng text màu xanh trên theo ý của bạn.

5. Cuối cùng save tiện ích lại

Chúc bạn thành công
Nguồn traidatmui.com
Read more…

Chỉnh sửa thanh sidebar trong Blogger

19:06 |
Sidebar là thành phần nằm bên trái hay phải hoặc cả hai của blog (phụ thuộc vào template). Trong blogger.com bạn có thể dễ dàng nhìn thấy trên Layout (Xem hình 2). Khi click xem blog, các thành phần này sẽ hiển thị đúng như những gì bạn sắp xếp hay thay đổi tại layout.
Về cơ bản bạn có thể xem hình minh họa cụ thể layout (hình 1) và hiển thị của nó (hình 2).


Các thành phần trên layout
Hình 1




Hiển thị
Hình 2

Kích thước sidebar template của tôi là bao nhiêu và chỉnh thế nào?
Đăng nhập vào blogger.com, trên Template (Mẫu) click Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và tìm như dưới hình. Chiều rộng của sidebar đối với template ví dụ này là 220px (pixels). Tất nhiên ai ngăn cản bạn thay đổi? Ở đây không giới hạn chiều cao (height).



Hình kích thước
Hình 2a

Bạn có thể cho phép hiển thị gì ở sidebar?
Như đã nói, sidebar là thành phần cơ bản không thể thiếu của blog. Bạn có thể thêm bất kỳ widget nào vào đây bằng cách click trên Add a Page Element (Thêm phần tử trang) (hình 3), chọn và thực hiện thao tác theo hướng dẫn của mỗi widget. Blogger.com cung cấp đủ các widget cho bạn thỏa sức sử dụng, đặc biệt hơn cả bạn có thể chèn mã ứng dụng được cung cấp bởi một hãng thứ ba (widget HTML/JavaScrpipt), không giới hạn số lượng. Về điểm này, nhiều nhà cung cấp blog khác còn lâu mới đuổi kịp!



Add a Page Element
Hình 3

Làm thế nào để sắp xếp các widget trên sidebar?
Rất đơn giản, bạn chỉ cần kéo và thả (drop and drag) vị trí của chúng theo trật tự ưu thích sau đó click Save (Lưu lại) để kết thúc.


Kéo thả
Hình 4

Làm thế nào để đổi màu nền cho sidebar?
Bạn vào Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và chèn đoạn mã như hình 5:

background: #giátrịmàuthậplục;

Ví dụ: Màu đỏ

background: #cc0000;



Chèn màu
Hình 5

Lưu ý thêm, khi chúng ta dùng màu nền trong body, màu nền này phủ lên toàn trang, nghĩa là sẽ phủ hết cả header, main, sidebar và footer. Còn màu nền cho sidebar chỉ thay đổi trên sidebar.
Làm thế nào để đổi màu nền cho nhan đề widget trên sidebar?
Bạn muốn có một nhan đề có màu khác với nội dung trên mỗi widget? Trước hết bạn cần thêm một thành phần để hiển thị nhan đề. Hãy chép đoạn mã này và paste như hình 6.

.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color: #ffffff;
font-size: 120%;
font-weight:bold;
color: #333333;
}



Paste code
Hình 6

Trong đó các giá trị bạn margin và padding, background-color (màu nền) và color(màu), font-weight (kiểu hiển thị font: đậm, nghiêng), font-size (kích thước chữ)... cho text nhãn của widget được chèn vào sidebar. Hãy thay đổi các giá trị màu theo ý thích của bạn.

Giá trị màu ở đây là giá trị thập lục phân. Tôi sẽ viết một bài hướng dẫn về các biến màu mà blogger.com sử dụng và cách lấy giá trị này. Để đơn giản bạn có thể dùng link này http://www.colorschemer.com/online.html tìm mã màu.

Kết quả của hiển thị đoạn mã này, hình 7:



Hiển thị title
Hình 7

Làm thế nào để hiển thị đường viền (border) cho sidebar?
Đường viền dựa trên vị trí hiển thị, độ rộng, kiểu và màu sắc.

Các vị trí: border-right, border-left, border-top, border-bottom (phải, trái, trên dưới), hoặc tất cả: border . Kết hợp với:
border-width (rộng)
border-style (kiểu)
border-color (màu)

Bạn có thể kết hợp các vị trí với các yếu tố rộng, kiểu và màu sắc. Ở đây tôi chỉ hướng dẫn bạn border-width, border-style, border-color,
1. border-width. (độ rộng đường viền)
Có thể bao gồm các giá trị px, em hay các từ khóa thin(mỏng), medium(trung bình), và thick(dầy). Ví dụ: Lần lượt các đoạn mã này sẽ cho kết quả một đường viền mỏng, 1px và 2em:

border-width: thin;
border-width: 1px;
border-width: 2em;

2. border-style. (kiểu đường viền)
Lần lượt các đoạn mã dưới đây là sẽ cho kết quả đường viền như hình 8.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;



Kiểu border
Hình 8

3. border-color (màu đường viền)
Có nhiều cách để sử dụng màu: giá trị thập lục phân, mã màu RGB hay thậm chí tên màu (tất nhiên bằng tiếng Anh). Ví dụ: màu đỏ

border-color: #FF0000;
border-color: red;

Cách dùng tắt: lần lượt độ rộng, kiểu và màu (ví dụ):

border-right: 1px dotted red;

Bạn có được đoạn mã chẳng hạn như ví dụ trên, hãy chép đoạn mã này vào vị trí như được tô màu ở hình 9 và kết quả hình 10



Border sidebar
Hình 9



Border sidbar
Hình 10

Làm thế nào để chèn đường viền cho các widget chứa link?
Các widget như là linklist hay chứa link, bạn có thể chèn đường viền bao quanh nó, việc chèn này không làm ảnh hưởng widget không chứa liên kết. Cách chèn hình 11 và kết quả hình 12.



Lu
Hình 11



Show lu
Hình 12

Làm thế nào để chèn đường viền bao quanh nội dung trong các widget chứa link?
Cách chèn hình 13 và kết quả hình 14.



Li
Hình 13



Show li
Hình 14

Làm thế nào để chèn đường viền cho tất các widget?
Kéo thanh trên trên Edit HTML (Chỉnh sửa HTML) và tìm (phụ thuộc vào template có thể không giống nhau)

.sidebar .widget, .main .widget { 
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Bạn thấy dòng border-bottom:1px dotted $bordercolor; cho biết đường viền dưới, độ rộng 1px, kiểu chấm, màu của biến bordercolor. Chúng ta muốn sử dụng là đường viền bao quanh tất cả, vì vậy sẽ dùng border. Xin đọc ở trên nếu chưa quen với đường viền. Ngoài ra chúng ta còn phải dùng đến padding để đường viền hiển thị cân đối với nội dung. Ví dụ ở đây tôi thay bằng dòng code như được dùng ở các hướng dẫn trên. Các vị trí và kết quả hiển thị lần lượt hình 15 và 16 và bao phủ toàn bộ sidebar cũng như main.



Hình 15
Hình 15



Hình 16

Để khắc phục điểm này, bạn chỉ cần sửa lại như hình 17 và kết quả hiển thị, hình 18.



Hình 17
Hình 17



Hình 18
Hình 18

Thông qua việc tìm hiểu sidebar, bạn sẽ nắm được những thành phần cơ bản để làm cho blog mình "không giống ai". Blog thể hiện cá tính của người, hãy sáng tạo thỏa thích những gì mình muốn nhé! 
Chúc buổi tối vui vẻ!
Nguồn: http://www.vina7.com
Read more…

Hot