BẢNG THÔNG BÁO (Kiểu 8)

Với kiểu 8 này, bảng thông báo sẽ xuất hiện trong quá trình load trang, khi khách tham quan xem xong nội dung và bấm OK thì quá trình load trang sẽ tiếp tục. Điều đặc biệt là bảng thông báo này chỉ xuất hiện chỉ có một lần duy nhất, các lần load trang tiếp theo của blog sẽ không có bảng thông báo này để tránh "phiền hà" các lượt xem trang tiếp theo cho khách tham quan...
Mời bạn bấm vào Xem thử phía dưới để thấy rõ bảng thông báo này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script>
//specify message to alert
var alertmessage="Nhập nội dung thông báo vào đây"

//Alert only once per browser session (0=no, 1=yes)
var once_per_session=1
function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
alert(alertmessage)
}

if (once_per_session==0)
loadalert()
else
alertornot()

</script>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

3 MÀU XOAY QUANH CON TRỎ CHUỘT

 Với đoạn code dưới đây, con trỏ chuột của bạn được "tô điểm" xung quanh "nó" 3 màu sắc khác nhau, 3 màu sắc này sẽ xoay quanh con trỏ chuột với hiệu ứng hình xoắn ốc khá đẹp.
Bạn có thể xem thử con trỏ chuột của dunghennessy nha.

Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về), không áp dụng cho giao diện mặc định của Blogspot...

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript">
if  ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here...
var xCol = "#ff0000";
var yCol = "#ffffff";
var zCol = "#0000ff";
var n = 6;   //number of dots per trail.
var t = 40;  //setTimeout speed.
var s = 0.2; //effect speed.
//End.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++){
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else{
  if (d.documentElement &&
  typeof d.documentElement.clientWidth == "number" &&
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{
  if (d.body &&
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView &&
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;  
 if (typeof e.pageY == 'number'){
  my = e.pageY - msy + 16;
  mx = e.pageX + 6;
 }
 else{
  my = e.clientY - msy + 16;
  mx = e.clientX + 6;
 }
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn(){
for (j = 0; j < 3; j++){
 dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) + scrl(0) + pix;
 dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++){
 if (i < n-1){
  vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
  vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
  vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
 }
 else{
  vx[i].top = dy[0]; vx[i].left = dx[0];
  vy[i].top = dy[1]; vy[i].left = dx[1];
  vz[i].top = dy[2]; vz[i].left = dx[2];
  }
 }
setTimeout(assgn,t);
}
function init(){
for (i = 0; i < n; i++){
 vx[i] = document.getElementById("x"+(idx+i)).style;
 vy[i] = document.getElementById("y"+(idx+i)).style;
 vz[i] = document.getElementById("z"+(idx+i)).style;
 }
winsize();
assgn();
}
if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
 document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
 window.attachEvent("onload",init);
 document.attachEvent("onmousemove",mouse);
 window.attachEvent("onresize",winsize);
}
})();
}//End.
</script>

Bây giờ, để phù hợp với màu nền của blog mình, "nhiệm vụ" của bạn cần làm là thay đổi các dòng lệnh màu đỏ (đây chính là các màu sắc xoay quay con trỏ chuột),  cuối cùng bấm Lưu lại là xong.
Bạn có thể bấm vào thẻ phía dưới để lấy các mã màu mà mình muốn nha.

Xem và lấy mã màu

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

HÌNH ẢNH "BAY" TRÊN NỀN BLOG

Để "trang hoàng" cho blog thêm đẹp, bạn có thể dùng thủ thuật này gắn các hình ảnh, các Icon, Avatar, Favicon, Logo hoặc những biểu tượng "độc quyền" của mình lên trên nền blog. Các hình ảnh này luôn luôn xuất hiện trên toàn bộ blog và "nó" sẽ chạy theo khi bạn kéo thanh trượt lên xuống...Đặc biệt hơn là khi bạn click chuột vào các hình ảnh này, "nó" sẽ dẫn bạn đến các trang liên kết mà bạn đã định trước (dùng để quảng cáo, blog liên kết...)

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/bichay/bongbongj1.js"> </script>
<script type="text/javascript">

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);


movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>


<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://dunghennessy.blogspot.com"><img src="Link ảnh 1" border="0" /></a>
</div><div id="flyimage2" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://dungheineken.blogspot.com"><img src="Link ảnh 2" border="0" /></a>
</div><div id="flyimage3" style="position:absolute; left: -500px; width:47; height:68;">
<a href="http://anhdepblog.blogspot.com"><img src="Link ảnh 3" border="0" /></a>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO SLIDESHOW ẢNH (Kiểu 1)

Thủ thuật này sẽ giúp bạn có được một Slideshow ảnh trên Web/Blog để bạn khoe những hình ảnh đẹp của bạn, người thân và gia đình...

Các ảnh sẽ được thay đổi theo thời gian do bạn định trước, khi click vào một ảnh "nó" sẽ dẫn bạn đến trang liên kết do bạn chỉ định (dùng để quảng cáo, blog liên kết....)

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<center><script language="JavaScript1.1">
<!--
//Visit http://www.dunghennessy.blogspot.com for this script
//specify interval between slide (in mili seconds)
var slidespeed=3000 //thời gian chuyển ảnh 1000=1s
//specify images
var slideimages=new Array("link ảnh 1","link ảnh 2","link ảnh cuối cùng")
//specify corresponding links
var slidelinks=new Array("http://www.dunghennessy.blogspot.com","http://dungheineken.blogspot.com","http://www.anhdepblog.blogspot.com") //các link liên kết theo thứ tự

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

//-->
</script>
<a href="javascript:gotoshow()"><img border="0" name="slide" src="photo1.jpg" style="filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1);" /></a>

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()

//-->
</script></center>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này (có dấu phẩy phía sau):
"link ảnh",
Dán phía trước dòng lệnh "link ảnh cuối cùng"

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 1)

Để minh hoạ cho bài viết, các bạn thường hay gắn các hình ảnh và những lời chú thích cho "nó".

Với thủ thuật dưới đây, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp được trượt từ trên hình ảnh xuống phía dưới.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{
position: absolute;
width: 95%; /* Độ rộng của bảng chú thích */
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* Độ trong suốt của bảng chú thích */
color: Yellow; /* Màu chữ */
-moz-border-radius: 12px 12px 12px 12px; /* Kích thước bo tròn cho bảng chú thích */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ của link liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
</style>

<div class="imagepluscontainer" style="height: 320px; width: 240px; z-index: 2;">
<img src="Link ảnh" />
<div class="desc">
Nhập lời chú thích tại đây <a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-mat-troi-mat-trang-va-trai-at.html">TẠI ĐÂY</a> Chúc các bạn vui vẻ.</div>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ để cho phù hợp với ảnh, sau cùng bấm Lưu lại là xong.


* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO MENU NGANG BẰNG HÌNH ẢNH

Hôm nay, rãnh rồi "mò mẫm" làm được thanh menu ngang bằng hình ảnh. 
Trong giới hạn bài viết này, tôi dùng menu ngang để đăng nhập vào các trang mạng chia sẻ của mình.

Ở menu ngang này, khi bạn rê chuột vào ảnh thì ảnh sẽ được phóng lớn hơn đi kèm với lời chú thích nhỏ. Điều đặc biệt là khi bạn click chuột vào, "nó" sẽ mở ra một bảng nhỏ để bạn có thể đăng nhập vào các trang mạng của mình mà không phải rời khỏi trang Blog hiện tại.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script language="JavaScript">
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=450,left = 280,top = 180');");
    }
    </script>
<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 64px;
height:64px;
}

.bubblewrap li img{
width: 64px; /* độ rộng của hình ảnh.*/
height: 64px; /* chiều cao của hình ảnh.*/
border:0;
margin-right: 14px; /*Khoảng cách giữa 2 ảnh*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>
<center>
<ul class="bubblewrap">
<li><a href="javascript:popUp('http://funnylogo.info/engines/google/red/dunghennessy.aspx')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_mXJ5FWo-LpVRMOSKnghBha8WchyXTjRXurWEyNXb2-Nw0EzlmXnuwpbWfXLiRiiyXVXqARL0dSz-gAi6yZPacFhbGCEyfH7RDM053KqZBAC9EXgNAO55KqWwtI0_r-lbjL_slTJTNkI/s1600/Google-Chrome-icon.png" title="Tìm kiếm trên Google" /></a></li>
<li><a href="javascript:popUp('https://accounts.google.com/servicelogin?service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup=http://www.blogger.com/home&ltmpl=start#s01')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixfhUkUCOGlrQCRdbJVHYy3cPpmq0Lyf4BBPvPY543qPmmEzArhKDfHUYsXLkAA7z_Ml3HO2CP7At0NhPYrBf3xAmeS1NvNfO0lmVWZ9m5SsB_hYc3ZamMirS_o2kK_8TM9K2r6C7Y46Y/s1600/Blogger-icon.png" title="Đăng nhập Blogspot" /></a></li>
<li><a href="javascript:popUp('https://accounts.google.com/servicelogin?service=mail&passive=true&rm=false&continue=http://mail.google.com/mail/&scc=1&ltmpl=default&ltmplcache=2')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX82nQre_F6hMxM0nsjqR4YI5Z9CukwyogfhxLUL2UGyTU2saMT8mB3CDbpvea60VT_-rQQZTRrnlIp5GfDqoO9DUqv7t_Mdyrn47EZmDzyokE44ktfFIGU3jOgUmWkIU-OoYcdajsDcQ/s1600/Google-icon.png" title="Đăng nhập Gmail" /></a></li>
<li><a href="javascript:popUp('http://twitter.com/#!/sessions/new')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTG0Q1J-jhzdJLUSXs-qWDwnKtWcfFC12eUAnQG2zleYGBzwHENoB0ha5X9IMVK1E57ZSHSkRUUI1tHxmkyUgUTh7n_KU7z7iySbhqBaIaBYENSx5Hr7azSId5-nQp_ZeN1h6WlC-NQDE/s1600/Twitter-icon.png" title="Đăng nhập Twitter" /></a></li>
<li><a href="javascript:popUp('http://www.facebook.com')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHkOLUrb_q6pzalMMNhrRGC9ljp3-U3y_xXqIEuuKAumvMCu2hVSolnyr-tMthY9v-Ot6yryPxV7MLm4rKxLomecmUByLROjteZITs72X7fT3CDM6kOnf9IoKoEy0IZJloMBQLpBKlHU/s1600/facebook-icon.png" title="Đăng nhập Facebook" /></a></li>
<li><a href="javascript:popUp('https://login.yahoo.com/config/login?.src=fpctx&.intl=vn&.pd=c%3d6t7evjap2e6cwwsb86qvdqk-&.done=http%3a%2f%2fvn.yahoo.com%2f')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzKW7lOS64J_LyY5Ed8wLsMaPBOfx3zuTQE2t1M8S61TQVCNtngvdZF_6ZRpeL7RAmrjx9sbPWtVCa6tCLr_fo3424vNHTh2_gjhbz0EcvN4pfDdQkUP0VfJ6vMKanBOjAgH6cADQAII/s1600/yahoo-icon.png" title="Đăng nhập Yahoo" /></a></li>
<li><a href="javascript:popUp('http://www.youtube.com/')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xL4EIGPfaCJwsjnYz_URlBx8OyStA8XtyicAunyJI6Oefozmz3B2KvcyRTgXdYqebdwYYc3BMbMVWDCGH14UDe7SZ56FtkuvKZRujm93q0hlt0i3gK_Jh0gUDlSbfC_SkHoTqTYki8c/s1600/youtube-icon.png" title="Đăng nhập Youtube" /></a></li>
</ul></center>

Bây giờ, bạn cần thay đổi các dòng lệnh màu xanh (bao gồm độ rộng, chiều cao và nơi xuất hiện của bảng Popup), màu đỏ (bao gồm kích thước của ảnh, khoảng cách giữa 2 ảnh, địa chỉ link liên kết, link ảnh và chú thích của ảnh ở mục title), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 ảnh nữa thì copy dòng code này.

<li><a href="javascript:popUp('địa chỉ liên kết')"><img src="link ảnh" title="chú thích cho ảnh" /></a></li>

Dán phía trên thẻ đóng </ul> cuối cùng.

Như đã giới thiệu ở đầu bài, code của menu ngang này tôi dùng để đăng nhập vào các trang mạng. Ngoài ra, bạn có thể dùng tiện ích này để tạo cho mình một menu ngang dùng để giải trí như: xem phim, nghe nhạc, xem truyện cười, clip hài... hoặc dùng để liên kết đến các trang nhãn trong blog của mình bằng cách thay đổi các địa chỉ liên kết  và các ảnh khác tương ứng.

Để kiếm hình ảnh cho tiện ích, bạn bấm vào thẻ phía dưới nha:

Xem và tải icon

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO LOGO TRỰC TUYẾN (Phần 3)

Trước đây, tôi có chia sẻ với các bạn một trang tạo Logo (Phần 2) Xem TẠI ĐÂY.

Tiếp hôm nay, tôi xin chia sẻ thêm cho các bạn một trang tạo Logo trực tuyến cũng khá đẹp với nhiều mẫu mã có sẳn để bạn tha hồ lựa chọn...

Tại trang này, bạn có thể add các dòng chữ hoặc tên Blog của mình vào các hình ảnh lạ mắt.

Dưới đây là một vài mẫu tôi làm từ trang dịch vụ này, mời các bạn tham khảo:

Còn nhiều mẫu khá đẹp đang chờ các bạn khám phá. Nếu các bạn quan tâm thì bấm vào thẻ phía dưới:

Xem hướng dẫn và tạo Logo

Chúc các bạn có một Logo đẹp cho blog của mình

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (Kiểu 3)

Nếu bạn chưa thoả mãn với 2 kiểu menu ngang xổ xuống một cấp (kiểu 1: Xem TẠI ĐÂY, kiểu 2: Xem TẠI ĐÂY.), các bạn có thể sử dụng menu ngang kiểu 3 này.
Với thủ thuật này, khi rê chuột vào một mục bất kỳ trên thanh menu sẽ có một menu con xổ dọc xuống "khá mướt" và khi bạn rê chuột vào thì menu con sẽ đổi màu "khá đẹp".

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 

Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về), còn nếu áp dụng cho các giao diện mặc định của Blogspot thì bạn phải kéo tiện ích này nằm sát trên khu vực bài đăng thì menu con mới xổ xuống được...

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 913px; /* Độ rộng của toàn bộ thanh menu */

    margin: 0px auto ;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: left;

    padding: 12px 28px;

    color: #999;

    text-transform: uppercase;

    font: bold 12,5px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fafafa;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 170px; /* Độ rộng của menu con */

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="mbt-menu">
    <li><a href="http://dungheineken.blogspot.com/">Trang chủ</a></li>
    <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>
<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>

<li>
   <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>



    </ul>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước menu chính, kích thước menu con, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chính nữa thì copy dòng code này.

<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

Dán phía trên thẻ đóng </ul> cuối cùng

(Code của menu này được sưu tầm từ một trang Web nước ngoài, tôi đã chỉnh sửa lại đôi chút để phù hợp hơn...).

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

MENU DỌC XỔ XUỐNG NHIỀU CẤP

Với thủ thuật dưới đây, trên blog của bạn sẽ có một menu dọc khá đặc biệt, đó là khi bạn rê chuột vào một menu bất kỳ thì nó sẽ xổ ra một số menu con nhiều cấp nữa.
Bạn có thể làm menu con cấp 2, cấp 3...tuỳ thuộc vào link liên kết nhiều hay ít.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 
Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về) không áp dụng cho các giao diện mặc định của Blogspot...

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style type="text/css">

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 200px; /* Độ rộng của menu chính cấp 1 */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 250px; /* Độ rộng của menu con cấp 2 và 3 */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaX7JU3dklaQguYkTU3G9VGQafUUbaLNrGyIQYe-IQIDTQXHbhWcXNq-_FzSUd0NkU9p0zlcR-L1VvMeu7_6tSE9wsr9DkqJKDmjaPHZkJMyP62tKAH6Gb3u_pYCchRMpR1PF5a1W4dnt/s1600/right.gif) no-repeat 97% 50%;
}


</style>

<script type="text/javascript">


var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Tên menu cấp 1</a></li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>

  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li> 
    </ul>
  </li>


  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
</ul>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>

  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>


  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>


<li><a href="#">Tên menu cuối</a></li>

</li></li></ul></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chỉ có một cấp thì copy dòng code này.
<li><a href="#">Tên menu cấp 1</a></li>

Dán phía trên dòng lệnh
<li><a href="#">Tên menu cuối</a></li>

* Muốn thêm 1 menu có 2 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>


* Muốn thêm 1 menu có 3 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

ICON ĐẸP CHO WEB/BLOG

Icon là thành phần không thể thiếu trên Web/Blog, ngoài việc trang trí thêm đẹp, các bạn cũng có thể dùng Icon để minh hoạ cho bài viết...

Hiện nay, bạn có thể dễ dàng tải Icon từ một số trang dịch vụ trực tuyến, các Icon trên dunghennessy thường được tải ở một trang dịch vụ này. Mời các bạn xem vài mẫu phía dưới.

Còn hàng ngàn Icon đẹp đang chờ bạn khám phá....

Chúc các bạn có Icon đẹp cho blog của mình

Xem và tải Icon

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