TẠO HIỆU ỨNG CHO LINK LIÊN KẾT

Người đăng: buonkhongem on Thứ Tư, 29 tháng 2, 2012

Để cho link liên kết thêm sống động, bạn phải gắn hiệu ứng cho nó.
Bạn bấm vào "Xem thử" để thấy rõ hơn hiệu ứng của link liên kết.



Xem thử


Để làm được điều này, bạn đăng nhập vào blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi copy đoạn code phía dưới và dán vào.



<style type="text/css">
a.navbar:hover {
color:;
font-weight:bold;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogisBwj4cErSlA_pgqqZmscOXvp5Tga4eiJttIgR-SuWRC-_iVJklKkXjtbLYov7KmN_NZWSfhZ4pGwvzgi71H2WISvCiLotA1MgjdWHXbETZ8bxck0Xbieg_5J9xXQIbT1kRKTxliNo/s1600/rainbow.gif);
}
a:hover, a.link:hover, a.navbar:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogisBwj4cErSlA_pgqqZmscOXvp5Tga4eiJttIgR-SuWRC-_iVJklKkXjtbLYov7KmN_NZWSfhZ4pGwvzgi71H2WISvCiLotA1MgjdWHXbETZ8bxck0Xbieg_5J9xXQIbT1kRKTxliNo/s1600/rainbow.gif);
font-size:10t;
color:;
text-decoration:none;
border:1px solid;
}
</style>


Bây giờ, bạn có thể đổi các dòng lệnh màu xanh và màu đỏ tuỳ theo ý thích của bạn, cuối cùng bấm Lưu lại là xong.
Dưới đây, là một vài mẫu hiệu ứng cho link liên kết, bạn bấm phải chuột vào ảnh chọn Save as (lưu ảnh dưới dạng)... để tải về, sau đó upload để lấy link chèn vào dòng lệnh màu đỏ.

































More about

TẠO CHỮ CHẠY TRONG KHUNG CÓ MÀU NỀN (KIỂU 2)

Người đăng: buonkhongem on Chủ Nhật, 26 tháng 2, 2012

Trước đây, tôi có "post" một bài về đề tài này (Xem TẠI ĐÂY).
Hôm nay, tôi chia sẻ với các bạn thêm một cách để tạo chữ chạy trong khung có màu nền do bạn tuỳ chọn.
Nói chung, kiểu này cũng giống với kiểu 1 nhưng nó có thêm những ưu điểm sau:
- Bạn có thể cho điều chỉnh tốc độ cho chữ chạy nhanh hay chậm.
- Khi chữ đang chạy bạn có thể cho nó dừng lại bằng cách rê chuột vào.
- Và điều đặc biệt là bạn có thể gắn link liên kết cho nó (với ưu điểm này, các bạn có thể dùng nó làm quảng cáo cho các bài viết hoặc liên kết đến các trang Web/blog khác....).
Bạn bấm vào Xem thử phía dưới để trải nghiệm nha.





Xem thử


Để làm được như vậy, các bạn đăng nhập vào blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả các code phía dưới vào

<marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="#FFE87C" scrollamount=3> <span style="font-weight:bold;font-size:150%;color: rgb(#ffffff,#7D053F, 0);">Cám ơn các bạn ghé tham quan và ủng hộ <a href="http://dunghennessy.blogspot.com">dunghennessy.blogspot.com.</a> Nếu có thắc mắc xin comments phía dưới mình sẽ trả lời cho bạn. Enjoy your stay</span>
</marquee>


Bây giờ bạn thay thế các dòng lệnh màu đỏ và màu xanh theo ý thích của mình. Trong đó:

* scrollamount=3: Đây là tốc độ của chạy của chữ (số càng lớn chữ càng chạy nhanh).
* bgcolor="#FFE87C": Màu nền của khung (Bạn có thể lấy mã màu TẠI ĐÂY).
* Font - size: 150%: Đây là kích cỡ của chữ.
* Bạn thay dòng chữ: "Cám ơn các bạn........Enjoy your stay!" bằng nội dung mà bạn muốn hiển thị.
* Thay địa chỉ http://dunghennessy.blogspot.com bằng địa chỉ liên kết mà bạn muốn liên kết đến (nếu không muốn gắn liên kết thì bạn xoá dòng <a href="http://www.dunghennessy.blogspot.com">dunghennessy.</a>)

Chúc các bạn thành công...
More about

TRUY CẬP NHANH ĐẾN TẤT CẢ CÁC DỊCH VỤ CỦA GOOGLE

Người đăng: buonkhongem on Thứ Bảy, 25 tháng 2, 2012

Chắc các bạn ai cũng biết "gã khổng lồ" Google??? "Gã khổng lồ" này có rất nhiều dịch vụ "con". Để vào các dịch vụ "con" này, các bạn phải nhập địa chỉ hoặc mở bookmark mất rất nhiều thời gian. Có một cách đơn giản hơn rất nhiều giúp bạn truy cập đến từng dịch vụ Google này một cách nhanh  chóng đó là cài một Add-on cho Google Chrome có tên là: Terminal for Google.

Đầu tiên, bạn dùng trình duyệt Google Chrome và truy cập VÀO ĐÂY.
Một bảng nhỏ hiện ra, bạn bấm vào thẻ phía trên cùng Add to Chrome > Install


Nếu cài đặt thành công thì phía trên thanh công cụ của Chrome các bạn sẽ thấy một biểu tượng hình chữ "g", khi bấm vào biểu tượng này các dịch vụ "con" của Google sẽ hiện ra trong một giao diện thống nhất.
Bây giờ, các bạn muốn sử dụng dịch vụ nào thì cứ "tự nhiên" bấm vào dịch vụ đó và trang Web tương ứng sẽ mở ra trong một thẻ mới để bạn tha hồ khám phá...

More about

TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (KIỂU 2)

Người đăng: buonkhongem on Thứ Sáu, 24 tháng 2, 2012

Với thủ thuật này, các bạn có thể tạo cho mình một menu ngang màu đen, bên phải của mỗi menu có hình mũi tên, khi rê chuột đến mũi tên này thì sẽ xuất hiện một dãy menu dọc được xổ xuống phía dưới.







Bạn bấm vào thẻ Xem thử phía dưới để thấy rõ hơn.

Xem thử


Đầu tiên, bạn đăng nhập vào Blog > Chọn Thiết kế > Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head>



Bây giờ, bạn copy đoạn code phía dưới dán trên dòng lệnh </head> này và bấm Lưu mẫu. (Vì đoạn code này xung đột với các code trên trang này, do đó các bạn thông cảm download TẠI ĐÂY)
Bước kế tiếp, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào.


<ul class="topnav">
 
<li><a href="#">Home</a></li>
<li>
<a href="#">Menu 1</a>
<ul class="subnav">
<li><a href="#">Menu con 1</a></li>
<li><a href="#">Menu con 2</a></li>
<li><a href="#">Menu con 3</a></li>
<li><a href="#">Menu con 4</a></li>
<li><a href="#">Menu con 5</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="subnav">
  <li><a href="#">Menu con 1</a></li>
  <li><a href="#">Menu con 2</a></li>
  <li><a href="#">Menu con 3</a></li>
  <li><a href="#">Menu con 4</a></li>
  <li><a href="#">Menu con 5</a></li>
  <li><a href="#">Menu con 6</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
 
</ul>



Bây giờ, bạn thay đổi các dòng lệnh màu đỏ (đây là tên hiển thị các menu, ví dụ: thủ thuật blogspot, thủ thuật Windows...) và dấu "#" màu xanh (đây là link các trang mà bạn muốn liên kết đến), cuối cùng bấm Lưu lại là xong.
Chúc các bạn thành công.

More about

TẠO BIỂU TƯỢNG LOADING CHO BLOGSPOT

Người đăng: buonkhongem on Thứ Tư, 22 tháng 2, 2012

Bạn có thể gắn biểu tượng LOADING...(đang tải dữ liệu..) cho blogspot với đoạn code đơn giản dưới đây. (Bạn có thể xem thử ngay tại trang dunghennesy.blogspot.com này)
Biểu tượng này "xuất hiện" khi đang load trang Web/Blog và nó sẽ "biến mất" khi trang đã load xong.

Thủ thuật này rất đơn giản, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào
 
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
<div id="imgLOAD" style="position:fixed;top:50px;right:400px" align="right">
Đang tải dữ liệu, chờ chút nha bạn!!!...<br/>
<img src="LINK CỦA BIỂU TƯỢNG LOADING"/></div>


Bạn thay đổi các dòng lệnh màu xanh, (nơi biểu tượng Loading xuất hiện), và dòng lệnh màu đỏ để phù hợp với Blog mình.
Bạn có thể VÀO ĐÂY để chọn cho mình một biểu tượng LOADING như ý nha.
Ngoài ra, bạn cũng có thể thay thế biểu tượng LOADING bằng những ảnh động, (xem và tải ảnh động TẠI ĐÂY).


Chúc các bạn vui!!!

More about

CHỮ XOAY TRÒN THEO CON TRỎ CHUỘT

Người đăng: buonkhongem on Chủ Nhật, 19 tháng 2, 2012

Kỳ trước, tôi có chia sẻ cho các bạn cách thay đổi hình dáng con trỏ chuột cho Blogspot (xem TẠI ĐÂY), để cho con chuột thêm đẹp bạn cũng có thể tạo những dòng chữ xoay tròn theo con trỏ chuột và đi bất cứ nơi nào trên blog khi chuột di chuyển, hiệu ứng này cũng "khá mướt", ở giới hạn trang bài viết này bạn có thể xem thử con chuột của dunghennessy nha (bạn chờ load trang xong sẽ thấy chữ chạy xoay tròn theo chuột).

Rất đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi copy đoạn code phía dưới vào.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: Times new roman;
color:   
#4AA02C;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){

// Your message here (QUOTED STRING)
var msg = "DUNGHENNESSY.BLOGSPOT.COM!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 15;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};

})();

</script>



Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ để phù hợp với blog của mình và bấm Lưu lại là xong
Chúc các bạn có "chú chuột Pro" nha




More about

THAY ĐỔI HÌNH DÁNG CON TRỎ CHUỘT PHẦN 2

Người đăng: buonkhongem on Thứ Sáu, 17 tháng 2, 2012

Trước đây, tôi có chia sẻ với các bạn cách thay đổi hình dáng con trỏ chuột (Xem TẠI ĐÂY).
Kỳ này, tôi tiếp tục chia sẻ với các bạn cách thay đổi hình dáng con trỏ chuột phần 2.



Phần 2 này, có 2 kiểu để bạn lựa chọn:
Kiểu 1: Với kiểu này thì bạn chỉ cần 1 hình ảnh cho con chuột.


Xem thử


Bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.

<div align="center" style="visibility: visible; z-index: 9;">
<style>
HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijSLj6ipfpS1jS2hk9-CtOBVZ84EpN_C4a2hpP2xooyQmleGNw6N5JhyphenhyphenaagqgR7imYlap0yfjReyuRU_aGknvtIKnJZNMWkeG9SvlWaROHZOFNFWt6ectcqiMDsi3C9KPKqvMnS8vU4g/s1600/batmanlogo.gif"), auto;}
</style></div>


Kiểu 2: Còn với kiểu 2 này, bạn phải cần đến 2 hình ảnh con trỏ chuột.



Xem thử


Bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào
<div align="center" style="visibility: visible; z-index: 9;">
<style>
HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HPitIeHy3Gb1gNjqjWd9Jv2MTv2c0wgLa8-pdfz-oYrRaNbYDDBs-_CVT7TOcsW_VW0nqcbA2fpN8wO67uTxMkJmp_BKzBcJR5LnSnJQGYw8oBsZkD23lHqDN853IS8illS1j1jNLEE/s1600/acespades.gif"), auto;}
</style></div>
<style>
A:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNAizB6OhPkHOZhCpuROSfNgf939N6qnPwor3T_YRQ4oKdlbXtlWTYMFfdwIs-pG86or0i_aPn8pEjjKaHjp7LIBjiV_VlxsQhPyijEszZJllfmLCP35fVth7xFLAP1OchThsosTRndo/s1600/acehearts.gif"), auto;}
</style>


Bạn thay đổi link màu đỏ (đây là link ảnh của con trỏ chuột) để có hình dáng con trỏ chuột theo ý của bạn.
Nếu chưa có hình con trỏ chuột nào vừa ý, bạn có thể bấm vào thẻ phía dưới để lựa chọn cho mình con trỏ chuột "dễ thương" nha.



Xem và tải hình con trỏ chuột



More about

WELCOME TO MY PAGES

Người đăng: buonkhongem on Thứ Hai, 13 tháng 2, 2012

Tôi có sưu tầm ở một vài trang Web nước ngoài một số ảnh động đi kèm với chữ: WELCOME, WELCOME TO MY PAGES... khá đẹp với nhiều kích thước khác nhau, với những hình ảnh động WELCOME này bạn có thể dùng để trang trí cho Blog mình thêm đẹp.
Bạn bấm phải chuột vào hình mình thích và chọn Save as...(lưu ảnh với dạng...) để tải ảnh về.
Mời các bạn xem các ảnh phía dưới.























More about