GẮN ẢNH VÀO LINK LIÊN KẾT

Khi bạn bấm vào một link liên kết bất kỳ trên Web/Blog, nó sẽ dẫn các bạn đến một trang Web/Blog nào đó do người quản trị gắn liên kết.

Với thủ thuật dưới đây, các bạn sẽ giao thêm "nhiệm vụ" cho link liên kết đó là: khi bạn rê chuột vào link liên kết lập tức sẽ xuất hiện một bảng nhỏ có hình ảnh và vài dòng giới thiệu khá đẹp mắt cho link liên kết

Mời bạn bấm rê chuột xuống các link liên kết phía dưới để thấy rõ hơn thủ thuật này.

Ảnh động trái tim
Đây là trang ảnh động có chủ đề trái tim với kích thước 240x320. Bấm vào link hoặc vào ảnh để đến trang này

Ảnh động sông hồ
Tại đây, các bạn sẽ được chiêm ngưỡng một số ảnh động có chủ đề sông hồ khá đẹp mắt. Bấm vào link hoặc vào ảnh để đến trang Web này.

Ảnh động thác nước
Thác nước là một trong những cảnh đẹp của thiên nhiên, bạn bấm vào link hoặc vào ảnh xem những cảnh đẹp này

Ảnh động con rồng
Tại đây, bạn có thể dễ dàng tìm thấy những ảnh động CON RỒNG khá đẹp với kích thước 240x320. Bấm vào link hoặc vào ảnh để đến trang Web này. Chúc bạn vui

Thủ thuật này cũng khá đơ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 rồi dán đoạn code phía dưới vào.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 80px; /*position where enlarged image should offset horizontally */

}

</style>

<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />

<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />

<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />

<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />

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

Mở rộng thêm:
Nếu muốn nhiều hơn link liên kết, bạn chỉ việc copy thêm đoạn code này và dán phía dưới, cuối cùng bấm Lưu lại là xong.

<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />

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

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

BẢNG THÔNG BÁO CHO BLOG (Kiểu 6)

Trước đây, tôi có chia sẻ với các bạn một số mẫu để làm Bảng Thông báo cho Web/Blog (Xem TẠI ĐÂY).
Hôm nay, tôi chia sẻ thêm cho các bạn một mẫu Thông báo (kiểu 6).
Với kiểu này, thì ở góc bên phải của bảng thông báo sẽ có nút tắt để đóng thông báo lại, đặc biệt hơn là bạn có thể bấm trái chuột vào tiêu đề của bảng thông báo để di chuyển bảng thông báo này đến bất cứ nơi nào bạn muốn trên Web/Blog. (Lưu ý thủ thuật này chỉ áp dụng thành công trên giao diện V2 được tải trên mạng về, không áp dụng cho giao diện mặc định của Blogspot.)

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

Xem thử

Thủ thuật này cũng khá đơ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 rồi dán đoạn code phía dưới vào.

<script type="text/javascript">


var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>


<div id="showimage" style="position:absolute;width:250px;left:40px;top:110px">

<table border="0" width="400" bgcolor="#025E02" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onmousedown="initializedrag(event)"><ilayer width="100%" onselectstart="return false"><layer width="100%" onmouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onmouseout="dragswitch=0"><center><font face="Verdana"
        color="#FFFFFF"><strong><medium>TIÊU ĐỀ THÔNG BÁO</medium></strong></font></center></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onclick="hidebox();return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0JWBgm_akYq2hhT6-KcR5Zh2zQqTPM1hz_SOrYcoxstL6accOYmdemn2pEUiylBarmWqeaqP0gmJmMVhIdJrT3QtUh2Nsl5qmubDosqxcjPF6m-Imu-6yjgv67ZQn8KUwjCOPueF6Z4/s1600/Sign-Close-icon.png" width="20px"
 height="20px" border="2" /></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFF380" style="padding:4px" colspan="2">

BẠN NHẬP NỘI DUNG CỦA BẢNG THÔNG BÁO TẠI ĐÂY
</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</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à nội dung của bảng thông báo), màu xanh (nơi bảng thông báo xuất hiện) để phù hợp với blog của bạn và bấm Lưu lại là xong.

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

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

ĐÓNG KHUNG CHO FLASH (Kiểu 1)

Flash là một thành phần không thể thiếu trên một Web/Blog, các file Flash này sẽ làm cho Web/Blog của bạn thêm sinh động hơn.

