Menu tab landing cho nội dung bài viết

• CSS
• JavaJquery
• CONTENT
• TAB4
• TAB5
• TAB6

• CSS CHO NỘI DUNG BÀI VIẾT DẠNG MENUTAB - LANDING PAGE ( CHÈN VÀO TRƯỚC THẺ ĐÓNG ]]></b:skin> )

  ul#tabs { list-style-type: none; padding: 0; text-align: center; } ul#tabs li { display: inline-block; float: left; font-size: 14px; text-decoration: none; color: #d22f2f; font-weight: bold; margin: 5px 5px 5px 5px; border: 1px solid #c3c3c3; padding: 5px 5px; text-transform: uppercase; cursor: pointer; } ul#tabs li:hover { background-color: #df1f26; color: #ffffff; } ul#tabs li.active { background-color: #df1f26; float: left; font-size: 14px; text-decoration: none; color: #ffffff; font-weight: bold; margin: 5px 5px 5px 5px; border: 1px solid #c3c3c3; padding: 5px 5px; text-transform: uppercase; } ul#tab { list-style-type: none; margin: 0; padding: 0; } ul#tab li { display: none; } ul#tab li.active { display: block; }

• JAVA JQUERY CHO TAB NỘI DUNG - MENUTAB LANDINGPAGE ( CHÈN VÀO TRƯỚC THẺ ĐÓNG </head> )

  <!-- jquery tab nội dung--> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/> <script class='jshilang' type='text/javascript'> //<![CDATA[ // *** jquery tab nội dung *** $(document).ready(function(){ $("ul#tabs li").click(function(e){ if (!$(this).hasClass("active")) { var tabNum = $(this).index(); var nthChild = tabNum+1; $("ul#tabs li.active").removeClass("active"); $(this).addClass("active"); $("ul#tab li.active").removeClass("active"); $("ul#tab li:nth-child("+nthChild+")").addClass("active"); } }); }); //]]> </script>
  

• NỘI DUNG BÀI VIẾT DẠNG MENUTAB - LANDING PAGE

  <ul id="tabs"> <li class="active">TAB1</li> <li>TAB2</li> <li>TAB3</li> <li>TAB4</li> <li>TAB5</li> <li>TAB6</li> </ul> <div style="clear: both;"> <br /></div> <ul id="tab"> <li class="active"> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB1</b></h2> test noi dung tab1 </li> <li> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB2</b></h2> test noi dung tab2 </li> <li> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB3</b></h2> test noi dung tab3 </li> <li> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB4</b></h2> test noi dung tab4 </li> <li> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB5</b></h2> test noi dung tab5 </li> <li> <h2 style="color: red; font-size: 30px;"> <b>TITLE TAB6</b></h2> test noi dung tab6 </li> </ul>

• TITLE TAB4

  LANDING PAGE cho blogspot

• TITLE TAB5

  MENUTAB Landing page cho blogspot

• TITLE TAB6

  MENUTAB Landing page cho nội dung bài viết blogspot