สร้างหมวดหมู่ให้บทความด้วย Flash Animation

จากที่เคยสอนให้ทำหมวดหมู่ให้บทความด้วยการใช้ป้ายกำกับไปแล้ว วันนี้ผมไปเยี่ยมชม bloggerbuster และก็เลยได้ของฝากเด็ดๆ ที่ชื่อว่า Blogumus  มาให้ลองเอาไปใช้กันครับ

การสร้างหมวดหมู่ให้กับบทความด้วย Blogumus  นี้ยังมีข้อจำกัดอยู่นะครับ คือเราจะต้องตั้งชื่อป้ายกำกับให้เป็นภาษาอังกฤษให้หมด ดังนั้นหากคุณจะทดลองใช้ก็ต้องสร้างป้ายกำกับให้กับบทความเป็นภาษาอังกฤษก่อนนะครับ

 blogumus SEO

สำหรับใครที่ยังนึกภาพไม่ออกสามารถคลิกไปดูตัวอย่างได้ ที่นี่

ขั้นตอนการติดตั้ง

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

ขั้นที่ 2 ค้นหาโค้ด (กด Ctrl + F ช่วยหา)

<b:section class='sidebar' id='sidebar' preferred='yes'>
แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดข้างบน

<b:widget id='Label99' locked='false' title='หมวดหมู่' type='Label'>       
<b:includable id='main'>       
<b:if cond='data:title'>       
<h2><data:title/></h2>       
</b:if>       
<div class='widget-content'>       
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>       
<div id='flashcontent'>Create by <a href='http://hackublog.blogspot.com'>Hackublog</a></div>       
<script type='text/javascript'>       
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;170&quot;, &quot;120&quot;, &quot;7&quot;, &quot;#ffffff&quot;);       
// uncomment next line to enable transparency       
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);       
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);       
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);       
so.addVariable(&quot;distr&quot;, &quot;true&quot;);       
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);       
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);       
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);       
so.write(&quot;flashcontent&quot;);       
</script>       
<b:include name='quickedit'/>       
</div>       
</b:includable>       
</b:widget>

ขั้นที่ 3 ปรับแต่งชื่อ Gadget และขนาดความกว้าง/ยาว ได้ตรงตำแหน่งอักษรสีแดง  และบันทึก

หมายเหตุ หากต้องการเปลี่ยนตำแหน่ง Gadget นี้ก้สามารถทำได้เหมือนการเปลี่ยนตำแหน่ง Gadget อื่นๆ (คือ Drag เมาส์ลากเปลี่ยนตำแหน่งได้เลยครับ)
และในการแสดงผล Flash ไฟล์  Browser ของคุณต้องติดตั้ง Flash player ก่อนนะครับถ้ายังให้ดาวน์โหลดไปติดตั้งจากด้านล่างนี้ได้เลยครับ
Flash Player 10.0.32.18 (IE)
Flash Player 10.0.32.18 (Non-IE)

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

  1. ช่วยประหยัดเนื้อที่แกดเจดได้เยอะเลยครับ แต่สำหรับผมมีแท็กนิดเดียว ลองใช้แบบ Animation แล้วก็เก๋ไปอีกแบบ

    ลองแบบ tag cloud แล้ว ไม่ค่อยเหมาะกับป้ายกำกับน้อยๆเลยครับ แปลกๆไงไม่รู้

  1. @ ภัทรพงษ์ : ผมไปดูผลงานแล้ว เยี่ยมเลยครับ

    แต่ผมก็ยังเสียดายที่ Trick นี้ใช้กับภาษาไทยไม่ได้ ถ้ามี Hack ไทยเมื่อไหร่ก็จะนำมาเสนอให้อีกทีครับ

  1. หวัดดีคับ โคตนี้ใส่แล้วไม่เห็น

  1. ตอบคุณ nyana

    คุณต้องติดป้ายกำกับให้กับบทความก่อนครับ และใช้ชื่อป้ายกำกับเป็นภาษาอังกฤษด้วยครับผม

  1. ผมติดป้ายกำกับเเล้วเเต่ โค้ตที่ให้หามาหาไม่เจอ เพราะอาไรหรอคับ

  1. แจ้งทุกท่านทราบว่า Gadget นี้มีปัญหาครับ ใช้งานไม่ได้มา 3 เดือนแล้ว ลองใช้รูปแบบอื่น ๆ แทนไปก่อนครับ
    http://www.hackublog.com/2010/06/10-trick-for-customization-label-gadget.html

  1. หาโค้ดในขั้นที่ 2 ไม่เจอค่ะ ถ้าเกี่ยวกับ sidebarจะมีโค้ดประมาณนี้ค่ะ
    <macro:include id='main-column-left-sections' name='sections'>
    <macro:param default='0' name='num' value='1'/>
    <macro:param default='sidebar-left' name='idPrefix'/>
    <macro:param default='sidebar' name='class'/>
    <macro:param default='true' name='includeBottom'/>
    </macro:include>
    </aside>
    </div>
    </div>

    <div class='column-right-outer'>
    <div class='column-right-inner'>
    <aside>
    <macro:include id='main-column-right-sections' name='sections'>
    <macro:param default='2' name='num' value='1'/>
    <macro:param default='sidebar-right' name='idPrefix'/>
    <macro:param default='sidebar' name='class'/>
    <macro:param default='true' name='includeBottom'/>

    แล้วก็

    <Group description="Gadgets" selector=".sidebar .widget">
    <Variable name="widget.title.font" description="Title Font" type="font"
    default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
    <Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#333333"/>
    </Group>

  1. คุณจอยไม่ต้องทำแล้ววิธีนี้ http://halotemplates.s3.amazonaws.com ได้ลบเฟลชไฟล์ออกไปแล้วครับ

  1. ขอบคุณค่ะ แต่น่าเสียดายจัง เห็นช้าไปหน่อย

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

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

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