Float Menu với jQuery và css

Bước 1.Dăng nhập vào tài khoản --> bảng điều khiển --> Thiết kế --> Chỉnh sửa html Bước 2. Tìm thẻ <head> và thêm vào bên dưới nó đoạn code sau

/*----------------------------------------------------
{--------} Menu navigation {--------}
----------------------------------------------------*/
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 10px;
  left: 0px;
  list-style: none;
  z-index:9999;
}
ul#navigation li {
  width: 100px;
}
ul#navigation li a {
  display: block;
  margin-left: -2px;
  width: 100px;
  height: 70px;  
  background-color:#CFCFCF;
  background-repeat:no-repeat;
  background-position:center center;
  border:1px solid #AFAFAF;
  -moz-border-radius:0px 10px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  /*-moz-box-shadow: 0px 4px 3px #000;
  -webkit-box-shadow: 0px 4px 3px #000;
  */
  opacity: 0.8;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
<b>ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlcJhnJWPOOqCSWmvIPZagxhJEnEO-ZMLHTUNLQMVzy_bcLyPksbiTbuZKSYWEV2qfziUMVQct6lT-dLVykOjqGdWxWDEcLArgi-XoOUCLBEv1JFlP3i0xVm91hICbxW8lKK-01qz0bY/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJuTV2s-CVsEP9dmHOfyRjdHqN9ZEcYaPfbP2xBIF16RcKXsG6IRhfDm9Bvq_zSCINUQup-fcd7oaavDNNFIXA4eK1y6n1Yyfb-RFYuRAxjSaxJxkmCtp1ZTJBdAHO5xzLQWYxDqU0Wg0/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0K8dEHf3TFrq9-AurbjLVRIh0YVB4o1Fdk0eADZmJdI5BzTVtcaMlCwDh4lfS_CIAmXw-foG47UgdAsBYnzfELY5WwpuzpwPQY7qKdPXHifiQERD18slFoKRgD8p5d72o7oOOI_q1RI/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3fhg6OEAWXSOIMLYIC4zXo4khLwDbTdes0U2KO6RVjihdD-PQ8MGeW6duIf0uUhBp4tSDDvqatB8V4XrugGUOsbn5uhxGdzqDaKRfCJ9Mk0ndmbnSK3yvMzWnmL8xQeQYh19rxPxYv8/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLf62PoCFCYHRD8X1hCCEf7n7zu-KxQQQDlhUoSXWnOujTD-SAraVZkqPk_QPkdZGazOhtGaKFMZP4QjZ9bb1rky39EXLgh2KniLtXE4ff8oKc5IxMI4omMtCZcvwOeo9adzyBrpUAjpM/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnY_MQQDhxiBjRQw05eSoy2e4gkLBS_6KBW3rRSpH6N7Ed6icZPuexqrWqkVqAf4JGUC8XpZfwM37TH1kMVgDSCBN5TTrWw41R_gzg554QXOymb9Hz-gZ2DDP2v1npADez3GjtYdhGHRg/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8-soZKf7suFEp_xnRUtE3DCTjAnwWTUP0NvtBVOQkm0R9mTn9caAORkOBuKBwaDgqnVBLux2VOSq2g24tHBEArohcFdSfRu71hcn1qZAZRTcolKmSNkbJlrj5PSJowKluN9LIK6t_Nc/s1600/mail.png);
}

Bạn chú ý:

ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlcJhnJWPOOqCSWmvIPZagxhJEnEO-ZMLHTUNLQMVzy_bcLyPksbiTbuZKSYWEV2qfziUMVQct6lT-dLVykOjqGdWxWDEcLArgi-XoOUCLBEv1JFlP3i0xVm91hICbxW8lKK-01qz0bY/s1600/home.png);
}

Đó là phần hiển thị kèm theo menu. Bạn có thể tùy biến thêm hoặc bớt tùy ý. VD: bạn muốn làm 1 cái hình thông báo chẳng hạn thì đoạn mã css như sau:

ul#navigation .thongbao a  {
  background-image: url(link ảnh);
}

Bước 3: Tìm thẻ </head> và thêm đoạn js này trước nó:
Bước 4: Lưu mẫu Bước 5: Vào phần tử trang -> Thêm Widget/HTML -> Dán đoạn Code sau vào nội dung Widget