Dynamic-FX : Side Menu แบบ ซ่อน/แสดง

Dynamic-FX Slide-In Menu
เมนูชนิดนี้มีชื่อว่า “Dynamic-FX Slide-In Menu (V6.5)” พัฒนาโดย Dynamicdrive.com ซึ่ง บรรดา bloghacker ก็พยายามจะ Hack มาใช้กับ blogger แต่ก็ยังมีขั้นตอนยุ่งยากในการแก้ไขและติดตั้ง

บทความนี้ผมจึงเสนอ New Hack ที่จะทำให้ติดตั้งเมนูชนิดนี้ลงใน blogger ได้ง่ายขึ้น
ก่อนจะตัดสินใจติดตั้งก็ลองไปชมตัวอย่างที่บล็อกแห่งนี้กันก่อนครับ ถ้าชอบก็ตัดสินใจติดตั้งกันเลยครับ


วิธีติดตั้งไม่ยุ่งยากครับ

ไปที่แผงควบคุม >> รูปแบบ >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์

side Menu 
วางโค้ดต่อไปนี้ลงไปแล้วบันทึกก็เป็นอันจบขั้นตอน


<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>
<script src= 'http://hackublog.googlecode.com/files/ssm.js' language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</script>
<script type="text/javascript">
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#540000";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="verdana";
linkFontSize="2";
linkFontColor="#540000";
linkBGColor="white";
linkOverBGColor="#E2C2C2";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <img> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Socail website"] //create header
ssmItems[1]=["Google", "http://www.google.co.th", ""]
ssmItems[2]=["Twitter", "http://twitter.com",""]
ssmItems[3]=["Facebook", "http://www.Facebook.com", ""]
ssmItems[4]=["Hi 5", "http://www.hi5.com", "_new"]
ssmItems[5]=["Youtube", "http://www.youtube.com", ""]
ssmItems[6]=["My Twitter", "http://twitter.com/Nuthawud", ""]

ssmItems[7]=["FAQ", "http://docs.google.com", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://www.gmail.com", "",1]

ssmItems[9]=["My Feeds", "", ""] //create header
ssmItems[10]=["Posts RSS", "http://feeds.feedburner.com/Hackublog", ""]
ssmItems[11]=["Comments RSS", "http://feeds.feedburner.com/blogspot/XrMZ", ""]
ssmItems[12]=["Hackublog Contents", "http://hackublog.blogspot.com/2009/01/blog-post.html", ""]
buildMenu();
</script>



ถ้าต้องการเปลี่ยนแปลง Link ก็สามารถแก้ไขได้ที่โค้ด สีเขียว และ สีแดง ตามต้องการครับ

- โดยข้อความสีเขียวจะเป็นข้อความที่จะแสดงในเมนู
- ส่วนข้อความสีแดงคือ URL ของ Link ที่คุณต้องการเชื่อมโยงครับ

สุดท้ายหากมีข้อสงสัยใดก็สอบถามได้ที่กล่อง Comment ด้านล่างนะครับ และผมก็ขอจบบทความสั้นๆ เพียงเท่านี้ครับ

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

  1. ทำไมของผม มันไม่ชิดขอบจอครับ
    มันห่างจากขอบด้านข้างออกมาประมาณ 1 cm. ( ขณะยังไม่ Slide นะครับ )
    แต่ทุกอย่างก็ทำงานปกติ

  1. เป็นเพราะว่า CSS ใน Template ของคุณมีการกำหนด CSS ในส่วน body เอาไว้ครับ

    โค้ดที่ว่าก็คือโค้ดด้านล่างนี้ครับ

    #wrap {
    background: #EEE;
    width: 960px;
    margin: 10px auto 10px;
    .
    .
    .

  1. ของผมทำไมมันอยู่ได้ไม่กี่วิมันก็หายไปแล้วอ่ะครับ งงจังเลย
    http://icute2010.blogspot.com/

  1. ตอบคุณ iCute

    1. ไม่ทราบว่าวางโค้ดด้วยวิธีใดครับ และวางไว้ตำแหน่งใด

    2. ลองปรับค่าโค้ดจาก XOffset=0; เป็น XOffset=20; หรือ XOffset=50; (เป็นค่าตำแหน่งตามแนวแกน x )
    เผื่อว่ามันอาจจะถูกซ่อนอยู่ครับ

    3. ไม่ได้ยังไงลองถามมาอีกทีนะครับ ผมก็แปลกใจเหมือนกัน มันหายไปไหน?

  1. 1.วางลงในแกตเจตครับ
    2.ลองปรับดูแล้วก็ยังหายอยู่ดีครับ

    ถ้าหากเกิดจาก tab wibiya ละก็ผมลองเอาแท็กคอมเม้น ปิดแล้ว slide menu ก็ยังหายอยู่ดี

    มันเกิดจากอะไรหรอครับ

  1. 1. อาจเกิดจาก script
    2. อาจเกิดจากแม่แบบที่คุณใช้
    3. ไม่เกี่ยวกับ wibiya ครับ

    <script src="http://kangrohman.googlepages.com/ssm.js" language="JavaScript1.2">
    //Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
    //Updated July 8th, 03' for doctype bug
    //For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
    </script>

    ด้วย

    <script src= 'http://hackublog.googlecode.com/files/ssm.js' type="text/javascript"/>

  1. รบกวนถามนิดนึงครับ ทำไมเปิดใน firefox กับ google chrome เปิดได้และมองเห็น แต่เปิดใน IE ดันมองไม่เห็นครับ แก้ไงดีครับ ขอรบกวนหน่อยนะครับ

  1. @ เทพฤทธิ์
    ถ้าหมายถึงบล็อก http://www.dreamsprotector.com/ มองเห็นใน IE ได้ปกตินะครับ

  1. @ADMIN 4ALLขอบคุณครับ แต่ทำไมผมมองไม่เห็น Dynamic-FX Slide-In Menu แบบซ่อน/แสดง ใน IE ของบล็อก http://www.dreamsprotector.com/ ครับ แต่ใน firefox กับ google chrome มองเห็น( Dynamic-FX Slide-In Menu แบบซ่อน/แสดง ) หรือว่าคอมฯผมไป set ค่าอะไรไว้หรือป่าวนะ

  1. @ คุณเทพฤทธิ์
    ที่ Dynamic-FX Slide-In Menu ไม่เห็นใน IE เพราะว่า Template ที่ใช้เป็น Template ที่ตั้งค่าความกว้างไม่เต็มจอครับ แนะนำให้ปรับความกว้างของแม่แบบ

    โดยศึกษาจากบทความนี้ครับ http://hackublog.blogspot.com/2010/04/2-template-blogger.html

  1. โห ขอบคุณมากๆ ครับ ชอบไอ้เจ้าตัวนี้นะ อิอิ

  1. จะเอาไวในโค๊ดของ html ผมใส่ไปแล้วมันไม่ต้องทำอย่างไรครับ

  1. จะเอาไวในโค๊ดของ html ผมใส่ไปแล้วมันไม่ต้องทำอย่างไรครับ

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

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

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