Cách Tạo Tab Nhiều Tiện Ích - Widget Cho Blogspot

Chuyên mục bạn có thể xem thêm ... BENNY HINN TỔNG HỢP NHIỀU BÀI VIẾT BILLY GRAHAM BÀI THUỐC CHỮA BỆNH CHUYỆN HAY Ý ĐẸP CHẮP CÁNH CHO TÂM HỒN BAY CAO CÁC LỄ TRONG HỘI THÁNH CÂY THUỐC DAVID YONGGI CHO GIA ĐÌNH BỀN VỮNG GIÁO LÝ TIN LÀNH HÔN NHÂN BỀN VỮNG HÔN NHÂN- GIA ĐÌNH HẦU VIỆC CHÚA HỌC- SUY NGẪM KINH THÁNH CỦA TÔI... JOHN BEVERE JOYCE MERYER KARAFUN KARAOKE KENETH E.HAGIN KHOA HỌC HIỆN ĐẠI KHOA HỌC- NIỀM TIN NGÀY TẬN THẾ NGƯỜI MẸ NICK VUJICIC NUÔI DƯỠNG TÂM LINH NỀN TẢNG HÔN NHÂN PHIM ẢNH KHIÊU DÂM PHỎNG VẤN QUAN HỆ TÌNH DỤC RICK WARREN SÁCH ONLINE CƠ ĐỐC SÁCH ONLINE ĐỜI SỐNG SẮC ĐẸP SỨC KHỎE THIẾU NHI THÁNH CA THƯ VIỆN THỦ THUẬT MÁY TÍNH TRẦN THÁI SƠN TÀ GIÁO TÌNH DỤC TÌNH YÊU ĐẠO VÀ ĐỜI ĐỌC SÁCH Danh mục sách trong THƯ VIỆN ... Thêm Phước Hạnh Trong Tài Chính (4 bài) Bài giảng của Mục sư Đoàn Văn Miêng 95 luận điểm của Martin Luther (2 bài) Chúa Tái Lâm (1 bài) Sống trong những ngày sau rốt (2 bài) Gây dựng Hội Thánh mới (2 bài) Tẩy sạch để phấn hưng (7 bài) Nguyên tắc giải nghĩa Kinh Thánh(2 bài) Con trai của sự yên ủi (1 bài) Thánh kinh thông lãm Cựu ước (39 bài) Ms Trần Thái Sơn 100 Bài học KT của Alban Douglas Cách kinh doanh của người Do Thái (3 bài)

Cách tạo tab nhiều tiện ích - widget cho blogspot - Code tạo tab nhiều tiện ích - widget cho blogspot. Hướng dẫn cách tạo tab nhiều tiện ích - widget cho blogspot.

Đây là cách giúp bạn 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 blogspot này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Phần này để chỉnh sửa và thêm vào tốt đòi hỏi các bạn phải biết qua code chút

Cách1: Cách tạo tab với nội dung có sẵn cho blogspot

Bước 1: Đăng nhập vào blog ==> Chọn mẫu (template) ==> Chọn chỉnh sửa HTML

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; }

Các bạn có thể tùy biến css để cho đẹp

Bước 2: Chèn tiếp code bên trên thẻ </head>

DON 2

<script src="https://dl.dropboxusercontent.com/u/95745796/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>

Bước 3: Save template lại

Bước 4: Trở về phần tử trang và thêm 1 HTML/Javascript

Thêm vào phần tử HTML/Javascript code bên dưới

<ul class="tabs">

<li><a href="#tab1">Tiêu đề TAB1</a></li>

<li><a href="#tab2">Tiêu đề TAB1</a></li>

<li><a href="#tab3">Tiêu đề TAB1</a></li>

<li><a href="#tab4">Tiêu đề TAB1</a></li>

<li><a href="#tab5">Tiêu đề TAB1</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ú ý: 

- Số lượng tab các bạn cũng tùy biến nhé.Ở đây mình để 5 tab

- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn. và nội dung bạn cần hiển thị nhé

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

Cách 2: Cách tạo tab nhiều tiện ích - widget cho blogspot

Bạn làm Bước 1 - Bước 2 giống như trên

Bước 3: Đặt vị trí bạn muốn thêm tab này vào.

<ul class="tabs">

<li><a href="#tab1">Tiêu đề TAB1</a></li>

<li><a href="#tab2">Tiêu đề TAB1</a></li>

<li><a href="#tab3">Tiêu đề TAB1</a></li>

<li><a href="#tab4">Tiêu đề TAB1</a></li>

<li><a href="#tab5">Tiêu đề TAB1</a></li>

</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">

Code webget 1 - Code Tiện ích 1

</div>

<div id="tab2" class="tab_content">

Code widget 2 - Code Tiện ích 2

</div>

<div id="tab3" class="tab_content">

Code widget 3 - Code Tiện ích 3

</div>

<div id="tab4" class="tab_content">

Code widget 4 - Code Tiện ích 4

</div>

<div id="tab5" class="tab_content">

Code widget 5 -Code Tiện ích 5

</div>

</div>

Các tiện ích bạn có thể thêm vào phần Code webget 1 - Tiện ích 1-2-3-4-5

Tiện ích dạng HTML/Javacripts 

(Bạn có thể tham khảo bài viết sau: Cách thêm widget vào vị trí bất kỳ trong blogspot)

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Bài Viết Hay' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Tiện ích dạng bài viết xem nhiều:

<b:section class='sidebar123' id='sidebartab121' preferred='yes'>

<b:widget id='PopularPosts2' locked='false' title='Xem nhiều trong tuần' type='PopularPosts'>

<b:includable id='main'>

              <b:if cond='data:title'>

                <h2>

                  <data:title/>

                </h2>

              </b:if>

              <div id='floatDiv'>

                <div class='widget-content popular-posts'>

                  <ul>

                    <b:loop values='data:posts' var='post'>

                      <li>

                        <b:if cond='data:showThumbnails == &quot;false&quot;'>

                          <b:if cond='data:showSnippets == &quot;false&quot;'>

                            <!-- (1) No snippet/thumbnail -->

                            <a expr:href='data:post.href'>

                              <data:post.title/>

                            </a>

                            <b:else/>

                            <!-- (2) Show only snippets -->

                            <div class='item-title'>

                              <a expr:href='data:post.href'>

                                <data:post.title/>

                              </a>

                            </div>

                            <div class='item-snippet'>

                              <data:post.snippet/>

                            </div>

                          </b:if>

                          <b:else/>

                          <b:if cond='data:showSnippets == &quot;false&quot;'>

                            <!-- (3) Show only thumbnails -->

                            <div class='item-thumbnail-only'>

                              <b:if cond='data:post.thumbnail'>

                                <div class='item-thumbnail'>

                                  <a expr:href='data:post.href' target='_blank'>

                                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                                  </a>

                                </div>

                              </b:if>

                              <div class='item-title'>

                                <a expr:href='data:post.href'>

                                  <data:post.title/>

                                </a>

                              </div>

                            </div>

                            <div style='clear: both;'/>

                            <b:else/>

                            <!-- (4) Show snippets and thumbnails -->

                            <div class='item-content'>

                              <b:if cond='data:post.thumbnail'>

                                <div class='item-thumbnail'>

                                  <a expr:href='data:post.href' target='_blank'>

                                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                                  </a>

                                </div>

                              </b:if>

                              <div class='item-title'>

                                <a expr:href='data:post.href'>

                                  <data:post.title/>

                                </a>

                              </div>

                              <div class='item-snippet'>

                                <data:post.snippet/>

                              </div>

                            </div>

                            <div style='clear: both;'/>

                          </b:if>

                        </b:if>

                      </li>

                    </b:loop>

                  </ul>

                  <b:include name='quickedit'/>

                </div>

              </div>

            </b:includable>

</b:widget>

</b:section>

Các bạn có thể tham khảo một số bài viết sau để thêm có thế lấy các code widget

Phần này các bạn tìm hiểu thêm  nhé

Chúc các bạn thành công !

Mọi đóng góp về bài vở xin liên hệ tới chúng tôi qua email: luaphucamhp@yahoo.com

Trang Hoithanhkienbai Blog: Một trang chia sẻ cho bạn về niềm tin nơi Thượng Đế trong Đức Chúa Giê-xu Christ: Tin tức, dưỡng linh, đời sống, hôn nhân, vvv..