Tạo tab nhiều tiện ích cho blogspot

Khi trên blog có nhiều tiện ích thì câu hỏi cần đặt ra là làm sao để có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog?...


Khi trên blog có nhiều tiện ích thì câu hỏi cần đặt ra là làm sao để có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Hình ảnh minh họa


» Bắt đầu thủ thuật
1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.pageTabs {
margin: 10px auto 0;
font-size:11px;}
ul.tabs {
margin: 0;
padding: 0 ;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0; /* màu nền của các Tabs*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eff0f1;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #eff0f1;
border-bottom: 1px solid #eff0f1;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%; /* độ rộng của phần nội dung các Tabs*/
color:#000;
background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 5px; 
font-size: 1.2em;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}

5. Chèn tiếp code bên dưới ngay sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
</script>

6. Save template lại
7. Trở về phần tử trang và thêm 1 HTML/Javascript
8. Thêm vào phần tử HTML/Javascript code bên dưới
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
NỘI DUNG CỦA TAB 1
</div>

<div id="tab2" class="tab_content">
NỘI DUNG CỦA TAB 2
</div>

<div id="tab3" class="tab_content">
NỘI DUNG CỦA TAB 3
</div>

<div id="tab4" class="tab_content">
NỘI DUNG CỦA TAB 4
</div>

<div id="tab5" class="tab_content">
NỘI DUNG CỦA TAB 5
</div>

</div>

» Chỉnh code:
- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn.
- Các dòng màu xanh là nội dung hiển thị tương ứng với các Tab, bạnh ãy thay thành các tiện ích tương ứng với các tab.

9. Save tiện ích và tìm vị trí đặt cho phù hợp

Nguồn: traidatmui

COMMENTS

BLOGGER: 1
  1. At about 23,000 retailers across the state, together with comfort stores and gasoline stations, you can buy purchase|you should buy} scratchers and fill out tickets for drawings, corresponding to MegaMillions and PowerBall. The survey protocol for the Baseline General Population Survey and the Baseline Online Panel Survey of Massachusetts was reviewed and approved 토토사이트 by NORC’s Institutional Review Board and by the University of Massachusetts Amherst Institutional Review Board. In the meantime, please save the date of May 23-25, 2023, and keep tuned to our web site,social media, and be a part of our mailing listing for the most recent updates. Fees for providers required hereunder shall be the identical as supplied for sheriffs and clerks for like and comparable providers in different cases and matters.

    ReplyDelete

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Tạo tab nhiều tiện ích cho blogspot
Tạo tab nhiều tiện ích cho blogspot
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-QS2fnxwoiIZK1zC4vdWoGcEM7RnSKCCn17Hs1-npf6Jo_NWZtYPVdHGyqSWm_dcmjqZnjKk-2YuY8KPjx0AZmQ5JUfnwok0U7i50FpcIat6uuIVeDIS4ol9-cNkfWaNkTj0ONEbugVw/s1600/tabs.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-QS2fnxwoiIZK1zC4vdWoGcEM7RnSKCCn17Hs1-npf6Jo_NWZtYPVdHGyqSWm_dcmjqZnjKk-2YuY8KPjx0AZmQ5JUfnwok0U7i50FpcIat6uuIVeDIS4ol9-cNkfWaNkTj0ONEbugVw/s72-c/tabs.png
Khám Phá Blogger
https://blogger.affimart.com/2012/09/tao-tab-nhieu-tien-ich-cho-blogspot.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/09/tao-tab-nhieu-tien-ich-cho-blogspot.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy