▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

TẠO MENU DỌC LIÊN KẾT BLOG

Nhằm tạo điều kiện "Kết nối bạn bè, sẻ chia kinh nghiệm, đạt nhiều thành công" đồng thời cũng để cho khách tham quan dễ dàng tham khảo thêm nhiều trang Web/Blog có cùng chủ đề, một số Web/Blog thường tạo mục "Liên kết Blog" với nhiều Web/Blog khác...

dunghennessy tình cờ "dạo quanh" trang Blog của bạn Buivansum thấy có bài đăng về "Tạo menu dọc để liên kết blog", thấy cũng "hay hay" và có copy code lại đem về chỉnh sửa đôi chút cho hoàn thiện hơn, nay đem chia sẻ với các bạn.

Menu dọc này được nằm gọn trong khung có đường viền màu bao bọc, cạnh phải của menu có thanh trượt lên xuống, ảnh đại diện (Favicon) và các tên blog được hiển thị trên một màu nền. Khi bạn rê chuột vào thì các ảnh đại diện cũng như tên blog sẽ thay đổi màu sắc và trượt "nhẹ" ra bên phải của menu, ngoài ra một điều đặc biệt ở menu này là khi bạn click vào một trong những Web/Blog liên kết thì sẽ xuất hiện một bảng nhỏ (pop-up) ngay tại Web/Blog của bạn để bạn tham khảo mà không phải rời khỏi trang Blog của mình. Bạn bấm vào "Xem thử" để xem trước menu này.


Xem thử

Bạn chỉ cần đăng nhập vào blog > Chọn Bố cục > Chọn thêm tiện ích HTML (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Bây giờ bạn dán toàn bộ code phía dưới vào.
<style>
#link-cia {
 width: 300px;
 border: 10px groove green;
 overflow: auto;
 height: 300px;

 padding-left: 0px;
}

#link-cia ul {
 display: inline;
 margin-left: 0px;
}
#link-cia ul li {
 list-style: none;
 margin-left: 0px;
 background: #000000;
 border: 1px solid #fff;
 padding: 4px;
 padding-left: 15px;

-webkit-transition:all 3.5s ease;
 -moz-transition:all 3.5s ease;
 -o-transition:all 3.5s ease;
 transition:all 3.5s ease;
}

#link-cia ul li:hover {
 background: #0638DB;
 border : 1px solid #fff;
 border-right: 10px solid #fff;
-webkit-transition:all 1.5s ease;
 -moz-transition:all 1.5s ease;
 -o-transition:all 1.5s ease;
 transition:all 1.5s ease;
}

#link-cia ul li a {
 color: red;
 text-decoration: none;
 font-family: Times new roman;
 font-size: 19px;
 text-shadow: 0px 0px 1px #fff;
 -webkit-transition: padding 1.5s ease-out;
    -moz-transition: padding 1.5s ease-out;
    -o-transition: padding 1.5s ease-out;
 transition:all 1.5s ease;
}

#link-cia ul li a:hover {
 color: yellow;
 text-decoration: none;
 padding-left: 15px;
 -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
 transition:all 0.5s ease;
}
</style>
<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=900,height=550,left = 50,top = 100');");
    }
    </script>
<div id="link-cia">

<ul>

 <li><a href="javascript:popUp('http://www.dunghennessy.blogspot.com')"><img align="top" height="16px" width="16px" src="http://dungheineken.blogspot.com/favicon.ico"/> Thủ thuật Computer</a></li>
 <li><a href="javascript:popUp('http://anhdepblog.blogspot.com')"><img align="top" height="16px" width="16px" src="http://anhdepblog.blogspot.com/favicon.ico"/> Ảnh đẹp cho Blog</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
  <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
  <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
  <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>
</ul></div>

Để phù hợp theo ý thích của mình, bạn có thể thay đổi các dòng lệnh màu xanh, đỏ, vàng. Trong đó:
* Width (màu xanh): Độ rộng của khung menu.
* Height (màu xanh): Độ cao của khung menu.
* Green (màu xanh): Màu đường viền của khung menu
* Background (màu xanh): Màu nền khi chưa rê chuột.
* Color (màu xanh): Màu chữ khi chưa rê chuột.
* Font family (màu xanh): Font chữ của tên Blog liên kết.
* Font size (màu xanh): Kích cỡ chữ của tên Blog liên kết.

- Background (màu vàng): Màu nền khi rê chuột vào.
- Color (màu vàng): Màu chữ khi rê chuột vào.
- Width (màu vàng): Độ rộng của bảng nhỏ (pop-up).
- Height (màu vàng): Chiều cao của bảng nhỏ (pop-up).
- Left (màu vàng): Khoảng cách bên trái của bảng nhỏ tính từ bên trái của Blog.
- Top (màu vàng): Khoảng cách ở trên của bảng nhỏ tính từ đầu của Blog.

+ Height (màu đ): Chiều cao của ảnh đại diện (Favicon).
+ Width (màu đ): Độ rộng của ảnh đại diện (Favicon).  
Còn các dòng lệnh màu đỏ còn lại: Link Blog liên kết, Link ảnh đại diện, Tên Blog liên kết chắc các bạn biết rồi, mình không giải thích nữa.  Sau cùng bấm Lưu rồi quay vào Blog xem kết quả nha
Mở rộng thêm:
Nếu muốn thêm nhiều liên kết nữa, bạn copy dòng lệnh này:

 <li><a href="javascript:popUp('Link blog liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

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

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



32 nhận xét:

kimduccz nói...

Em chào anh, không ngờ bài viết này của anh có đông người vào ủng hộ thế.
Em cũng vừa bê nguyên Code trong bài anh đăng đưa vào Blog em, nhưng phía dưới khung cứ bị thừa ra và ảnh đại diện không có mặc dù em có Add đường Link ảnh trong đó.
Anh xem lại giúp em với

dunghennessy nói...

Em thử làm lại thử xem, chứ code này bảo đảm với em là không có xung đột vối code nào cả (đối với blog của em), em thử chỉnh lại chiều rộng xem sao, nếu không được em gởi tên đăng nhập và pass qua cho anh để anh tìm hiểu xem sao
Cám ơn em đã ghé thăn anh
Chúc em và gia đình luôn vui khoẻ và gặt hái nhiều thành công tốt đẹp

samynuthantudo nói...

hj^^ e mơj' xem thư, & vừa làm được ruj'. Thanks ak. Ckuc' ak ngủ ngon:)

kimduccz nói...

Khung viền em đã sửa được rồi anh ạ, còn cái ảnh Avatar em tìm hiểu thêm về lỗi và khắc phục sau.
Cám ơn anh, chúc anh an lành và hạnh phúc.

dunghennessy nói...

Ảnh Avatar (Favicon) nó bị lỗi gì em??? Không hiển thị được à? Anh thấy 2 link đầu em làm có ảnh Avatar mà???
Cố gắng tìm hiểu nha, nếu có khó khăn gì cứ mail cho anh nha
Chúc em luôn vui khoẻ và trang của em ngày càng phát triển nha

Unknown nói...

Thank anh dung nha
Mình làm dc rồi/ Đúng là mình mới bắt đầu làm blog nên thấy blog của anh rất hay, thấy cái gì cũng coppy ve làm.
Thank nhieu nhieu

Unknown nói...

ANh dung oi mình có gởi email kích thước mẫu đồng hồ rồi đó anh làm giúp mình với

Unknown nói...

Anh dung ơi, minh chua nhận được email mẫu đồng hồ anh gởi, kích thước mình đã gởi trong mail rồi đó. rảnh gởi cho mình với nha.
Cám ơn anh

Unknown nói...

Mình cần tìm lại bài tạo menu dọc hiện các bài đăng chạy lên mỗi vài giây.mà tìm hoài chẳng thấy,mình xem lại bị lỗi gì mà giờ nó không hiện ra,có thể lỗi chứa file JS không truy xuất kg chẳng biết,xin bạn link bài đấy vậy nhé ! Cảm ơn bạn Dung.

Unknown nói...

Sáng nay vào lại blog thấy "Danh mục bài đăng " nó tự dưng hoạt động lại bình thường,chẳng hiểu tại sao.Cảm ơn bân nha !

dunghennessy nói...

À, lúc "nó" không hoạt động có nghĩa là file .js upload lên Dropbox đã bị hết băng thông, bây giờ "thông thoáng" nên "nó" chạy lại bình thường. Vì vậy muốn sử dụng lâu dài, bạn nên copy file .js về upload lên host riêng của mình là OK (h)

Unknown nói...

Upload thì mình biết cách làm nhưng còn copy file JS thì mình không hiểu làm thế nào để copy,bạn có thể hướng dẫn rõ hơn tí được kg?Cám ơn nhiều.

