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

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

 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.

Demo

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  ]]> </ b: skin> và thêm mã dưới đây ngay trên nó:

#btrix1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
        width:900px;   
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both; 
 background: #696969 left bottom no-repeat; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right;  }
#updatesBox { margin-left: 100px; }

6. Tới blogger và nhấn diện 
7. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
8. Dán mã dưới đây.

<div class="clearfix" id="btrix1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggertrix.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript"></script>
    </div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswezB9gtJYNh-2PM-tJFbzgby9SQARKacFLSKk0IuZI3RvLYrhreQ1R_4VV2WFLLrCC9RGAVXHzR_juQWLzVy-yHV-CjRRUaGigN8JRE7M7aYFca6gv4O7KYk41DkEx1-tsWOdpXtvKo/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/bloggertrix" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA_PcveRt13lzanGfaRAik10uGjWGrz6Z9pZgRrAAT3T4x9ePNNkFsFfJMDszQGP-ccf7NmkrhPYXHiKKvMdMcbS1GF2KCHBLKForeUrd91gbFh7t1MOHetVWiHG7JcpYDO9Deq0c0zzM/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/bloggertrix" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0UKxCdtEOgenx5QDPbKYYyyfkHEaFGtxKE7-hRNEHblCur9C9naC9UUQByUpmYApfHF9zvybwlIbhY3-46lc5ESzdz06pM-3tI8qC3OMH2k0fMFJGAmP1EFvh6uB-EaGatN_GhEjUPTA/s1600/btrix-facebook-icon.png" /></a></div>
</div>

* Lưu ý:
- Thay thế # với các liên kết của bạn. 
- Thay bloggertrix với  ID Feedburner của bạn  
- Thay bloggertrix với Tên truy nhập Facebook của bạn 
- Thay thế bloggertrix với Tên đăng nhập Twitter  của bạn
9. Lưu HTML / Javascript. 
 Hy vọng tiện ích này sẽ  giúp  blog của bạn hấp dẫn hơn. 
Chúc bạn thành công !...
                                                                                  Nguồn tham khảo: bloggertrix.com