Related Posts พร้อมรูปภาพในรูปแบบ Marquee style

Written By Aucharaporn Theemcle on วันอังคารที่ 25 ตุลาคม พ.ศ. 2554 | 07:25

    ดิฉันเองเคยนำเสนอไปในบทความ           และ   แต่คราวนี้ผ่านไปเจออีกรูปแบบ  เป็น related posts ที่มีรูปภาพพร้อมการเคลื่่อนไหว เลื่อนไปเลื่อนมา    ทดสอบลองเอามาปรับแต่งที่ ชวนเพื่อนเขียนบล็อก   มอง ๆ ดุแล้วก็เข้าทีดีแฮะ  เพื่อนคนไหนอยากทดลองเอาไปใช้บ้างไหม  คะ  ถ้าต้องการทดลองเอาไปปรับแต่งเวบบล็อก Relatd posts แบบมีรูปภาพพร้อมเคลื่อนไหวได้ แบบนี้หล่ะก็  ตามมาทางนี้ค่ะ
    image
        ขั้นตอนแรก Login เข้า blogger ที่หน้าการปรับแต่ง >แก้ไข html > ติ๊กเครื่องหมายถูกหน้า แล้วให้ค้นหาโค้ด </head> เมื่อหาเจอให้นำโค้ดด้านล่างนี้วางไว้ก่อน </head>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
        #related-posts {
        float:center;
        text-transform:none;
        height:100%;
        min-height:100%;
        padding-top:5px;
        padding-left:5px;
        background-color:#003399;
        }
        #related-posts a{
        color:#FFFFCC;
        }
        #related-posts a:hover{
        color:#000000;
        }
        #related-posts a:hover {
        background-color:#C8E6E1;
        }
        </style>
        <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
        </b:if>

                ขั้นตอนที่สองในการปรับแต่งบล็อกด้วย Related posts คือหา code ต่อไปนี้้

                <div class='post-footer-line post-footer-line-1'>

                โดยการคลิ๊ก crtl+f  เมื่อหาเจอแล้วให้ copy โค้ดด่างล่างนี้ไปวางไว้ต่อจาก code ดังกล่าว

                <!-- Marquee Start-->
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <div id='related-posts'>
                <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast != &quot;true&quot;'>
                </b:if>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=15&quot;' type='text/javascript'/></b:if></b:loop>
                <div style='text-align: left; font-weight: bold;'><span style='font-size:130%;'>Related Topics</span></div>
                <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
                <script type='text/javascript'>
                var currentposturl=&quot;<data:post.url/>&quot;;
                var maxresults=7;
                var relatedpoststitle=&quot;&quot;;
                removeRelatedDuplicates_thumbs();
                printRelatedLabels_thumbs();
                </script></marquee>
                </div><div style='clear:both'/>
                </b:if>
                <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
                <Script Language='Javascript'>
                <!--
                document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%62%6C%6F%67%67%65%72%3C%2F%61%3E%20%7C%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%6E%65%74%77%6F%72%6B%3C%2F%61%3E'));
                //-->
                </Script>
                </b:if>
                </b:if>
                <!-- Marquee End-->

                ขั้นตอนสุดท้าย ปรับแต่งการแสดงผลสักนิด ให้เหมาะกับบล็อกของเรา 

                background-color:#003399;
                }
                #related-posts a{
                color:#FFFFCC;
                }
                #related-posts a:hover{
                color:#000000;
                }
                #related-posts a:hover {
                background-color:#C8E6E1;
                }

                code ตัวเลขสีเขียว ๆ  ตรงนี้ให้เพื่อน ๆ เลือกเปลี่ยนสีเอาเองนะคะ โดยเปลี่ยน code สี   ลองใช้ตัวช่วย แก้ปัญหาสี ในเวบบล็อกกันดูค่ะ

                var maxresults=7;

                ตรงนี้เปลี่ยนตัวเลขการแสดงผลค่ะ ว่าจะให้ related post แสดงผลกี่บทความ  อาจจะให้แสดงผลเป็น 7 หรือ 6 ก็แล้วแต่พอเหมาะ

                ทดลองนำไปปรับแต่งกันดูนะคะ 

                ขอบคุณข้อมูลจาก  free-7blog

                3 comments:

                Sun_pharma กล่าวว่า...

                ยอดเยี่ยมเลยครับ ^^ คุณ meesubandmeesuk

                ผมทำตามคุณแล้ว ดูตัวอย่างที่นี่ครับ ^^ สุนทรพจ สตีฟ จ็อบส์

                แต่ไม่สามารถปรับสีได้ เนื่องจากเข้าไปตามลิ๊งแล้ว แต่เจ้าของคงลบโปรแกรมไปแล้ว - -" สามารถปรับโค๊ดสีที่ไหนได้อีกบ้าง ?

                ขอบคุณมากครับ ที่อัพเดทสิ่งดีๆมาให้อ่านเสมอ :D

                Sun_pharma กล่าวว่า...

                ไม่เป็นไรละก๊าบบ คุณ meesubandmeesuk

                พอดีไปถามอาจารย์กูเกิ้ลมา เค้าเลยแนะนำให้ ^^

                ขอบคุณอีกครั้งกั๊บป๋ม ;;)

                meesubandmeesuk กล่าวว่า...

                ขอบคุณนะคะคุณ Sun_pharma เห็นทีต้องแก้ไขบทความสักหน่อยค่ะ จะได้เป็นประโยชน์กับเพื่อนท่านอื่นด้วย

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