À ! Mà hôm nay mình lại lỡ tay làm hỏng bộ code tạo Menu chạy dọc ngoài blog,cứ mỗi vài giây thì tự động chạy lên đổi bài,giờ loay hoay tìm cả tiếng đồng hồ trong nhà bạn không tìm ra được,nhiều bài quá nhìn hoa cả mắt Hi Hi !

Unknown nói...

Mình tình cờ lướt web thấy ở trang này có cái Menu quảng cáo cứ chạy lên rồi lại chạy xuống hay quá,bạn nghiên cứu xem có làm được không bạn nhé !

http://www.uyenthaoshop.com/vay-dam-nu

dunghennessy nói...

Ok, để mình nghiên cứu thử xem sao!!!

MAI PM nói...

Bạn cho mình hỏi trang của mình thêm banner bằng ảnh gif nó cứ hiển thị load trang khi hết file gif chạy hết 1 lượt
Giúp mình nhé
Site :Vloghayvl.blogspot.com
cái banner ngay trên đầu tiên ấy
Thank bạn rất nhiều

dunghennessy nói...

Tôi đã vào xem trang của bạn thì vẫn thấy bình thường mà, ảnh động vẫn chạy và trang đâu có load lại đâu???

Pop Noppy nói...

Anh ơi! em thay đổi giao diện, giờ bố cục lộn xộn em phải làm sao?

dunghennessy nói...

Dĩ nhiên rồi...Thay đổi giao diện thì các bố cục cũ sẽ thay đổi thôi, em bỏ chút thời gian sắp xếp các tiện ích lại là Ok rồi...

Nặc danh nói...

anh oi
baotranxx.blogspot.com
em goi pass cho anh qua hom thu gmail roi do
anh vao sua gium em ti nhe
chuc anh nam moi vui ve

dunghennessy nói...

Do cuối năm Anh rất bận nên không thể đáp ứng yêu cầu của em.
Mong em thông cảm, qua Tết Anh sẻ xem xét và chỉnh sửa cho em nha

Pop Noppy nói...

Anh Dũng ơi nếu không có hình ảnh của link liên kế đó thì minh phải xóa bớt đoạn code từ đâu đến đâu vậy anh

dunghennessy nói...

Em chỉ cần xoá dòng chữ (màu đỏ) LINK ẢNH ĐẠI DIỆN (FAVICON) là OK

Unknown nói...

Em sang thăm anh nè! Cuối năm bận lắm phải không anh?

dunghennessy nói...

Cám ơn em đã ghé thăm...đúng vậy cuối năm anh bị "stress" rồi em ạ...Công việc "bù đầu, bù cổ" luôn.. ;((

TRAN TRUNG nói...

http://thegioistandy.blogspot.com/
lien ket nhe
standy

Nặc danh nói...

anh dũng ơi
em la chủ blospot baotranxx.blogspot.com
hôm trướ tết em nhờ anh sửa giùm cái blog
em đã gởi mail cho anh rồi đó .
anh giúp giùm em tí nhé
thanks anh nhiều lắm
anh sửa giùm cái lá cờ với con chuột, nó hiển thị ko đúng
anh up vào cho em cái hình lam tiêu đề + chữ vạn sự như ý
anh chỉnh lai cho em cái giao diện trên trang chủ lam 2 phần . phần dưới hiển thị được comment nhu trang của anh zậy
thank anh dũng trước nhé (f)

dunghennessy nói...

Vì em đang sử dụng giao diện mặc định của Blogspot vì vậy các yêu cầu của em anh không thể chỉnh sửa được, mong em thông cảm...

Nặc danh nói...

anh dung oi
neu nhu em xai giao dien mac dinh
thi anh thay gium em cai giao dien di , thay cho em cai giao dien nao ma anh chinh sua duoc .
giup em ti nhe anh dung
thank anh nhieu (k)

dunghennessy nói...

Em vào đường link phía dưới để chọn cho mình một theme ưng ý và áp dụng cho Blog nha
* Themes cho Blogspot

Unknown nói...

cảm ơn bạn nha!!rất hay và hữu ích.

dunghennessy nói...

Mình cũng cám ơn bạn đã ghé thăm qua và ủng hộ dunghennessy.
Chúc bạn ngày mới nhiều thành công

Phi Mã nói...

liên kết nha các bạn
http://tintuc-60s.blogspot.com/

Đăng nhận xét

 
Powered by by: Blogger