Với thủ thuật dưới đây, các bạn sẽ làm file Flash trông đẹp hơn nhờ vào việc đóng khung cho nó.

Bạn xem thử vài mẫu phía dưới nha:

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 rồi dán đoạn code phía dưới vào.

<iframe name="cwindow" style="border:15px double green" width=500 height=300 src="dán địa chỉ  file flash vào đây"></iframe>

Bây giờ, bạn chỉ việc thay đường link file Flash vào và thay đổi chiều rộng (Width), chiều cao (Height), bạn có thể đổi màu cho khung như: green, blue, red, organe, white, black, yellow...theo ý thích của mình. Cuối cùng bấm Lưu lại là xong.
Bạn cũng có thể áp dụng thủ thuật này để đóng khung cho ảnh cũng được, bạn xem mẫu phía dưới:

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

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

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (Kiểu 3)

Tương tự kiểu 1 (Xem TẠI ĐÂY) và kiểu 2 (Xem TẠI ĐÂY). Menu ngang này cũng xổ dọc xuống nhiều cấp khi bạn bấm vào một menu chính phía trên.

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

Xem thử

Thủ thuật này cũng khá đơ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 rồi dán đoạn code phía dưới vào.

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-xanhgoc.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu.js">
</script>

<div id="ddtopmenubar" class="ubercolortabs">
<ul>
<li><a href="http://www.dunghennessy.blogpsot.com"><span>Trang chủ</span></a></li>
<li><a href="#" rel="ddsubmenu1"><span>Tên menu chính số 1</span></a></li>
<li><a href="#" rel="ddsubmenu2"><span>Tên menu chính số 2</span></a></li>
<li><a href="http://anhdepblog.blogspot.com/"><span>Ảnh đẹp cho Blog</span></a></li>
<li><a href="#" rel="ddsubmenu3"><span>Tên menu chính số 3</span></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>
<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 1, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<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>
  <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></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>
    <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>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>


<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 2, các bạn thay đổi tên menu con và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<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>
  <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></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>
    <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>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 3, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

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

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

MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 2)

Tương tự kiểu 1 (Xem TẠI ĐÂY), menu ngang này sẽ đổi màu Tab khi bạn rê chuột vào.
Khi bạn rê chuột vào một mục bất kỳ trên menu ngang này thì lập tức một nút bấm xuất hiện lướt từ bên trái qua khá mướt. Khi bạn bỏ chuột ra, nút bấm này sẽ chạy ngược về mục đầu tiên. (Thủ thuật này chỉ áp dụng cho blog V2 blog được tải trên mạng về, không áp dụng cho giao diện mặc định của Blogspot)

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

Xem thử

Thủ thuật này cũng khá đơ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 (hoặc đă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/menungang-hieuungdong/menungang.js"></script>

<script src="http://dl.dropbox.com/u/66348944/dunghennessy/menungang-hieuungdong/gooeymenu.js">

</script>

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/66348944/dunghennessy/menungang-hieuungdong/gooeymenu.css" /><ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="#"class="selected">Trang chủ</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1',  fx:'swing'})
</script>

Bây giờ, bạn cần thay đổi tên menu, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu muốn thêm menu thì bạn copy đoạn code này:

<li><a href="#">Tên menu con </a></li>

Dán tiếp trên dòng lệnh </ul> cuối cùng

Các nút bấm này là do 3 file ảnh gộp lại, vì vậy tôi đã làm sẳn cho các bạn thêm 2 màu nữa để bạn lựa chọn phù hợp với blog của mình: (đoạn code hướng dẫn trong bài nút bấm là màu xanh lá)

* Nút bấm màu đỏ: Bạn thay dòng gooeymenu.css (màu xanh) thành gooeymenu3.css

* Nút bấm màu xanh dương nhạt: Bạn thay dòng gooeymenu.css thành gooeymenu2.css

Cuối cùng bấm Lưu lại là xong.

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

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

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 3)

Tương tự kiểu 1 và kiểu 2, menu dọc này cũng xổ dọc xuống các menu con khi bạn bấm chuột vào menu chính nhưng đặc biệt hơn ở chỗ là khi bạn đang xem menu nào thì menu đó sẽ có màu khác (màu đỏ) tất cả menu còn lại sẽ có màu đen...

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

Xem thử

Thủ thuật này cũng khá đơ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 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/menudoc-menucon/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">

</script>


<script type="text/javascript">


ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 220px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwVDIuA0lHNJtugggZyKvw7wfqudlPOsrYTFIlF9ktims7dxnebkpYtRAXQrsLWDTmxdf0YelKS7uN9vmnUnM3GzGk7Si5yEOc-bwTwbHQK1y5ROt7qDksf2M7HQaEZlZRLxIUrIYSzBk1/s1600/titlebar.png) repeat-x center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmTcu6pkmLFmz4ygIhIYu2n9No8AbGepqbWHdNvRIBP4CzSoQlm81Y8qtZmsrQO8hQNlAF564zRjiuUod4JfbXwWvfleA__reTBWXK3EAKz_NgfMq0ThM9wIB85Ny6ir3GS3rHp6DKdPJ/s1600/titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRN4HmOvEV57TaS5JAPOO879ePLfJbkox3ex9Njhyphenhyphenc0jy3J6GjYBbSBoLkykSQLivkqZxDJUW3OnYHdff8uDkUc6qcS1muxUdY5OIdc-cBaj9uLI5wHbJGShAIl1oXaMFJOw0H4L3201g/s1600/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>


<div class="arrowlistmenu">

<h3 class="menuheader expandable">☆Tên menu chính 1</h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
    <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
<li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên meun chính 2</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
        <li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên menu chính 3</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên menu chính 4</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>



</div>

Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu muốn thêm menu phụ thì bạn copy đoạn code này:

<li><a href="#">Tên menu con </a></li>

Dán tiếp trên dòng lệnh </ul> của mỗi menu chính mà mình muốn thêm.

Còn muốn thêm một menu chính thì bạn copy đoạn code này:

   <h3 class="menuheader expandable">☆Tên menu chính </h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
     <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
</ul>

Dán trên thẻ </div> cuối cùng.

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

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

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 2)

Thủ thuật này cũng giống như Kiểu 1 (Xem TẠI ĐÂY). Menu chính sẽ xổ xuống các menu phụ khi bạn click chuột vào nó, click vào lần nữa sẽ rút gọn menu lên... Ngoài ra, trên đầu menu còn có 2 tab "hiện hết menu" để bạn tiện sử dụng và tab "Rút gọn menu" để bạn đóng menu lại cho gọn khi hết sử dụng...

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

Xem thử

Thủ thuật này cũng khá đơ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 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/menudoc-menucon/sdmenu.js"></script>

    <script type="text/javascript">
window.onload = function() {

        myMenu = new SDMenu("my_menu");

        myMenu.init();

    };

 
    </script>
<link rel="stylesheet" type="text/css" href="http://bloggiaovienthaibinh.110mb.com/sdmenu/sdmenu/sdmenu.css" />
    <form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">

         <input type="button" value="Hiện Menu" onclick="myMenu.expandAll()" />

        <input type="button" value="Rút gọn menu" onclick="myMenu.collapseAll()" />

 
    </form>

    <div style="float: left" id="my_menu" class="sdmenu">

      <div>

        <span>Tên menu chính 1</span>

        <a href="#">Tên menu phụ 1</a>

        <a href="#">Tên menu phụ 2</a>

        <a href="#">Tên menu phụ 3</a>

        <a href="#">Tên menu phụ 4</a>

        <a href="#">Tên menu phụ 5</a>

      </div>

      <div>

        <span>Tên menu chính 2</span>

        <a href="#">Tên menu phụ 1</a>

        <a href="#">Tên menu phụ 2</a>

        <a href="#">Tên menu phụ 3</a>

        <a href="#">Tên menu phụ 4</a>

      </div>

      <div class="collapsed">

        <span>Tên menu chính 3</span>

          <a href="#">Tên menu phụ 1</a>

        <a href="#">Tên menu phụ 2</a>

        <a href="#">Tên menu phụ 3</a>


      </div>

      <div>

        <span>Tên menu chính 4</span>

        <a href="#">Tên menu phụ 1</a>

        <a href="#">Tên menu phụ 2</a>

        <a href="#">Tên menu phụ 3</a>

        <a href="#">Tên menu phụ 4</a>

        <a href="#">Tên menu phụ 5</a>

      </div>

    </div>

Bây giờ, bạn cần thay đổi tên menu chính và phụ, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu muốn thêm menu phụ thì bạn copy đoạn code này:

<a href="#">Tên menu phụ 1</a>

Dán tiếp xuống phía dưới Menu chính nào mà mình muốn thêm.

Còn muốn thêm một menu chính thì bạn copy đoạn code này:

   <div>
        <span>Tên menu chính 2</span>
        <a href="#">Tên menu phụ 1</a>
        <a href="#">Tên menu phụ 2</a>

      </div>

Dán trên thẻ </div> cuối cùng.

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

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

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 1)

Để đáp ứng lời yêu cầu của các bạn, bắt đầu từ bài này mình sẽ lần lượt chia sẻ đến các bạn một số mẫu MENU DỌC XỔ XUỐNG CÁC MENU CON.

Với thủ thuật này, trên blog các bạn sẽ có một menu dọc khá đẹp, khi rê chuột vào mỗi menu sẽ có một bản tóm tắt giới thiệu về menu này. Khi bạn bấm chuột vào menu sẽ xuất hiện một số menu con phía dưới, bấm lần nữa thì menu này sẽ rút gọn lên... Bạn bấm vào Xem thử phía dưới để thấy rõ thủ thuật menu dọc này.

Xem thử menu

Thủ thuật này cũng khá đơn giản, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán tất cả các đoạn code vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">

</script>

<script type="text/javascript">

//Initialize Arrow Side Menu:

ddaccordion.init({

            headerclass: "menuheaders", //Shared CSS class name of headers group

            contentclass: "menucontents", //Shared CSS class name of contents group

            revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"

            mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover

            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false

            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.

            onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)

            animatedefault: false, //Should contents open by default be animated into view?

            persiststate: true, //persist state of opened contents within browser session?

            toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)

            animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"

            oninit:function(expandedindices){ //custom code to run when headers have initalized

                        //do nothing

            },

            onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed

                        //do nothing

            }

})

</script>

<style type="text/css">

.arrowsidemenu{

            width: 250px; /*width of menu*/

            border-style: solid solid none solid;

            border-color: #94AA74;

            border-size: 1px;

            border-width: 1px;

}

           

.arrowsidemenu div a{ /*header bar links*/

            font: bold 12px Verdana, Arial, Helvetica, sans-serif;

            display: block;

            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr1pdz2H-WhVsFfq2wCtBhZU3NWwDR67ajnrp86ZIg6XUozULYj6thXig7cx09K_6eIVnwOLEy9SMgGlGL2Xg7_bnkrvMbzA6DuIIF6QxtGSzKCDPLvlqyqCoC1AkCnW4rVgBH5BLYDpee/s1600/arrowgreen.gif) 100% 0;

  height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/

            padding: 4px 0 4px 10px;

            line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/

            text-decoration: none;

}

           

.arrowsidemenu div a:link, .arrowsidemenu div a:visited{

            color: #26370A;

}

.arrowsidemenu div a:hover{

            background-position: 100% -32px;

}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/

            color: #6F3700;

}

           

.arrowsidemenu div.selected a{ /*header that's currently selected*/

            color: blue;

            background-position: 100% -64px !important;

}

.arrowsidemenu ul{

            list-style-type: none;

            margin: 0;

            padding: 0;

}

.arrowsidemenu ul li{

            border-bottom: 1px solid #a1c67b;

}

.arrowsidemenu ul li a{ /*sub menu links*/

            display: block;

            font: normal 12px Verdana, Arial, Helvetica, sans-serif;

            text-decoration: none;

            color: black;

            padding: 5px 0;

            padding-left: 10px;

            border-left: 10px double #a1c67b;

}

.arrowsidemenu ul li a:hover{

            background: #d5e5c1;

}

</style>

<div class="arrowsidemenu">

<div><a href="http://www.dunghennessy.blogspot.com" title="Home">● TRANG CHỦ</a></div>

<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>

            <ul class="menucontents">

            <li><a href="#">Tên menu con 1</a></li>

            <li><a href="#">Tên menu con 2</a></li>

            <li><a href="#">Tên menu con 3</a></li>

            <li><a href="#">Tên menu con 4</a></li>

            <li><a href="#">Tên menu con 5</a></li>

            <li><a href="#">Tên menu con 6</a></li>

            <li><a href="#">Tên menu con 7</a></li>

            <li><a href="#">Tên menu con 8</a></li>

            </ul>

<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>

            <ul class="menucontents">

            <li><a href="#">Tên menu con 1</a></li>

            <li><a href="#">Tên menu con 2</a></li>

            <li><a href="#">Tên menu con 3</a></li>

            <li><a href="#">Tên menu con 4</a></li>

            <li><a href="#">Tên menu con 5</a></li>

            <li><a href="#">Tên menu con 6</a></li>

            </ul>

<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>

            <ul class="menucontents">

            <li><a href="#">Tên menu con 1</a></li>

            <li><a href="#">Tên menu con 2</a></li>

            <li><a href="#">Tên menu con 3</a></li>

            </ul>

<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>

            <ul class="menucontents">

            <li><a href="#">Tên menu con 1</a></li>

            <li><a href="#">Tên menu con 2</a></li>

            <li><a href="#">Tên menu con 3</a></li>

            <li><a href="#">Tên menu con 4</a></li>

            <li><a href="#">Tên menu con 5</a></li>

            <li><a href="#">Tên menu con 6</a></li>

            <li><a href="#">Tên menu con 7</a></li>

            <li><a href="#">Tên menu con 8</a></li>

            </ul>

</div>

Bây giờ, bạn thay đổi các Tên menu cha và con, thay dấu "#" là các đường link mà mình muốn liên kết đến, thêm dòng giới thiệu menu ở mục "title=", bạn cũng có thể thay đổi chiều rộng của menu ở mục Width, thay đổi màu nền của menu ở các mục background và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu bạn muốn thêm menu con nữa thì copy dòng lệnh này:

<li><a href="#">Tên menu con </a></li> 

và dán tiếp theo phía dưới ở mỗi menu cha.

Còn muốn thêm một menu cha thì copy đoạn code này:

<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
    <ul class="menucontents">
    <li><a href="#">Tên menu con 1</a></li>
    <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    </ul>

Dán tiếp theo trên thẻ đóng </div> cuối cùng...

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

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

TIỆN ÍCH XEM BÁO TRỰC TIẾP NGAY TRÊN BLOG (Phần 3)

Trước đây, tôi có chia sẻ với các bạn các thủ thuật để xem được các tờ báo ngay trên Blog (Xem TẠI ĐÂY)

Hôm nay, mình chia sẻ tiếp cho các bạn một thủ thuật khác cũng tương tự như thủ thuật trên đó là: các bạn có thể xem tin tức mới nhất ở các tờ báo. Với thủ thuật này, tin tức được chia thành nhiều mục nhỏ như: Kinh tế, xã hội, văn hoá, thể thao, pháp luật...

Bạn bấm vào Xem thử phía dưới để trải nghiệm trước thủ thuật này.

Xem thử

Đơ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, rồi dán đoạn code phía dưới vào và bấm Lưu lại là xong.

<table><tbody><tr><td colspan="2" style= "vertical-align: middle; text-align: center; width: 100%; height: 0px;"><br /><span class="title"><a href="http://dunghennessy.blogspot.com" target= "_top"></a></span></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"><br /><div style= "border: 1px solid rgb(102, 204, 255); padding: 3px; background: white none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"><div style= "border: 2px solid rgb(102, 204, 255); padding: 2px; background: white none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"><iframe id="1413930556" src= "http://1.open.gmodules.com/gadgets/ifr?container=open&mid=1&v=153c7aa74ecf7cc9b33dc1a2e1487ece&lang=all&country=ALL&view=home&up_savelasttab=0&url=http%3A%2F%2Fwww.xemngay.com%2FVietNewsGadget.aspx&source=http%3A%2F%2Fpleiku.gialai.edu.vn%2F%3Fmain%3Dnews%26task%3Ddetail%26NewID%3D202&parent=http%3A%2F%2Fpleiku.gialai.edu.vn%2F%3Fmain%3Dnews%26task%3Ddetail%26NewID%3D202&libs=core%3Acore.io%3Arpc#rpctoken=1413930556" style="display: block; height: 250px;" width="520" frameborder="0" height="340" scrolling="auto"></iframe><script type= "text/javascript">function adjustHeight(sizeInPx){document.getElementById('1413930556').style.height=sizeInPx+'px';}gadgets.rpc.register('resize_iframe',adjustHeight);gadgets.rpc.setAuthToken('1413930556','1413930556'); </script></div></div></td></tr><tr><td style= "text-align: left; vertical-align: middle; height: 38px;"><br /><td style= "text-align: right; vertical-align: middle; height: 38px;"><br /><span class="powered"><a href="http://dunghennessy.blogspot.com" target= "_top"></a></span></td><br /></td></tr></tbody></table>

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

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

MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 1)

Trước đây, tôi có post một bài về các mẫu menu ngang (Xem TẠI ĐÂY). Hôm nay, tôi "post" thêm một mẫu menu ngang đơn giản nhưng khá đẹp, menu ngang này sẽ có hiệu ứng đổi màu các Tab khi bạn rê chuột vào.

Menu này không có menu con nên rất thích hợp với các blog có ít nhãn. Mới bạn bấm vào "Xem thử" phía dưới để thấy rõ menu ngang này.

Xem thử

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

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#dc0000 url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://anhdepblog.blogspot.com/'>Trang chủ</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
<li><a href='#'>Tên menu</a></li>
</ul>
</div>

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. Trong đó:

Color: #fff là màu chữ của menu

Font size: 12px là kích cỡ của chữ

Background: #8eda22: màu tab khi rê chuột vào. 

Width: 940px là chiều dài của thanh menu.

Thay các dấu thăng "#" thành các link mà bạn muốn liên kết đến.

Thay đổi tên menu thành tên khác mà bạn muốn.

Sau cùng bấm Lưu lại và trở vào blog xem thành quả nha.

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

Nguồn: Thủ thuật code

TẠO BẢNG THÔNG BÁO (KIỂU 5)

Tiếp theo bảng thông báo kiểu 4 (xem TẠI ĐÂY), hôm nay mình sẽ giới thiệu tiếp với các bạn code để tạo bảng thông báo kiểu 5 dưới đây.

Với thủ thuật này, thì các dòng chữ gởi đến khách tham quan sẽ được chạy từ bên trái của blog trông khá mướt. Các dòng chữ này các bạn có thể thay đổi thời gian "chạy" của nó, ngoài ra bạn còn có thể thay đổi Font chữ, kích cỡ chữ, thay đổi chiều rộng hoặc chiều cao của hộp thông báo đều được.

Mời bạn bấm vào "xem thử" phía dưới để trải nghiệm trước thủ thuật này.

Xem thử

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

<script language="JavaScript1.2">
var delay=3000
var scrollwidth="420px"
var scrollheight="70px"
var message=new Array()
var openingtag='<font face="Arial" size=4>'
message[0]='<b>dunghennessy xin chào các bạn</b>'
message[1]='<b>nhập nội dung vào đây</b>'
message[2]='<b>nhập nội dung vào đây</b>'
message[3]='<b>nhập nội dung vào đây</b>'

//Muốn thêm dòng thông báo nữa thì copy đoạn code message phía trên dán vào tiếp tục và thay đổi số lần trong ngoặc móc là xong.

var closingtag='</font>'

var hoffset=-10

</script>


<ilayer width=&{scrollwidth}; height=&{scrollheight}; name="sslide">
<layer name="sslide2" width=&{scrollwidth}; height=&{scrollheight};></layer>
</ilayer>

<script language="JavaScript1.2">

var inc=1
var ns4=document.layers
var ie5ns6=document.getElementById||document.all

if (ie5ns6)
document.write(openingtag+'<div id="flyin" style="position:relative;width:'+scrollwidth+';height:'+scrollheight+';">'+message[0]+'</div>'+closingtag)


function updatemsg(){
crossobj.style.left="-2000px"
crossobj.style.fontStyle="italic"
crossobj.innerHTML=message[inc]
crossobj.style.left=crossobj.offsetWidth*(-1)+hoffset+"px"
start=setInterval("animatein()",50)
inc=(inc<message.length-1)? inc+1 : 0
}

function animatein(){
if (parseInt(crossobj.style.left)<0)
crossobj.style.left=parseInt(crossobj.style.left)+20+"px"
else{
crossobj.style.left=0+"px"
crossobj.style.fontStyle="normal"
clearInterval(start)
}
}

function updatemsgns4(){
document.sslide.document.sslide2.document.write(openingtag+message[inc]+closingtag)
document.sslide.document.sslide2.document.close()
inc=(inc<message.length-1)? inc+1 : 0
}

function initialize(){
if (ie5ns6){
crossobj=document.getElementById? document.getElementById("flyin") : document.all.flyin
setInterval("updatemsg()",delay+1000)
}
else if (ns4){
document.sslide.document.sslide2.document.write(openingtag+message[0]+closingtag)
document.sslide.document.sslide2.document.close()
setInterval("updatemsgns4()",delay)
}
}

window.onload=initialize
</script>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó:

Var delay: Tốc độ chạy của chữ (số càng cao chữ chạy càng chậm)

Var scrollwidth: Chiều rộng của hộp thông báo.

Var scrollheight: Chiều cao của hộp thông báo.

Font face: Font của chữ.

Size: kích cỡ chữ.

Nếu bạn muốn thêm dòng thông báo nữa thì "cứ việc" copy đoạn code phía dưới dán vào và thay đổi số lần liên tiếp, thí dụ ở đoạn code phía trên là 3, bây giờ thêm một nữa là 4 (theo như hướng dẫn trên code):

message[4]='<b>nhập nội dung vào đây</b>'

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

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

 

SẮM "GÓC TIỆN ÍCH" CHO BLOGSPOT

Trước đây, tôi có chia sẻ với các bạn code để làm "Góc giải trí cho blogspot" (xem TẠI ĐÂY). Bạn cũng có thể sắm thêm "Góc tiện ích cần thiết" cho Blogspot với đoạn code tôi sắp trình bày trong bài.

Ngoài việc trang trí cho blog thêm đẹp, "Góc tiện ích" này còn giúp bạn theo dõi các thông tin cần thiết như: Giá vàng, Tỉ  giá ngoại tệ, dự báo thời tiết, lịch âm dương...
Những thông tin này sẽ di chuyển từ dưới lên và sẽ ngừng lại khi bạn rê chuột vào, khi bấm chuột bất kỳ một thông tin thì trên blog của bạn sẽ có một bảng nhỏ xuất hiện để tiện cho bạn xem được thông tin đó và không cần rời khỏi trang blog của mình.

Bạn xem hình minh hoạ:

Bạn bấm vào "xem thử" phía dưới để trải nghiệm nha:

Xem thử

Rất đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào và bấm Lưu lại là xong.

<style type="text/css">
#itechconnect{margin:0; padding: 0; height:200px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiHyTi3a0k_uza9cb4m2-tKvZMlZzUQDwpj79aj8jZApIDrM-mKpDF4b1PE9CCtXq6mClFbg_cEAaIYGSd0ZT-qysVH3x2jzL7RU-WNFbhaJKkuJNdyq6LBdrF1xGM-k_Ul-hC22KcZk/s1600/0211_17559.gif) no-repeat bottom right; font-weight:bold}
#itechconnect p {margin:0; padding:2px 10px}
.favicon {width:25px; height:25px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style>
<div id="itechconnect">
<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=500,height=350,left = 200,top = 120');");
    }
    </script>
<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='195' width='100%'>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRQvsesfLDpQ4PwYVOv7fzW2cQ0lpaBWvkYlN7QqaE4QeIoc3egyyC0p6duw0LjZnsyHkNXQVHv1wKHftlZJKlL_Ztc834TdmXXcFSE7HsmDqF_plh8K3par_qtwU1hmCO9xwBPD2k1Y/s1600/Green-Dollar-icon.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=exchangerates')">Tỉ giá ngoại tệ</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfaXNe8-C6lnZISWgQ0MbwELY-WZU6aZcYOJMnJWbWywgwfmtsSpjg2eb9RNJ0IybmSZwf7jQVfjWc3rAeIdI9AQgm655fau4Y4YZDgE1LV-DRL5ILBYV5Nhz4nufHVcPDMeN1Tzy9Ys/s1600/gold-bullion-icon.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=goldrates')">Bảng giá vàng</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3y65sV0b-n-NYq3PchI4iZoR_0JVn29XPswpwHB5RySh2bavVe_3GG7W4xgUsBxCXI46USCVqpSboBOYK7gCsjzG7sl51SYUIjBCbVhrFITeh71-IBc1-8odN4Hs9bI0d6_jpFHILudo/s1600/telefono-icon.png" class="favicon" /><a href="javascript:popUp('http://www.muabanso1.vn/bancanbietchitiet.aspx?id=325')">Mã vùng điện thoại các tỉnh thành Việt Nam</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiY7CrTXWIz6H0OE5lVawdE2s7GcDHcROelT8fZVg-IzQQjKOBnWGiZWp7JpllravYisz1lXi0QqNJBVlrgzJ3zwZ9R9_PqCJQwqG24lZhCetpfm559L0RMwdFrXoeR2ittPwG6KWm0jk/s1600/calendar2-icon.png" class="favicon" /><a href="javascript:popUp('http://thanhcavietnam.net/calendar/index.html')">Xem lịch âm dương</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkhTR84pHwSx5lIurlLZNaKInuoE1Ynm6TzhSoQ7Dz_Du8-hmgPSD5eBIYPjDUojdtuQYyK54gUr6Ga0OEP2_KIH9ksMpA6bawVGR2L_PkqdzHM8eik_49hhXt9fQBFRc8qNVrhDcFnSo/s1600/agt-multimedia-icone-6366-128.png" class="favicon" /> <a href="javascript:popUp('http://vietbao.vn/vn/lich-chieu-phim/')">Lịch chiếu phim</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-K852vHHM-xhxjCbiILcuzD-QbsktdI4CLgstTQsKqAF2k5AhUfDuN71Ey6N6U-Od0taVbpQcg3HAvMaZf9n2MDS7rDfgiFnUmh6nnREdMgApKZ0rhACiNGJHkJWWBnbHKqMBUUb25OQ/s1600/Apps-world-clock-icon.png" class="favicon" /><a href="javascript:popUp('http://www.timeanddate.com/worldclock/')">Giờ các quốc gia trên thế giới</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7b9q3RSsVp6NzxPvx8KlMCFfat43-Gs825NI5NNzxDj8uJaJs8HseiBb7Ijw1VGGWfNO6NuAuqi4ZX7kVpqd7r0TlZVumkC5WtgIp9WcBHUGP_EH3_38-NT_c1VQIo28ZCJ2sabKeBKE/s1600/Aqua-Ball-Green-icon2.png" class="favicon" /><a href="javascript:popUp('http://www.xosotructiep.vn/')">Kết quả xổ số</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUy8S9a9yrAqOuAjFXy0or6Hst2BqVs6Jl2F1XJI3eGPQ4o8_z3NzavrPN7e4D6Wf9XMu2zAXHoPiPiTlFjNa-4VfZoXkeEAhxIR2guicQLYecY0cjzSYDcd2J_48nA7yRMEmZjZJ9vw/s1600/Games-Soccer-icon.png" class="favicon" /><a href="javascript:popUp('http://bongdaplus.vn/home.bbd')">Lịch bóng đá</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgG9b-ap_GJXRGLz1ZIJKGCzeMjkx4oBBdiK9HLvLa4rXbhvFTjt6Dfuclt1bsmLEhAIhQJmCYHQs3sS_hI8byaMRFS2enTSw3ZW-Qux4sHjdTAxaLJVJvSfd2in9KAlI6SbXAoYy4bFE/s1600/Devices-video-television-icon.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=tvschedules')">Lịch truyền hình</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7XRMBITTMhtbxLMooXkJBo55mZSYseze_jrpUIzz_CA6QUPNLeh6iFxou4cYLwAY9fPnhXKzxHxRxboLg-GEyAMXCpRM2upqN0H8-WGPNWRWCcicz4o_ZnxVS1LVZOXW3DEF8AWRd2s/s1600/Sunny-Period-icon.png" class="favicon" /><a href="javascript:popUp('http://vov.vn/services/infopage.aspx?svc=weathers')">Dự báo thời tiết</a>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflKyduXoljBkhlVqRO-VMWo4NMCbqqZAEejQmCrVZJVOXek_7QkiIHK-fk_zHCHqHziQMzObbqYgE4IHApEfJoavLbxS2MEr1iu50o0bPiUE7v3tsI4Ft7e6MtqXAvtWqQNB5lbMwB0M/s1600/maps-icon.png" class="favicon" /><a href="javascript:popUp('http://www.diadiem.com/')">Tìm đường trên bản đồ</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgmwJfjdz6MD9dofdqGV-9FhrKwLUar7cdfp4J04AoU6oXI-ayH6lrEADu99F-xMFo8jm1olYNswkAOjauEHre4HyE0OHmGjB1jT7vsCixdIOZeRkNV7fEe77YgiemVQ5RsJfvi9H2qI/s1600/Phone-icon.png" class="favicon" /><a href="javascript:popUp('http://www.countrycallingcodes.com/')">Mã vùng điện thoại các nước trên Thế Giới</a></li>

</li></marquee>
</div>

Bạn có thể thay thế ảnh nền bằng ảnh nền khác của bạn bằng cách thay link ảnh vào link màu đỏ ở trên code

Bây giờ, bạn trở vào Blog của mình sẽ thấy có một góc tiện ích cần thiết ở tại blog của mình...

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

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