15/10/13

Tạo thanh StickyBar ở phía trên cùng của blog

Đăng bởi Admin | 15/10/13 | 0 nhận xét

Bạn có thể thêm thanh thông báo dính trong blogger blog bằng cách hiển thị thanh hoặc ở đầu tiêu đề hoặc ngay dưới chân. Một thanh dính bây giờ có thể được sử dụng rộng rãi bởi tất cả các blog và các trang web (Mashable chẳng hạn) thông báo cho khách truy cập của bản cập nhật quan trọng, chào hàng, phiếu giảm giá và tin tức mới nhất.


thanh dính

 Bạn thậm chí có thể thêm các liên kết RSS của bạn có và yêu cầu bạn truy cập để đăng ký vào blog của bạn. Trong hướng dẫn này, tôi sẽ cố gắng để giữ cho mọi thứ đơn giản và sẽ chia sẻ cách thức để tạo ra như một widget thanh dính với văn bản đơn giản và hình ảnh. Tôi đã thêm hiệu ứng đổ bóng để nó sử dụng CSS3. Các widget tương thích với tất cả các trình duyệt.Xem giới thiệu dưới đây và trên trang giới thiệu di chuyển đến đầu để xem quầy bar.




]]></b:skin>


4. Ngay phía trên nó dán mã CSS bên dưới:
 
#mbt-stickybar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5Mkex9VE2ZcDsxtPJXgg51F3WRkghHaPmUNBzH7JdP14uVgy7VS00PclhqmxSpn2LTrmFhXVFl8SFUdnXx1ZrATbs2IKJPB1PtIoFxhq5tAmpYbkaehCN1b0X9fkgWjmHuenvgLbeyg/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

Để thay đổi màu nền của thanh sau đó chỉ cần thay đổi điều này # 0080FF   sử dụng bảng mã màu của chúng tôi để làm điều này.     
5. Tìm kiếm tiếp theo cho các mã này:


<body>
  
 6. Ngay bên dưới dán đoạn mã sau:


<div id='mbt-stickybar'>
<a href='#'>Thêm văn bản Ở ĐÂY</a>
</div>

Bây giờ thay thế # với liên kết văn bản của bạn ( có thể là liên kết RSS của bạn, quan trọng liên kết bài, vv ) và Thêm văn bản Ở ĐÂY với bất cứ điều gì bạn muốn viết. 
7. Lưu mẫu của bạn và bingo bạn đã làm xong! :) 
Nếu bạn muốn thêm một hình ảnh bên cạnh các liên kết của văn bản giống như một trong các trang giới thiệu, sau đó sử dụng mã này thay vì một trong những chia sẻ trong Bước # 6,


<div id='mbt-stickybar'>
<img src='hình ảnh LINK'/><a href='#'>Thêm văn bản Ở ĐÂY</a>
</div>

Đơn giản chỉ cần thay thế hình ảnh LINK với URL của hình ảnh của bạn, hình ảnh vv...

Chúc bạn thành công !...
                                                                         Nguồn: mybloggertricks.com

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva