Thứ Sáu, 20 tháng 9, 2019

Phần mềm định vị số điện thoại

Phần mềm định vị số điện thoại

Kết quả hình ảnh cho find my friend

Những mềm định vị, theo dõi số điện thoại tốt nhất hiện nay

Ngày nay nhu cầu quản lý con cái thông qua điện thoại là nhu cầu tất yếu của các ông bố bà mẹ chính vì thế mà các ông bố bà mẹ đang tìm các ứng dụng hay phần mềm định vị số điện thoại để cài vào điện thoại của con để biết được vị trí con mình đang ở đâu. Chính bởi nhu cầu ngày càng lớn, Thám tử tư Tận Tâm chúng tôi nhận được quá nhiều câu hỏi như “Làm sao để theo dõi con tôi qua điện thoại? Làm sao để kiểm tra vị trí con tôi đang ở? hay muốn kiểm tra số điện thoại bất kỳ đang ở đâu?rất rất nhiều câu hỏi khác…”.
Để giúp các ông bố bà mẹ tìm vị trí của con mình đang ở đâu bằng số điện thoạiTrong chuyên mục các phần mềm định vị và tra thông tin thuê bao số điện thoại thám tử hà nội Tận Tâm chúng tôi sẽ chia sẻ cho các bạn những phần mềm định vị số điện thoại tốt nhất hiện nay, những phần này áp dụng cho tất cả các Smart Phone thông mình như iphone hay Android ( Samsung, Oppo, Sony, HTC) mà bạn không phải dùng thiết bị định vị nào.
Bên cạnh những phần mềm mà chúng tôi chia sẻ ở đây thì ở cuối bài có một cách mà bạn không phải cài ứng dụng. Tuy nhiên hơi bất tiện chút là mất thời gian, đó là cách định vị qua google maps. Ngoài giúp các ông bố,bà mẹ định vị được vị trí của con cái thì những phần mềm, ứng dụng này còn giúp những bạn bị mất điện thoại có thể biết được chiếc điện thoại của mình đang ở đâu để dễ dàng tìm lại. Tuy nhiên những phần mềm này chỉ áp dụng được khi bạn đã cài vào điện thoại từ trước đó.
Nếu bạn đang tìm cách định vị qua Facebook hay Zalo thì không có đâu nhé. Nên bạn đừng tìm làm gì cho mất công
phan mem dinh vi so dien thoai
Phần mềm định vị số điện thoại miễn phí

Định vị, theo dõi số điện thoại bằng GPS

Có rất nhiều cách để định vị, theo dõi một số điện thoại nào đó qua GPS. Ở bài viết này thám tử tư Tận Tâm sẽ chia sẻ 2 cách đơn giản mà nhiều người dùng nhất, quan trọng là hoàn toàn miễn phí, áp dụng cho cả hai dòng điện thoại Android và iphone. Đó là ứng dụng Find my Friend &Tracker Devices Locator, Wheres my droid

Phần mềm định vị số điện thoại Wheres my droid

Phần mềm định vị số điện thoại Wheres my droid sẽ định vị được số điện thoại mà bạn muốn biết vị trí ngay cả khi điện thoại đó không kết nối wifi hoặc 3G, 4G

Phần mềm định vị Find my Friend

Ứng dụng này có thể cài đặt trên hai dòng điện thoại thông minh phổ biến hiện nay là iphone & Android. Để sử dụng thì chúng ta sẽ tiến hành cài đặt lên điện thoại của mình.

Đối với iphone

Bước 1: Tải ứng dụng này về điện thoại của mình qua kho ứng dụng appstore
ung dung Find my Friend tren iphone

Ứng dụng Find my Friend trên iphone
Bước 2: Kích hoạt tính năng chia sẻ vị trí trên điện thoại mà bạn cần theo dõi. Để làm được việc này thì bạn lấy điện thoại mà bạn muốn theo dõi để mở ứng dụng tìm bạn trên iphone, sau đó kích hoạt tính năng “chia sẻ vị trí của tôi”.
bat vi tri chia se

Bật chia sẻ vị trí
Bạn cần lưu ý: Với một tài khoản iCloud thì có thể được cài đặt cho nhiều thiết bị như iPad, iPhone khác nữa, nên hãy chú ý đánh dấu chọn tại “thiết bị này” trong mục “Chia sẻ vị trí của tôi từ”
Bước 3: Yêu cầu theo dõi vị trí
Ở bước này thì bạn phải lưu số điện thoại mà bạn muốn theo dõi trong danh bạ chiếc iphone của mình với một cái tên mà bạn dễ nhớ. Tiếp đến, bạn bật AirDrop ở trên điện thoại của bạn và điện thoại bạn theo dõi. Để mở AirDrop thì bạn chỉ cần vuốt từ cuối màn hình lên trên cùng màn hình là bạn sẽ thấy AirDrop. Bạn ấn chọn AirDrop và chọn “mọi người”
an chon AirDrop va chon moi nguoi

Ấn chọn AirDrop và chọn “mọi người”
Bước 4: Trên điện thoại của bạn, sau khi bạn cũng bật tính năng AirDrop và chọn “mọi người” thì tiếp tục vào ứng dụng Find my Friend => chọn “Thêm” ==> chọn tên số điện thoại mà bạn muốn theo dõi.
gui yeu cau theo doi toi dien thoai muon theo doi

Gửi yêu cầu theo dõi tới điện thoại bạn muốn theo dõi
Bước 5: Mở ứng dụng Find my Friend trên chiếc điện thoại bạn cần theo dõi sau đó chọn “chấp nhận”
an chap nhan chia se vi tri

Ấn chấp nhận chia sẻ vị trí ở điện thoại bạn vừa gửi yêu cầu
Bước 6: Khi bạn đã gửi lời mời từ chiếc điện thoại của bạn tới chiếc điện thoại bạn muốn theo dõi và được điện thoại bạn muốn theo dõi chấp nhận thì điện thoại của bạn cũng sẽ nhận được lời mời theo dõi từ chiếc điện thoại bạn muốn theo dõi.Để không chia sẻ vị trí của bạn với điện thoại mà bạn theo dõi thì bạn chỉ việc ấn “từ chối”.
an tu choi chia se vi tri cua ban

Ấn từ chối chia sẻ vị trí của bạn với điện thoại bạn đang theo dõi
Bước 7: Định vi vị trí chiếc điện thoại mà bạn đang theo dõi xem đang ở đâu bằng cách mở ứng dụng Find my Friend trên điện thoại của mình và nhấp vào biểu tượng mà bạn muốn biết trên màn hình.
cach dinh vi so dien thoai
Cách định vị số điện thoại
Bạn cũng sẽ thấy các tùy chọn để được thông báo nếu họ rời đi hoặc đến một vị trí nào đó, vì vậy bạn sẽ nhận được cảnh báo chiếc điện thoại mà bạn theo dõi sẽ rời khỏi nhà hoặc nơi nào đó bằng cách chọn Thông báo > Rời đi/ Đến.
Tuy nhiên, dùng lâu cũng dễ bị phát hiện bởi biết đấu người sử dụng điện thoại mà bạn đang theo dõi bật ứng dụng Find my Friend lên và biết bạn đang theo dõi họ thì vô cùng khó xử. Để tránh tình trạng này thì bạn chỉ cần tắt thông báo của ứng dụng này đi trên chiếc điện thoại bạn đang theo dõi bằng cách vào Cài đặt  (chiếc điện thoại bạn đang theo dõi) => Thông báo => Chọn ứng dụng Find my Friend => Cho phép thông báo > Tắt. Vậy là xong.
tat thong bao ung dung Find My Friends

Tắt thông báo ứng dụng Find My Friends

Đối với điện thoại Android

Cũng giống với iphone là bạn phải cài đặt ứng dụng này vào điện thoại. Để cài trên điện thoại Android thì bạn vào kho ứng dụng chplay để tìm ứng dụng, sau khi tìm thấy thì tiến hành cài đặt.
Bước 1: Cài đặt ứng dụng Find my Friend
cai dat ung dung Find my Friend

Cài đặt ứng dụng
Bước 2: Sau khi cài đặt xong thì mở ứng dụng lên và chọn “tiếp theo”
an tiep theo

Chọn “Tiếp Theo”
Bước 3: Nhập số điện thoại của bạn vào và lại chọn “Tiếp Theo”
lai chon tiep theo

Nhập số điện thoại và chọn “Tiếp Theo”
Bước 4:  Nhập mật khẩu của bạn rồi lại chọn “Tiếp Theo”
nhap mat khau roi an tiep theo

Bước 5: Tiếp đến bạn cập nhật ảnh đại diện, sau đó đặt tên rồi lại “tiếp theo”
anh dai dien roi an tiep theo
Bước 6: Bạn chọn “cho phép truy cập”
cho phep truy cap
Bước 7: Để theo dõi con cái hay ai đó thì bạn chọn “Menu” (dấu 3 gạch) => Chọn “Tham gia”

chon tham gia
Bước 8: Nhập mã của người bạn muốn theo dõi. Để xem mã thì bạn xem tại mục “Thêm thành viên mới” ở màn hình chính) sau đó chọn “Gửi”
nhap ma loi moi

Bước 9: Chọn “Tham gia” để xác nhận
chon tham gia de xac nhan

Với 9 bước này thì bạn có thể biết được vị trí điện thoại người đang tham gia với bạn. Tuy nhiên phải được sự cho phép của người bạn muốn theo dõi thì bạn mới được phép. Nếu không bạn đang vi phạm pháp luật.

Cách sử dụng ứng dụng định vị, theo dõi Tracker Devices Locator

Đây là ứng dụng được phát triển trên hệ điều hành Android. Để sử dụng ứng dụng này, giống như ứng dụng trên thì bạn phải tải ứng dụng này về điện thoại của bạn và điện thoại bạn muốn theo dõi vị trí, sau đó cài đặt ứng dụng này.
phan mem dinh vi Tracker Devices Locator
Sau khi bạn cài đặt ứng dụng xong thì bạn mở ứng dụng Tracker Devices Locator lên và chọn “cho phép” để ứng dụng truy cập vào điện thoại của bạn.
cho phep Tracker Devices Locator
Sau đó chọn “ok” để ứng dụng truy cập vào vị trí điện thoại của bạn
an ok
Các bước ở trên bạn làm cho cả máy của bạn và máy bạn muốn theo dõi nhé.
Tiếp đến, trên máy của bạn, bạn mở ứng dụng Tracker Devices Locator, sau đó ấn vào dấu cộng (+) để thiết lập
an vao dau cong
Tiếp sau đó bạn ấn vào “Track me” để lấy mã CODE. Mã code này dùng để nhập vào máy mà bạn muốn theo dõi để lấy thông tin vị trí.
an vao Track me
Sau khi bạn ấn vào đó thì hệ thống sẽ gửi cho bạn mã code gồm 8 ký tự
gui ma code
Mã này chỉ có tác dụng trong đúng 60 giây vì thế bạn cũng nên thao tác nhanh trên máy bạn muốn theo dõi bằng cách mở ứng dụng Tracker Devices Locator trên máy bạn muốn theo dõi và nhấn vào dấu cộng ( + ) và chọn “Add Device”
chon Add Device
Tiếp đến hệ thống yêu cầu bạn nhập “Name” và mã code mà bạn đã có ở trên vào dòng Pairing Code
nhap name
Sau khi bạn nhập xong mọi thông tin và ấn vào PAIR và đợi vài giây để hai máy kết nối. Sau khi kết nối thì hệ thống sẽ hiển thị đầy đủ thông tin thiết bị bạn muốn theo dõi
an vao PAIR
Để biết được điện thoại mà bạn theo dõi đang ở vị trí nào thì chỉ cần mở ứng dụng và chọn thiết bị bạn muốn biết.
thong tin thiet bi theo doi
Để theo dõi thêm thiết bị nào khác thì bạn ấn vào dấu (+) là được.
them thiet bi theo doi
Khi bạn không muốn theo dõi ứng dụng nào đó trong danh sách các ứng dụng mà bạn đang theo dõi thì bạn xoá đi bằng cách giữ vào ứng dụng bạn muốn bỏ theo dõi khoảng 5 – 6 giây thì sẽ thấy biểu tượng thùng rác xuất hiện và bây giờ ấn vào biểu tượng đó là xong.
an vao bieu tuong thung rac
Còn có cách định vị khác mà bạn không cần phải động vào máy người kia. Bạn có thể click để xem ở dưới đây
 dịch vụ thám tử hà nội
Click để xem các cách định vị khác nhé

Nguồn  bài chia sẻ này từ thám tủ tận tâm thamtutantam

Thứ Năm, 5 tháng 9, 2019

Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger

Rất nhiều Blog gặp phải lỗi kích thước ảnh tràn ra ngoài phần hiển thị bài viết trong Blog. Giải quyết triệt để vấn đề này tương đối đơn giản bằng dòng lệnh trong CSS.
Rất nhiều Blog gặp phải lỗi kích thước ảnh tràn ra ngoài phần hiển thị bài viết trong Blog. Giải quyết triệt để vấn đề này tương đối đơn giản bằng dòng lệnh trong CSS.
- Trước hết, các bạn xem xét các lỗi mắc phải với kích thước ảnh hiển thị trong bài viết:

1. Chiều rộng bức ảnh 900px được rút ngắn chiều rộng để phù hợp với chiều rộng 500px của bài viết, phần còn lại của bức ảnh bị ẩn không hiển thị.
2. Hiển thị ảnh độ rộng 800px bị tràn ra khỏi phần độ rộng 500px của bài viết.
Như 2 lỗi hiển thị trên, để bức ảnh hiển thị chính xác và không làm mất (ẩn) phần nào của bức ảnh như hình minh hoạ dưới: Toàn bộ nội dung bức ảnh có độ rộng 900px hiển thị hết (được điều chỉnh) trong phần bài viết với chiều rộng 500px.

Để chúng tự động điều chỉnh hiển thị phù hợp với phần nội dung bài viết các bạn làm như sau: (Ví dụ với chiều rộng của phần bài viết (Post section) là 500px.)


1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed):


4- Để cố định hình ảnh hiển thị trong blogger, với hình ảnh  to hơn giá trị MAX thì sẽ tự động điều chỉnh về giá trị MAX, nếu ảnh nhỏ hơn giá trị min thì sẽ tự điều chỉnh về kích thước min, bạn đặt trước ]]></b:skin> đoạn mã sau:

.post img {      
max-width:500px;       
min-width:200px;       
padding : 10px;       
clear: both;       
}
- Điều chỉnh lại max-with và min-with cho phù hợp với phần bài đăng của bạn nha. 
5- Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500 x 400 thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img {      
width:500px;       
height:400px;       
padding:10px;       
}
- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.
Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML (Edit/Html) và chỉnh sửa chúng.

Thiết kế menu kiểu 1 dải màu cho blogspot

Kế ngay sau phần đầu trang sẽ là menu và chúng ta cùng thiết kế menu cho blogspot nhé. Menu này khá đơn giản thôi, nếu các bạn muốn menu đẹp hơn thì tìm code khác rồi thay vào là ok nhé.
Trong phần thiết kế menu, chúng ta sẽ đi thiết kế một menu đơn giản nhé. Nhiều bạn thích hiệu ứng rồi thích đẹp bla bla bla. Mình thích đơn giản, nhanh, vậy thôi. Nói trước luôn là menu này tích hợp cả giao diện trên mobile đấy. Tuy nhiên các bạn không rành code thì chẳng cần quan tâm nhiều làm gì, cứ copy paste đúng chỗ là ok.

Đàu tiên, các bạn vào Bố cục --> Layout Menu --> Thêm tiện ích --> HTML/Javascript

Tiêu đề: bỏ trống

Nội dung: thêm vào đoạn code sau:
 !!!!!!!!!!
<style>
.topnav {
  overflow: hidden;
  background-color: red;
  margin-left:7%;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: black;
  color: white;
}
.topnav .icon {
  display: none;
}
@media only screen and (max-width: 500px) {
  .topnav a:not(:first-child) {
     display: none;
   }
  .topnav {
     margin-left:10px;
  }
  .topnav a.icon {
    float: right;
    display: block;
    margin-right: 20px;
  }
}
@media screen and (max-width: 500px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
<div class="topnav" id="myTopnav">
  <a href="/">Home</a>
  <a href="/search/label/Blogspot">Blogspot</a>
  <a href="/search/label/SEO">SEO</a>

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
Nhấn vào Lưu rồi ra ngoài web xem Menu nó sẽ như này đây:
Chú ý phần chữ đỏ trong code trên nhé:
<a href="/">Home</a>
<a href="
/search/label/Blogspot">Blogspot</a>
<a href="
/search/label/SEO">SEO</a>
Phần chữ màu đen (Home, Blogspot, SEO) các bạn có thể sửa thành tên chuyên mục (label) hoặc text bất kỳ mà bạn thích.
Phần chữ màu xanh các bạn thay bằng link mà các bạn muốn chuyển trang khi click vào menu.
Như ở trên khi click vào Blogspot nó sẽ nhảy về trang https://blogvuicuoilen.blogspot.com/search/label/Blogspot
Nếu muốn thêm nhãn mới trong menu ví dụ bạn muốn thêm Tin tức vào menu thì thêm dòng này dưới dòng <a href="/search/label/SEO">SEO</a> là được:
<a href="#">Tin tức</a>
Sửa # thành link các bạn muốn Tin tức link tới nhé.
Phần menu này thực ra chẳng có gì phức tạp quan trọng là các bạn copy paste rồi sửa đúng chỗ thôi. Nói thêm là trên internet có rất nhiều đoạn menu được chia sẻ miễn phí, nếu không thích menu mà mình làm các bạn có thể tìm menu khác trên mạng.
Nói luôn là nguồn của menu này mình lấy ở trang w3schools nhé. Link em nó đây:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Chúc các bạn thành công , nếu có thắc mắc gì thì để lại comment nhé!

TẠO MENU NGANG ĐẸP CHO BLOGSPOT

     Hôm nay, giới thiệu với các bạn cách tạo menu ngang đơn giản (không có menu con xổ xuống). Đặc điểm nổi bật của menu này là đơn giản, đẹp, cài đặt dễ dàng mà không cần phải chèn code vào HTML của blog. Thích hợp với những blog có ít chuyên mục, đặc biệt là các mẫu mặc định của Blogspot và các bạn mới lập blog. Các bạn có thể xem trước mẫu menu này
Menu sẽ được tạo bằng các bước đơn giản sau đây:
1. Bấm vào "Thiết kế" trên thanh điều khiển sẽ hiện ra giao diện "Trang tổng quan". Tìm trong giao diện vừa hiện ra nút "Bố cục" và bấm vào đó. Một giao diện khác hiện ra, bấm "Thêm tiện ích" [1]. 
(Nên chọn vị trí "Thêm tiện ích" ở ngay dưới tiêu đề blog cho tiện.)


2. Trong bảng "Thêm tiện ích" hiện ra - bấm "HTML/Javascript" [2].




Tại giao diện "Định cấu hình HTML/JavaScript" - để trống tiêu đề và dán toàn bộ code trong khung dưới vào vị trí tương ứng.

<style>
 /*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
 #mbt-menu, {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #mbt-menu {
    width: 500px;
    margin: 10px auto;
    border: 0px solid #222; 
    background-color: #888; 
    background-image: -moz-linear-gradient(#666, #FAF);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#FAF));
    background-image: -webkit-linear-gradient(#666, #FAF);
    background-image: -o-linear-gradient(#666, #FAF);
    background-image: -ms-linear-gradient(#666, #FAF);
    background-image: linear-gradient(#666, #FAF);
    -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 {
    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 30px;
    color: #FFF;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #222;
    }
    #mbt-menu li:hover > a {
    color: #FC803D;
    }
    *html #mbt-menu li a:hover { /* IE6 only */
    color: #FC803D;
    }
    #mbt-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }
    #mbt-menu ul a:hover {
    background-color: #FC803D;
    background-image: -moz-linear-gradient(#07CDEF, #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#07CDEF), to(#0295DG));
    background-image: -webkit-linear-gradient(#07CDEF, #0295DG);
    background-image: -o-linear-gradient(#07CDEF, #0295DG);
    background-image: -ms-linear-gradient(#07CDEF, #0295DG);
    background-image: linear-gradient(#07CDEF, #0295DG);
    }
    </style>
    <ul id="mbt-menu">
    <li><a href="LINK BLOG">TRANG CHỦ</a></li>
    <li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li>
    <li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li>
    <li><a href="LINK NHÃN 3">TÊN NHÃN 3</a></li>
    <li><a href="LINK NHÃN 4">TÊN NHÃN 4</a></li>
    <li><a href="LINK NHÃN 5">TÊN NHÃN 5</a></li>
    </ul>

Lưu ý: 
  - Con số "960" (tô màu xanh) trong dòng code "width: 960px" là độ rộng thanh menu - các bạn có thể tăng, giảm cho phù hợp với độ rộng của blog. 
 - Thay phần tô màu đỏ bằng link các nhãn trong blog của các bạn, và phần tô màu xanh thành tên các nhãn tương ứng. Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:
3. Bấm "Lưu" [3] để lưu lại và hệ thống sẽ tự động trở lại giao diện như ở bước 1 và tại vị trí "Thêm tiện ích" ban đầu đã hiện thị một tiện ích mới với tiêu đề: "HTML/JavaScript" [4]. Đây chính là thanh menu đang tạo  



 - Trong bước này, các bạn có thể đặt lại vị trí thanh menu (dùng chuột kéo thả, di chuyển tiện ích vừa tạo đến vị trí thích hợp - trường hợp này chỉ cần thao tác khi bạn chọn "Thêm tiện ích" không nằm ngay dưới thanh tiêu đề từ bước 1.)
4. Bước cuối cùng: Bấm "Lưu sắp xếp" [5] để hoàn thành và trở lại trang chủ xem kết quả.
 P/S: Các đoạn code trên do một nhà thiết kế người Indonesia chia sẻ đã chỉnh sửa lại màu sắc và Việt hóa cho phù hợp.



 HƯỚNG DẪN TẠO MENU DROPDOWN CHO BLOG - KIỂU 1

Thứ ba, tháng chín 03, 2013
    Menu là một công cụ không thể thiếu cho một trang blog đạt chuẩn. Ngoài tác dụng trang trí cho blog và giúp cho người truy cập dễ dàng tìm kiếm, đi tới các danh mục chứa thông tin trong đó, menu còn có tác dụng SEO (tối ưu hóa tìm kiếm) cho blog.
    Theo email yêu cầu của một số bạn bè. Caocongkien 360 chia sẻ với các bạn cách tạo menu dropdown (có menu con xổ xuống) cho blog. Các bạn có thể xem mẫu menu này ngay trên đầu trang.

Cách tạo menu dropdown:

1. Đăng nhập vào blog, bấm "Thiết kế" - "Trang tổng quan", bấm vào "Mẫu", bấm tiếp "Chỉnh sửa HTML".
2. Tìm thẻ: ]]></b:skin>  . (Xem cách tìm nhanh các thẻ TẠI ĐÂY).
3. Chèn đoạn mã trong khung dưới đây vào phía trên thẻ: ]]></b:skin> vừa tìm được.




#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

HTML +Java
    <div id='mbtnavbar'> 
 <ul id='mbtnav'>
        <li>
        <a href=' link trang chủ'>TRANG CHỦ</a></li>
        <li>
 <a href='link chuyên mục'>TÊN MỤC</a></li>
        <li>
          <a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
 <a href='link chuyên mục'>TÊN MỤC</a>
<ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
        </li>
  <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
         </ul>
      </li>          
 <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN </a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
          </li>
         <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
            </li>
            <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
            <li><a href='link nhãn'>TÊN NHÃN</a></li> 
            <li><a href='link nhãn'>TÊN NHÃN</a></li>
            <li><a href='link nhãn'> TÊN NHÃN</a></li>
            <li><a href='link nhãn'>TÊN NHÃN</a></li>             
       </ul>
  </li>
<li>        
</li>
</ul>  
</div>


Chú ý: Con số (960) được tô màu đỏ, nằm trong nền xanh ở đoạn mã trên là độ rộng của thanh menu. Các bạn có thể thay đổi cho phù hợp với blog. 
Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!" 
4. Bấm "Lưu mẫu" để lưu vào template.



5. Lặp lại các thao tác ở bước số 1 và bấm vào "Bố cục", bấm tiếp "Thêm tiện ích" [1]  (ngay dưới tiêu đề blog - xem ảnh trên), chọn và thêm "HTML/JavaScript[2] trong bảng tiện ích hiện ra. Để trống tiêu đề và dán đoạn mã trong khung dưới vào phần nội dung:
    <div id='mbtnavbar'> 
 <ul id='mbtnav'>
        <li>
        <a href=' link trang chủ'>TRANG CHỦ</a></li>
        <li>
 <a href='link chuyên mục'>TÊN MỤC</a></li>
        <li>
          <a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
  <li>
 <a href='link chuyên mục'>TÊN MỤC</a>
<ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
        </li>
  <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
         </ul>
      </li>          
 <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN </a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
          </li>
         <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
                <li><a href='link nhãn'>TÊN NHÃN</a></li>
              </ul>
            </li>
            <li>
           <a href='link chuyên mục'>TÊN MỤC</a>
            <ul>
            <li><a href='link nhãn'>TÊN NHÃN</a></li> 
            <li><a href='link nhãn'>TÊN NHÃN</a></li>
            <li><a href='link nhãn'> TÊN NHÃN</a></li>
            <li><a href='link nhãn'>TÊN NHÃN</a></li>             
       </ul>
  </li>
<li>        
</li>
</ul>  
</div>
                     


- Phần mã nằm trong nền xanh ở khung trên là các menu con xổ xuống. 
- Thay "link chuyên mục" bằng link của các danh mục hoặc trang tĩnh trong blog; "tên mục" bằng tên các trang hoặc danh mục trong blog của các bạn.
- Thay "linh nhãn" bằng link các nhãn trong blog; "tên nhãn" bằng tên của các nhãn trong blog của các bạn. 
Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết: 
CÁCH GẮN LINK NHÃN LÊN THANH MENU
Cách tạo "nhãn" tại bài viết: 
 CÁCH TẠO NHÃN (CHUYÊN MỤC) CHO CÁC BÀI VIẾT TRÊN BLOGSPOT 
6. Bấm "Lưu" và định vị tiện ích vừa tạo rồi bấm "Lưu sắp xếp[3] là xong. 
Mời các bạn trở lại trang chủ xem kết quả!
Các bạn có thể tham khảo thêm:

 TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
Chúc các bạn áp dụng thành công và có một hệ thống menu drop đẹp!
P/S: Các đoạn code trên do một nhà thiết kế người Indonesia chia sẻ cho Caocongkien 360. Caocongkien 360 đã chỉnh sửa lại thêm vào một số chi tiết và Việt hóa cho phù hợp.

Nguồn: http://caocongkien.blogspot.com/2013/10/tao-menu-ngang-ep-cho-blogspot.html