วิธีสร้าง Feature Content ใน Blogger ด้วย jQuery

Feature Content

บทความนี้ยังคงนำเสนอ Trick ในการปรับแต่งบล็อกเกอร์ โดยใช้ jQury อีกหนึ่งบทความครับ

ประโยชน์ของการทำ Feature Content จะช่วยให้ผู้อ่านได้เข้าถึงข้อมูลที่น่าสนใจในบล็อกของเราได้ง่ายขึ้น เพราะผู้อ่านบางคนอาจจะแค่หลงทางผ่านมาที่บล็อกของเราโดยบังเอิญ และถ้าพบว่าบล็อกของเรามีสิ่งน่าสนใจ ผู้อ่านก็จะอยู่นานขึ้น และเป็นไปได้ที่จะกลับมาที่บล็อกเราอีก

สำหรับตัวอย่างผลงานจากการสร้าง Feature Content สามารถคลิกดูได้จาก demo ด้านล่างครับ




วิธีติดตั้ง

การติดตั้งผมก็จะแบ่งโค้ดออกเป็น 3 ส่วน ได้แก่ CSS + Java Script + HTML

หากใครที่กลัวเกิดความผิดพลาดก็สามารถ backup แม่แบบเก็บไว้ก่อนครับ >> ดูวิธีที่นี่

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


Feature Content ใน Blogger


ขั้นที่ 1 ค้นหาโค้ด ]]></b:skin> จากนั้นวางโค้ดต่อไปนี้ไว้ก่อนหน้า


/*Feature Content*/

#featured{   
    width:400px;    
    padding-right:250px;    
    position:relative;    
    height:250px;    
    background:#fff;    
    border:5px solid #ccc;    
}    
#featured ul.ui-tabs-nav{    
    position:absolute;    
    top:0; left:400px;    
    list-style:none;    
    padding:0; margin:0;    
    width:250px;    
}    
#featured ul.ui-tabs-nav li{    
    padding:1px 0; padding-left:13px;    
    font-size:12px;    
    color:#666;    
}    
#featured ul.ui-tabs-nav li span{    
    font-size:11px; font-family:Verdana;    
    line-height:18px;    
}    
#featured .ui-tabs-panel{    
    width:400px; height:250px;    
    background:#999; position:relative;    
        overflow:hidden;    
}    
#featured .ui-tabs-hide{    
    display:none;    
}    
#featured li.ui-tabs-nav-item a{/*On Hover Style*/    
    display:block;    
    height:60px;    
    color:#333;  background:#fff;    
    line-height:20px;    
    outline:none;    
}    
#featured li.ui-tabs-nav-item a:hover{    
    background:#f2f2f2;    
}    
#featured li.ui-tabs-selected{ /*Selected tab style*/    
    background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;    
}    
#featured ul.ui-tabs-nav li.ui-tabs-selected a{    
    background:#ccc;    
}    
#featured ul.ui-tabs-nav li img{    
    float:left; margin:2px 5px;    
    background:#fff;    
    padding:2px;    
    border:1px solid #eee;    
}    
#featured .ui-tabs-panel .info{    
    position:absolute;    
    top:180px; left:0;    
    height:70px; width: 400px;/*เท่ากับขนาดรูปทางซ้าย*/    
    background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');    
}    
#featured .info h2{    
    font-size:12px; font-family:Arial,Georgia, serif;/*เปลี่ยน Font*/    
    color:#fff; padding:5px; margin:0;    
    overflow:hidden;    
}    
#featured .info p{    
    margin:0 5px;    
    font-family:Arial,Verdana; font-size:9px;    
    line-height:15px; color:#f0f0f0;    
}    
#featured .info a{    
    text-decoration:none;    
    color:#fff;    
}    
#featured .info a:hover{    
    text-decoration:underline;    
}


ตัวเลขความกว้าง 400 และ ตัวเลขของพื้นที่ทางขวาคือ 250 สามารถปรับเปลี่ยนได้หากได้ผลลัพธ์ไม่พอดีกับ Template


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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>   
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>    
<script type='text/javascript'>     
    $(document).ready(function(){    
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);    
    });    
</script>

เมื่อวางในตำแหน่งดังกล่าวแล้ว บันทึกแม่แบบครับ

( ถ้าไม่ต้องการให้ content แสดงแบบอัตโนมัติก็ปรับ เลข 5000 เป็น 0 ได้ครับ)



ขั้นที่ 3 ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> Add Gadget ชนิด HTML/จาวาสคริปต์

วางโค้ดต่อไปนี้ลงไป

สอนทำบล็อก


<div id="featured" >

<ul class="ui-tabs-nav"><!--ส่วนแรกนี้จะเป็นข้อความและภาพเล็กที่อยู่ทางขวามือ-->

        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img width="80"  src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />
<span>ข้อความย่อที่ 1</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img width="80"  src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />
<span>ข้อความย่อที่ 2</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img width="80"  src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />
<span>ข้อความย่อที่ 3</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img width="80"  src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />
<span>ข้อความย่อที่ 4</span></a></li>    
    
</ul>
    

    <!--ส่วนที่สองเป็นรูปใหญ่ หวัข้อ และคำอธิบายทางซ้ายมือ-->

    <!-- First Content -->    
    <div id="fragment-1" class="ui-tabs-panel" style="">    
        <img width="400" src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />    
        <div class="info" >    
        <h2><a href="#" >หัวข้อที่ 1</a></h2>    
        <p>ข้อความอธิบายที่ 1....<a href="#" >read more</a></p>    
        </div>    
    </div>

    <!-- Second Content -->    
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">    
        <img width="400" src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />    
        <div class="info" >    
        <h2><a href="#" >หัวข้อที่ 2</a></h2>    
        <p>ข้อความอธิบายที่ 2....<a href="#" >read more</a></p>    
        </div>    
    </div>

    <!-- Third Content -->    
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">    
        <img width="400" src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />    
        <div class="info" >    
        <h2><a href="#" >หัวข้อที่ 3</a></h2>    
        <p>ข้อความอธิบายที่ 3....<a href="#" >read more</a></p>    
        </div>    
    </div>

    <!-- Fourth Content -->    
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">    
        <img width="400" src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />    
        <div class="info" >    
        <h2><a href="#" >หัวข้อที่ 4</a></h2>    
        <p>ข้อความอธิบายที่ 4....<a href="#" >read more</a></p>    
        </div>    
    </div>


</div>

ทำการเปลี่ยนรูปภาพในโค้ดสีแดง และใส่ข้อความลงไปตามต้องการลงไปและบันทึก Gadget ก็นับว่าจบขั้นตอนครับ


หมายเหตุ

1. หากท่านใดมีความชำนาญในการแก้ไขแม่แบบ อาจจะวาง HTML ในขั้นที่ 3 ไว้ ต่อจากโค้ด <div id='content-wrapper'> หรือในส่วนที่ต้องการก็ได้

2. ตำแหน่งการวางที่เหมาะสมคือ เหนือกล่องบทความบล็อก (ดูรูป) ดังนั้นเราจะเพิ่ม Gadget ในบริเวณใดก็ได้ แต่ให้ใช้ เมาส์ Drag Gadget มาวางในส่วนที่แสดงในรูปครับ


สอนทำ blogger
หากสมาชิกท่านใดติดตั้งแล้วมีปัญหาในการปรับขนาดให้พอดีกับ Template ฝากข้อความและ Link ของบล็อกไว้ที่กล่องคอมเมนต์ด้านล่างได้เลยครับ ยินดีช่วยเหลือครับ

เครดิต : webdeveloperplus.com
Hack to Blogger by : Hackublog

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

  1. สวยมากครับ ขอเอาไปใช้หน่อยครับ

  1. ผมทำแล้ว ดีมากๆ แรกทำได้ดี พอปรับไปปรับมา เน่าเลย ตรงนี้อ่ะคับ
    ( ถ้าไม่ต้องการให้ content แสดงแบบอัตโนมัติก็ปรับ เลข 5000 เป็น 0 ได้ครับ)

    ผมไม่ได้ปรับอะไรปกติทุกอย่าง ผมทำ แทบเมนูบา ทำเสร็จ มันไม่ แสดงแบบอัตโนมัติ งงเลยคับ

  1. ตอบคุณ Uname997

    ความผิดพลาดที่เกิด มันเกิดจากคำสั่งที่ขัดแย้งกันของ จาวาสคริปต์ครับ คุณต้องเลือกเอาว่าจะติดตั้ง tab หรือ feature Content ครับ

    jQuery ที่อยู่ด้วยกันไม่ได้คือ 1.3.2 กับ 1.2.3 ครับ เลือกเอาว่าจะเอาตัวไหนไว้ครับ

    ป.ล. มันไม่ได้เน่าหรอกครับ ต่อไปก่อนติดตั้ง หรือ อะไรก็ backup แม่แบบเอาไว้ก่อนครับ

  1. มีเรื่องมาขอความช่วยเหลือ (อีกครั้งครับ)แหะๆ
    - คือผมได้ใช้ความรู้ CSS อันน้อยนิดในการปรับ feature เพื่อให้พอดีกับ template ซึ่งขาดอีกนิดหน่อย
    ผลออกมา เละ ครับ เลยจนปัญญา มาขอความช่วยเหลือ
    - ผมอยากให้ feature หายไปเมื่อเข้าสู่หน้าบทความย่อยๆ(อยากให้มี feature ที่หน้า index หน้าเดียว)
    - เว้าซื่อๆ เลยนะครับ คือแบบว่ามันต้องทำยังไงอ่ะครับ
    - ผมกะจะทำ blog ขายของเล็กๆน้อย ยังไงช่วย วิจารณ์หน่อยนะครับ

    http://microwavewatt.blogspot.com

    ขอบพระคุณมากครับ

  1. ไม่มีปัญหาเลยครับ ผมสนใจเรื่องนี้อยู่แล้ว ก็ไม่ถือว่าเป็นการรบกวนเลยครับ

    ลองศึกษาวิธีจากบทความนี้ดูก่อนะครับ หากสงสัยยังไงลองถามาอีกทีได้เลยครับ

    http://hackublog.blogspot.com/2009/11/gadget-sidebar.html

  1. jQuery ผมไม่มี 1.2.3 นะครับแต่มันก็ไม่แสดงอัตโนมัติ

  1. ตอบคุณ Admin

    ช่วยบอกที่ตั้งบล็อกได้ไหมครับ เดี๋ยวผมจะช่วยดูให้ครับ

  1. ต้องการยกมาไว้เหนือกล่้อง บทความบล๊อก ผมต้องนำโค้ดในขั้นตอนที่ 3 ไปวางไว้ตรงไหน เพราะผมลองลากไปวางแล้ว แต่ก็ลากไปไม่ได้ http://cinedevice.blogspot.com

    รบกวนด้วยนะครับผม

  1. ตอบคุณ ป้อม(หนุ่ม)

    ที่จริงแล้วมันควรจะลากได้ครับ

    แต่ถ้าลากไม่ได้จริงๆ ก็ให้ไปที่ แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> สำหรับบล้อกของคุณให้ค้นหาโค้ด <div id='main-wrapper'>

    แล้ววางโค้ดในขั้นที่ 3 ถัดจาก โค้ด <div id='main-wrapper'> ครับ

  1. ได้แล้วครับขอบคุณมาก แต่ยังมีปัญหาอีกคือ มันไปบดบัง เมนู HOME CONTACT ABOUT ME ที่อยู่ด้านบนจนมองไม่เห็น ต้องปรับตรงไหนบ้าง รบกวนอีกทีนะครับผม cinedevice.blogspot.com

  1. สาเหตุที่บังเพราะว่า ตำแหน่งโค้ดไปอยู่ ก่อนโค้ด <div id='main-wrapper'> ก็เลยไปทับตำแหน่งกับ navigation

    วิธีแก้ไข
    ลองแก้ไขที่ CSS โค้ดก่อนนะครับ (ถ้าไม่ได้ก็จะต้องย้ายตำแหน่ง HTML)

    ค้นหาโค้ด

    .navigation {
    padding: 163px 0 0 142px;
    }

    ใน Template แล้วแก้เป็น

    .navigation {
    padding: 163px 0 0 142px;
    magin-bottom:50px;
    }

    โค้ด magin ที่เพิ่มเข้าไปเป็น การเพิ่มช่องว่างด้านล่างของ navigation ครับ

  1. THANK YOU. มากๆเลยนะครับ

  1. ปรึกษาหน่อยครับ ผมติด Feature Content เข้าที่ Block ผม มันก็ใช้ได้ดี แต่พอผมใส่ jQuery s3Slider บน Blogger เพิ่มเข้าไป มันทำให้ Feature Content ไม่สามารถใช้ได้ครับ ไม่ทราบว่าเป็นที่อะไร แล้วจะแก้ยังไง ขอบคุณครับ เว็บผม www.chicrule.co.cc หรือ http://chicrule.blogspot.com

  1. @ NP : แก้ง่ายมากครับ สาเหตุเป็นเพราะเราเรียกใช้ jQuery ซ้ำ เพราะของเดิมเราติดตั้ง 1.3.2 เอาไว้อยู่แล้ว พอเราติดตั้ง 1.4.2 เข้าไปอีกมันก็เลยซ้ำและไม่ทำงาน
    *******
    วิธีแก้ไข
    ******
    ให้แทนที่
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    ด้วย
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

    และในการติดตั้ง S3Slider ก็ไม่ต้องติดตั้ง 1.4.2 ซ้ำอีกเพราะได้ติดตั้งไปแล้ว (ติดตั้งครั้งเดียวแล้วใช้ได้ตลอดครับ)ถ้าทำแบบนี้ปัญหาที่พบจะหายไปครับผม

  1. ขอบคุณมากเลยครับ สำเร็จแล้วครับ ติดตามผลงานอย่างต่อเนื่องครับ

  1. ช่วยหน่อยคร้าาา
    Feature Content มันใช้ไม่ได้อะคะ มันไม่ขยับเรย เลือกรูปก็ไม่ได้ แถมรูปใหญ่หลุดกรอบด้วยอะคะ
    ตั้งค่า ( ถ้าไม่ต้องการให้ content แสดงแบบอัตโนมัติก็ปรับ เลข 5000 เป็น 0 ได้ครับ) แล้วด้วยคะ

    ช่วยหน่อยนะคะ

    ปอลอ บล๊อก มี Draggable & lightbox อยุด้วย แต่ลองลบhttp://ajax.googleapis.com/ajax/libs/jquery/1.3.2> ที่มีซ้ำก็ไม่เกิดอะไรขึ้น

    ช่วยหน่อยนะคะ

  1. @ tee-prang : ช่วยบอก URL ของบล็อกมานิดนะครับ

  1. @ tee-prang : ยังรอคุณบอก URL อยู่นะครับ

  1. ช่วยเเก้ปัญหาหน่อยครับ ทำลูกเล่นนี้บนบล็อกเเล้ว เเต่มันมีปัญหา คือ
    ๑ มันไม่เคลื่อนไหวอัตโนมัติ
    ๒ รูปแบบบนบล็อกเปลี่ยนไป (แบลคอัพเเล้ว)
    ๔ ใส่รูปเเล้วมันไม่ปรากฎรูป
    ๓ ขนาดใหญ่กว่าเลเยอบนบล็อก ปรับเเล้วที่ตัวเลข เเต่มันกลับตละปัด
    ช่วยเเก้ปัญหาหน่อยครับ ดูที่บล็อกของผม http://psuarab.blogspot.com

  1. ถ้าผมจะทำมากกว่า 4 ลิงค์จะทำไงครับ

  1. สวยมากเลยครับขอบคุณมากเลยครับ
    จงเจริญ
    ผลงานคับ
    http://workinformations.blogspot.com/

  1. ขอบคุณครับ สไลด์บล็อคผมทำได้เพราะที่นี้แท้ๆ

    http://pd-creation.blogspot.com/

    ฝากด้วยครับ

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

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

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