Tạo menu dọc xổ ngang CSS3 phong cách 3D cho Blogger

Bài viết này sẽ giúp bạn tạo được trình đơn dọc xổ ngang mang phong cách 3D cho blog. Bạn có thể dùng trình đơn này để liên kết các trang hoặc trinh bày các thể loại trên blog. Hãy xem DEMO bên dưới trước khi muốn thực hiện nó.

Tạo Tabbed Navigation CSS3 đẹp cho Blogger

Trong bài viết này sẽ hướng dẫn bạn làm thế nào để thêm CSS3 tab chuyển hướng cho các blogger.Bạn có thể thêm nó vào blogger như widget. Nếu bạn muốn thêm vào như trang fan hâm mộ, các nút xã hội hoặc các mã số để nút cá nhân, bạn có thể thêm nó bằng cách thay thế mô tả. Tiện ích này chỉ sử dụng CSS3 và hỗ trợ HTML

Demo

Thêm CSS3 Tabbed Navigation cho Blogger

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

Tạo phong cách hoạt hình jquery Tabs Widget cho Blogger

Vật dụng tab luôn luôn giúp đỡ để tiết kiệm khong gian cho website . Hướng dẫn này giải thích làm thế nào để thêm phụ tùng tab juery độc đáo  cho blogger. Tôi sử dụng css và jQuery để thực hiện widget này. Tab này làm việc với tất cả các phụ tùng web hiện đại. However của nó không làm việc với trình duyệt IE. Bạn có thể hãy xem trong trang demo để có được ý tưởng như thế nào nó hoạt động. 

Demo

Tạo các Tab nội dung trên cùng một Widget

Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.

Ở đây mình giới thiệu 3 lọai tab:
A. Loại 1:
Hình minh họa:
Code:

Tạo Menu ngang với hiệu ứng xổ menu con theo hàng ngang

Bài viết hôm nay mình xin được giới thiệu một style khác trong menu dạng phân cấp. Đó là menu sổ 1 hàng ngang, kèm theo hiệu ứng đóng mở menu con khi click chuột.

Xem hình minh họa:

Như các menu khác, menu này cũng gồm 3 phần : Code Java, code CSS, vàcode HTML
Trước tiên bạn download gói hình ảnh này về : FD-img.rar rồi up lên host lấy link để dùng cho code CSS.

Tạo Menu ngang xổ dọc xuống cho blogspot

Tạo menu là công việc không thể thiếu đối với mỗi quản trị web, blog. Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm. Nhưng có một thanh menu đẹp và tiện lợi thì không phải web/ blog nào cũng có.

Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

Tạo Menu Drop với CSS3 - Không có hình ảnh và không Scripts

Menu này  không sử dụng hình ảnh hoặc các kịch bản ở tất cả! Nó được tạo ra bởi Catalin Rosu và được chúng tôi sửa đổi để có thể hoạt động hoàn hảo với Blogger. Màn hình hiển thị sức mạnh tinh khiết của CSS3. Nó thực sự là Cool và chuyên nghiệp Widget cho Blog của bạn. Nó là rất dễ dàng tích hợp vào blog của bạn. 

Tạo tabs đơn đầy màu sắc cho blogger

Sau khi đã được công bố và được thiết kế trên 100 + Danh mục thực đơn cho Blogger, cả hai đều ngang và dọc xem danh sách, hôm nay chúng tôi muốn chia sẻ một menu đẹp đã vẫn là sự lựa chọn yêu thích của tất cả các khách hàng MBT cho đến nay. Menu này thay đổi màu sắc cho mỗi tab trên chuột di chuột. Nó sử dụng các chức năng JavaScript đơn giản để sản xuất các hiệu ứng chuyển gọn gàng và sạch sẽ. Thay vì hiển thị các mục trình đơn phụ trong danh sách thả xuống dọc truyền thống, chúng tôi liên kết chúng với nhau để phù hợp với một dòng đơn. Không giống như các trình đơn khác, tiện ích này sẽ dễ dàng phù hợp với bất kỳ mẫu Blogspot không có xung đột thiết kế. Nó được đặt ở phần trên cùng của hầu hết các blog của bạn để thu hút độc giả nhiều nhất. Các bước cài đặt được vui vẻ để cố gắng và rất dễ dàng. Menu hoạt động tốt trên tất cả các trình duyệt chính, tức là: IE7 +, Safari, Chrome, Mozilla và Opera. Cho phép thêm nó vào blog của bạn và để loại bỏ bất kỳ đơn cồng kềnh hiện tại đã chứng minh không ít hơn một rắc rối.

Tạo 3 cột cho widget ở vị trí chân trang (footer) cho blogspot

Có lẽ bạn đã thấy nhiều ở những trang blog chuyên nghiệp và thương mại thường có đến 3 cột để chèn các widget vào ở tại vị trí footer, và bạn cũng muốn làm điều đó. Chỉ tiếc một điều là template mà bạn đang dùng hiện tại lại không hỗ trợ cho việc hiển thị 3 cột tại vị trí footer. Nếu bạn gặp vấn đề này thì mình sẽ bày cho các bạn tự tay tạo thêm 3 vị trí cho template của mình.

Nào chúng ta cùng từng bước thực hiện nhá :

Danh mục Menu cho blog

Bạ có thể lựa chon cho mình mẫu  menu ưng ý cho blog - web của mình qua hệ thống bài hướng dẫn dưới đây:

• Tạo 3 cột cho widget ở vị trí chân trang (footer) cho blogspot
• Danh mục Menu cho blog
• Thêm Widget theo nhiều thẻ trong một Tab cho Blogger (style3)
•  Tạo một Tab chứa nhiều Widget cho blog ( style 2)
• Tạo một Tab tích hợp nhiều widget cho blog (style 1)

• Tạo trình đơn thả xuống đơn giản sử dụng JQuery
• Tạo bản trình diễn SlideShow trượt tuyệt đẹp vào blog/ web
• Thêm jQuery hình ảnh trượt vào blog
• Thêm menu ngang 3D với CSS cho blog
• Tạo thanh điều hướng gắn hộp Tìm kiếm tuỳ chỉnh và các mạng xã hội với CSS3
• Tạo thực đơn ngang với hiệu ứng xuất hiện biểu tượng khi di chuột
• Tạo thực đơn dọc với hiệu ứng click chuột cho blog
• Tạo Thực đơn dọc nổi sử dụng jQuery cho blogspot
• 25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 5)
• 25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 4)
• 25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 3)
• 25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 2)
• 25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 1)
• 30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 3)
• 30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 2)
• 30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 1)
• Thêm jQuery đơn ngang thả xuống cho Blogger
• 17 mẫu Drop Down Menu Widget trong Blogger - menu đơn ngang với CSS và HTML Codes
• JavaScript Side Bar đơn trượt đẹp cho blog

Thêm Widget theo nhiều thẻ trong một Tab cho Blogger (style3)

Các vật dụng trên một Blog Wordpress chắc chắn được thiết kế và mã hóa nhưng thậm chí họ còn tốt hơn khi chúng được bloggerized và thực hiện tương thích để làm việc trong Blogger. Bài trước Thu thuat vi tinh đã hướng dẫn tạo ra chi tiết nhiều Widget theo thẻ, hôm nay Thu thuat vi tinh tiếp tục giới thiệu thêm một tiện ích đa tab. Điều tốt nhất về tiện ích này là bạn có thể thêm nhiều vật dụng như bạn muốn trong một Tab duy nhất mà bạn không thể làm trước đây.  CSS và các hiệu ứng Jquery được thêm vào thời gian này để chế độ xem tab và người viết đã cố gắng một lần nữa để thực hiện cài đặt của nó dễ dàng có thể. Do đó, không trì hoãn thêm nữa và tìm hiểu cách thêm một widget tabber chuyên nghiệp đến các blog Blogger miễn phí của bạn.

Tạo một Tab chứa nhiều Widget cho blog ( style 2)

Tôi đã xuất bản một bài  Làm thế nào để thêm một widget đa tab cho blog của bạn và làm thế nào để tùy chỉnh nó cho phù hợp với bố trí blog của bạn. Vấn đề duy nhất với widget là nó không hoàn toàn widgetized nghĩa là bạn không thể thêm lưu trữ, nhãn, hồ sơ cá nhân tác giả hoặc các vật dụng chính thức khác, trừ khi bạn có mã số riêng biệt của họ với bạn. Thu thuat vi tinh sẽ thêm một widget tabber đẹp và linh hoạt hơn và nâng cao cách điệu bởi kiểu dáng mỏng như ba tít và biên kịch bởi Barelyfitz .Tôi đã sửa đổi mỏng như ba tít của hướng dẫn và đã thực hiện một số thay đổi mã như vậy để làm cho nó thậm chí còn đơn giản hơn. Bạn có thể xem tiện ích này ở hình bên.

Để thêm tiện ích đa tab dễ thương này đến các blog Blogspot của bạn theo các bước sau.

Tạo một Tab tích hợp nhiều widget cho blog (style 1)

Nhiều Widget trong cùng một Tab  trên blog giúp làm giảm thời gian tải của một blog bằng cách kết hợp ba hoặc nhiều hơn ba thẻ trong cùng một tiện ích. Có thể bạn đã thấy tiện ích này trên các blog, nhưng câu hỏi là làm thế nào để làm được điều đó? Thu thuat vi tinh cũng đã tìm kiếm trong Google về cách thêm một widget đa tab vào blog nhưng gõ mãi chẳng ra. Bất ngờ tìm kiếm được nên xin chia sẻ lại cho mọi người cùng sử dụng.

Widget này trông mát mẻ chỉ khi mã hoá với CSS và JavaScript. Một số blog chia sẻ hướng dẫn khác nhau nhưng tiếc là hầu hết những bài viết này hoặc là rất khó hiểu hoặc chúng được viết bằng một ngôn ngữ kỹ thuật mà một newbie không thể hiểu được. Hơn nữa các mã mà họ cung cấp là khá dài làm tăng thời gian tải của trang chủ của bạn và thường là phụ tùng dường như không làm việc trong các trình duyệt như Internet Explorer. Và phần tệ nhất là một số blogger đã chia sẻ thủ thuật này thường được bổ sung liên kết blog của họ vào mã phụ tùng và khi bạn xem widget trong blog của bạn, ở dưới cùng của widget mà bạn sẽ tìm thấy điều này " Widget bởi XYZ.com "hoặc" lấy Widget này ". Liên kết này chắc chắn là bất công với người đọc.

Tạo trình đơn thả xuống đơn giản sử dụng JQuery

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  </head> và thêm mã dưới đây ngay trên nó:

Tạo bản trình diễn SlideShow trượt tuyệt đẹp vào blog/ web

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  </head> và thêm mã dưới đây ngay trên nó:

Thêm jQuery hình ảnh trượt vào blog

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  </ head> và thêm mã dưới đây ngay trên nó:

Thêm menu ngang 3D với CSS cho blog

Bạn thực hiện theo các bước sau:

1. Tới Blogger Bảng điều khiển> Mẫu

2. Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm 

</head>

 và thêm mã dưới đây ngay trên nó:

Tạo thanh điều hướng gắn hộp Tìm kiếm tuỳ chỉnh và các mạng xã hội với CSS3

 Bài viết này sẽ cung cấp cho các bạn một tiện ích độc đáo. Nó giải thích làm thế nào để thêm 3 trong 1 CSS3  trên thanh điều hướng. Nó bao gồm hồ sơ mạng xã hội như Facebook, Twitter và RSS với các tùy chỉnh cho Hộp tìm kiếm của Google. Bạn có thể liên kết với các trang chính của bạn bằng cách sử dụng CSS3 này để chuyển hướng bar. Tiện ích sử dụng CSS3 và HTML. Hãy xem  Demo đẻ hiểu rõ hơn. Thu thuat vi tinh tin rằng đây sẽ là một tiện ích hấp dẫn đối với bạn.

Tạo thực đơn ngang với hiệu ứng xuất hiện biểu tượng khi di chuột

Các nhà phát triển web sử dụng CSS3 để tạo biểu tượng di chuột hiệu quả. Đến với tiện ích này sẽ cho bạn thấy cách sử dụng CSS3 với sự xuất hiện của biểu tượng khi di chuột vào thực đơn hiệu quả mà không cần sử dụng bất kỳ thư viện JavaScript nào. CSS3 luôn luôn hữu ích để tùy chỉnh dễ dàng . Nó tạo ra hình ảnh động dễ dàng bởi vì đã được tối ưu hóa bằng HTML. 

Các danh mục đối với các blogger rất quan trọng. Chúng ta có thể điều hướng các trang của blog và bạn có thể tìm hiểu cách thêm CSS3 với biểu tượng xuất hiện khi di chuột. Thu thuat vi tinh tin rằng đây sẽ  là một tiện ích hữu ích cho bạn.

                                                                

Tạo thực đơn dọc với hiệu ứng click chuột cho blog

Trong thiết kế web, thanh định vị là rất quan trọng bởi nó giúp khách truy cập điều hướng trang web một cách dễ dàng để tìm các nội dung quan trọng. Vì vậy, lựa chọn một thanh điều hướng tốt và phù hợp là việc làm cần thiết. Thu thuat vi tinh sẽ giới thiệu với các bạn một mẫu thực đơn dọc với cách thiết kế cực kì đơn giản. Với tiện ích này, bạn chỉ việc sao chép và dán bất kỳ mã và sửa đổi điều hướng blogger thanh cho phù hợp với nhu cầu của bạn. Tiện ích này cho phép bạn thêm các liên kết nhiều hơn nữa đến các tab có thể click được chuyển