วิธีสร้าง Animate Hover บน Blogger ด้วย jQuery

หลังจากที่เสนอบทความเกี่ยวกับการโปรโมทบล็อก อยู่นานก็เล่นเอาเหนื่อยเลยทีเดียวครับ ตอนนี้ผมโปรโมทไปโปรโมทมาเพื่อที่จะสอนคนอื่น ๆ กลับกลายเป็นว่าผมโดนข้อหา Spam จาก Google และอันดับการค้นหาก็ตกลง ๆ ไปด้วย เหนื่อยใจจริงๆ ครับ

สอนทำบล็อก

มาเข้าเรื่องเลยดีกว่าครับ บทความนี้ผมก็จะนำเสนอเทคนิคการสร้าง Image Hover รูปแบบใหม่โดยใช้ jQuery ซึ่งถ้าหากใครกำลังเขียนบล็อกเกี่ยวกับการขายสินค้าอยู่ ผมคิดว่าเทคนิคนี้น่าจะเป็นประโยชน์อย่างยิ่ง

สำหรับตัวอย่างผลงานสามารถเลือกชมได้จาดลิงค์ด้านล่าง


ขั้นตอนการติดตั้ง
ก่อนติดตั้งหากคุณกลัวความผิดพลาดจะเกิดขึ้นให้ Backup แม่แบบเอาไว้ก่อน

เสร็จแล้วให้ Login เข้าไปที่ Blogger
ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ

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

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

ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; }
        ul.hover_block li, ul.hover_block2 li {
            list-style:none;
            float:left;
            background: #fff;
            padding: 10px;
            width:250px; position: relative;
            margin-right: 20px; }
        ul.hover_block li a, ul.hover_block2 li a {
            display: block;
            position: relative;
            overflow: hidden;
            word-wrap: break-word; /*IE hack by Hackublog*/
            height: 165px;
            width: 235px;
            padding: 16px;
            color: #000;
            font: 1.6em/1.3 Helvetica, Arial, sans-serif;
        }
        ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; }
        ul.hover_block li img, ul.hover_block2 li img {
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
        }



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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
        $(function() {
            $(&#39;ul.hover_block li&#39;).hover(function(){
                $(this).find(&#39;img&#39;).animate({top:&#39;210px&#39;},{queue:false,duration:500});
            }, function(){
                $(this).find(&#39;img&#39;).animate({top:&#39;0px&#39;},{queue:false,duration:500});
            });
            $(&#39;ul.hover_block2 li&#39;).hover(function(){
                $(this).find(&#39;img&#39;).animate({left:&#39;280px&#39;},{queue:false,duration:500});
            }, function(){
                $(this).find(&#39;img&#39;).animate({left:&#39;0px&#39;},{queue:false,duration:500});
            });
        });
        </script>


เมื่อวางโค้ดในขั้นที่ 1 และ 2 แล้วให้บันทึกแม่แบบครับ


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

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

กรณีต้องการติดตั้งเพียง 1 ภาพใช้โค้ด

<ul class="hover_block">
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>
</ul>


กรณีต้องการติดตั้ง 2 ภาพใช้โค้ด

<ul class="hover_block">
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180"/>ใส่ข้อความ</a></li>
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>
</ul>



กรณีต้องการติดตั้ง 4 ภาพใช้โค้ด

<ul class="hover_block">
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>

<ul class="hover_block2">
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>
            <li><a href="/"><img src="URL ของภาพ" alt="alt" width="250" height="180" />ใส่ข้อความ</a></li>
</ul>



โค้ดตัวอย่างที่ผมใช้ใน DEMO

<ul class="hover_block">
        <li><a href="http://hackublog.blogspot.com/"><img src="http://upic.me/i/p4/1200291488_06.jpg" alt="Hackublog" width="250" height="180" /> WELCOME TO HACKUBLOG.BLOGSPOT.COM</a></li>
        <li><a href="http://hackublog.blogspot.com/"><img src="http://upic.me/i/28/9724_3d_digital_5.jpg" width="250" height="180" /alt="Hackublog" /> DO YOU LIKE MY TIPS?</a></li>
</ul>

<ul class="hover_block2">
        <li><a href="http://hackublog.blogspot.com/"><img src="http://upic.me/i/pj/22_08_2007.jpg" width="250" height="180" / alt="Hackublog" /> สินค้าขายดี สนใจโทรติดต่อ 02-0000000</a></li>
        <li><a href="http://hackublog.blogspot.com/"><img src="http://upic.me/i/oa/animatehoverusingjquery.jpg" width="250" height="180" / alt="Hackublog" />สั่งสินค้าและแจ้งการโอนเงินที่ hackublog@gmail.com </a></li>
</ul>



หมายเหตุ ตัวเลขความกว้างและความสูงสามารถปรับแต่งได้ตาม Template ที่คุณใช้ โดย

1. ตัวเลขสีเดียวกันต้องแก้ให้สัมพันธ์กัน
2. ตัวเลขสีน้ำเงินจะต้องน้อยกว่าสีแดง
3. ตัวเลขสีเขียวตั้งค่าให้มากกว่าตัวเลขสีแดง
4. หากต้องการให้ตำแหน่งการวางอยู่ในตำแหน่งเดียวกับ DEMO ก็ให้ลาก (drag) Gadget ที่เราเพิ่มในขั้นที่ 3 ไปยังตำแหน่งเหนือกล่องบทความ (ดูรูป)

สอนทำิิblogger


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

เครดิต Script : incg.nl
Hack to blogger : Hackublog

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

  1. ทำบล็อกขายสินค้า แล้วสินค้า 1 ชิ้นมีหลายรูปหลายมุมมอง หากเราต้องการใส่รูปเป็นหลักไว้ก่อน 1 รูป เพื่อไม่ให้เปลืองเนื้อที่ในโพสท์นั้น แล้วสามารถคลิกที่รูปหรืออาจจะมีลิ้งค์ view larger image เพื่อดูรูปสินค้าให้ใหญ่ขึ้นและมีรูปมุมมองอื่นเพื่อดูเพิ่มเติมด้วย ทำอย่างไรได้บ้าง

  1. @ k_thaipepper :
    ใช้วิธีในบทความนี้ครับ http://www.hackublog.com/2010/03/lightbox-image-viewer-blogger.html แต่จะส่งผลให้ gadget ผู้ติดตามไม่ทำงานนะครับ ต้องบอกกันก่อน

  1. ช่วยอธิบายตัวเลขแต่ละสี ว่า คือขนาดของอะไรได้มั้ยครับ จะเอามาปรับให้เข้ากับขนาดรูปอะครับ ทำออกมามันไม่พอดีอะคับ ถามอีเรื่องนึงคับ ผมสามารถเอาไฟล์ภาพเคลื่อน.gif ลงblogได้มั้ยคับ

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

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

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