วิธีสร้าง jQuery Interface Tabbed (สวยๆ) บน blogger

สอนทำ blogger
jQuery Interface Tabbed เป็นเมนู tab อีกชนิดหนึ่งที่ทำให้บล็อกของเรามีไสตล์มากขึ้น และยังช่วยประหยัดพื้นที่ Sidebar ได้

นอกจากรูปที่แสดงให้ดูข้างบนแล้วคุณสามารถไปดูตัวอย่างการทำงานได้ที่ลิงค์ด้านล่าง



โปรดอ่าน! ก่อนทำการติดตั้ง หาก Template ของคุณมีการติดตั้ง jQuery 1.3.2 เอาไว้ก่อนหน้านี้จะไม่สามารถติดตั้ง jQuery Interface Tabbed เพิ่มได้ เพราะจะทำให้ jQuery 1.3.1 ไม่ทำงาน (อีกอันหนึ่งทำงาน อีกอันหนึ่งก็จะไม่ทำงาน) 




วิธีในการติดตั้ง

ก่อนอื่นให้ Log in เข้าไปที่ blogger.com และหากใครที่ไม่ชำนาญในการแก้ไขแม่แบบให้ Backup แม่แบบเอาไว้ก่อน และเมื่อทำการ Backup เสร็จแล้ว

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้อง ขยายแม่แบบเครื่องมือ


สอนแต่งบล็อก

1. ติดตั้ง CSS
โดยค้นหา (กด Ctrl+F) โค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

สอนทำบล็อก


/* jquery-tabbed-interfacetabbed edit by http://hackublog.blogspot.com */
#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://hackublog.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/hackublog/home/server/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/hackublog/home/server/tabStar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/hackublog/home/server/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/hackublog/home/server/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/hackublog/home/server/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/hackublog/home/server/boxTop.png)no-repeat;
    height:11px;clear:both}
.boxBody {    background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/hackublog/home/server/boxBottom.png) no-repeat;
    height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://upic.me/i/xi/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span {    font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}



แนวทางการปรับแต่ง CSS ในตำแหน่งต่าง ๆ ให้ดูจากรูปด้านล่างครับ(จะไม่ปรับก็ได้)

สอนทำblogger



2. ติดตั้ง Java Script


ต่อเนื่องจากขั้นที่ 1 ให้ค้นหา </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว



สอนสร้างบล็อก


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function() {   
  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {   
    //remove the selected class from all LI   
    $('#tabMenu > li').removeClass('selected');
    //Reassign the LI
    $(this).addClass('selected');
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
  }
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest   
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');  
  }).mouseout(function() {
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');   
  });
    //Mouseover with animate Effect for Category menu list
  $('.boxBody #category li').click(function(){
    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  }); 
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('#.boxBody li').click(function(){
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });     
});
</script>





ขั้นที่ 3 ติดตั้ง HTML

ไปที่องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์ แล้ววางโค้ดต่อไปนี้ลงไป ปรับแต่งตามความต้องการและบันทึก(โดยไม่ต้องตั้งชื่อ Gadget)

ทำบล็อก


<div class="box">
  <ul id="tabMenu">
    <li class="posts selected"></li> <!-- default button-->
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>
 
<div class="boxTop"></div>
 
<div class="boxBody">
     
<!-- default page-->
<div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>

      </ul> 
    </div> 
   
<div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>

      </ul>
    </div>

<div id="category">
         <ul>
           <li>Category 1</li>
           <li>Category 2</li>
        <li class="last">Category 3</li>

         </ul> 
       </div>

<div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>

      </ul> 
    </div>

<div id="random">
      <ul>
        <li>Random post 1</li>
        <li>Random post 2</li>
        <li class="last">Random post 3</li>

         </ul>   
</div>
       
</div>
<div class="boxBottom"></div>
</div>



โค้ดสีน้ำตาลสามารถใส่เนื้อหาที่คุณต้องการได้ตามต้องการ ซึ่งอาจจะแทนที่ด้วย จาวาสคริปต์ ที่แสดง Recent post , Recent comment , Popular post, Link เชื่อมโยง, Random Post , Twitter update หรือ ข้อความปกติก็ได้




หากท่านใดอยากจะทดลองโค้ดดูก่อนก็ลองใช้โค้ดตัวอย่างด้านล่างนี้ได้ครับ

โค้ดตัวอย่าง

<div class="box">
<ul id="tabMenu">
  <li class="posts selected"></li>
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
  <div id="posts" class="show">
    <ul>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>50 Monochromatic Website Designs.</li>
      <li>Food Plates and Creative Dishware Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
    </ul> 
  </div> 
  <div id="comments">
    <ul>
      <li><a>jQuery Tabbed Navigation Menu. <span> - Hackublog</span></a></li>
      <li><a>You can add links in here! <span> - Hackublog</span></a></li>
      <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - Hackublog</span></a></li>
      <li><a>I hope you will like it. <span> - kevin</span></a></li>
      <li><a>My next tutorial will be jQuery-based Accordion. <span> - Hackublog</span></a></li>
      <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - Hackublog</span></a></li>
    </ul>
  </div>
  <div id="category">
    <ul>
      <li><a href="http://hackublog.blogspot.com/" >ajax</a></li>
      <li><a href="http://hackublog.blogspot.com/" >css-html</a></li>
      <li><a href="http://hackublog.blogspot.com/">freebies</a></li>
      <li><a href="http://hackublog.blogspot.com/" >icon</a></li>
      <li><a href="http://hackublog.blogspot.com/" >inspiration</a></li>
      <li><a href="http://hackublog.blogspot.com/" >javascript</a></li>
      <li><a href="http://hackublog.blogspot.com/" >logo</a></li>
      <li><a href="http://hackublog.blogspot.com/">photography</a></li>
      <li><a href="http://hackublog.blogspot.com/">photoshop</a></li>
      <li><a href="http://hackublog.blogspot.com/">php</a></li>
      <li><a href="http://hackublog.blogspot.com/">seo</a></li>
      <li><a href="http://hackublog.blogspot.com/">tutorial</a></li>
      <li><a href="http://hackublog.blogspot.com/">usability</a></li>
      <li><a href="http://hackublog.blogspot.com/">wallpaper</a></li>
      <li class="last"><a href="http://hackublog.blogspot.com/">wordpress</a></li>
    </ul> 
  </div>
  <div id="famous">
    <ul>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li class="last">Exclusive RSS Icons from Queness.</li>
    </ul> 
  </div>
  <div id="random">
    <ul>
      <li>50 Monochromatic Website Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>New Smashing Freebies For Designers and Bloggers.</li>
      <li class="last">Food Plates and Creative Dishware Designs.</li>
    </ul>   
  </div>       
</div>
<div class="boxBottom"></div>
</div>


หมายเหตุ หากคุณมีความชำนาญในการแก้ไขแม่แบบก็สามารถวางตำแหน่ง HTML ในขั้นที่ 3 ในตำแหน่งอื่นๆ ก็ได้

เช่น วางก่อนหน้าโค้ด <div id='sidebar'> เป็นต้น

หากมีข้อสงสัย หรือปัญหาในการติดตั้งสามารถขอความช่วยเหลือที่บทความนี้ ในกล่อง Comment ด้านล่างได้เลยครับ

ผมขอจบอีกหนึ่งเทคนิคในการทำบล็อกอีกหนึ่งบทความเพียงเท่านี้ สวัสดีครับ

เครดิตสคริปต์ : Queness.com
Hack and Edit to Blogger : Hackublog

ตอนนี้มีความคิดเห็น : 2 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอถามนิดนึงครับ จะทำอย่างไรให้โพสที่ขึ้นดึงข้อความจากใน blog ครับ หรือตรงแยก catagory ให้ลิงค์กับ tag ที่เราทำไว้ใน blog ครับ

  1. @ คุณ SoftMelody Editor :
    1. ต้องเปลี่ยนวิธีวางโค้ดในขั้นที่ 3 คือ เอาไปวางใน Template ก่อนหน้าโค้ด
    <div id='sidebar'>

    2. แล้วแก้โค้ด (ในขั้นที่ 3)

    <div id="category">
    <ul>
    <li>Category 1</li>
    <li>Category 2</li>
    <li class="last">Category 3</li>
    </ul>
    </div>
    เป็น

    <div id="category">
    <ul>

    <b:section class='catagories' id='catagories1' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Label111' locked='false' title='' type='Label'/>
    </b:section>

    </ul>
    </div>

    ลองดูนะครับติดขัดยังไงลองถามมาอีกทีครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel