รวมวิธีการใช้ Wordpress, Joomla, Drupal, Magento และ SEO » highlight

Plugin Highlight code ใน joomla

snappy — Thu, 29 Apr 2010 14:57:33 +0000

Plugin ตัวนี้จะช่วยให้เราแทรกโค็ดลงในเนื้อหาทำได้ง่ายขึ้น (แทรกคือไม่ให้โค๊ดแสดงผลหรือทำงานเพียงแค่แสดงโค๊ดให้ดูเท่านั้น) คือเมื่อเราต้องแสดงโค็ดออกมาทางเนื้อหาจะมีปุ่มให้กดเพิ่ม และใส่โค็ดลงไป เหมาะสำหรับเว็บไซต์ที่สอนแนวการเขียนเว็บ หรือเขียนโค็ดโปรแกรมคอมพิวเตอร์ต่างๆ การแสดงผลก็ตามรูปครับ

ให้เราทำการติดตั้ง Plugin Highlight code with Jumi มาทำการติดตั้งกันก่อน โดยโหลดมาแล้วให้แตกไฟล์ออกมา จะมี plugin อยู่สองตัวให้ทำการติดตั้งลงไปครับ

จากนั้นไปที่ Extension > Plugin Manager ค้นหา plugin ทั้งสองอันแล้วทำการเปิดการใช้งาน

และกดคลิกที่ Highlight code with Jumi เพื่อเข้าไปทำการตั้งค่าเพิ่มเติม

max-height กำหนดความสูงเยอะสุด
width กำหนดความกว้าง
Codes hidden ให้ซ้อนโค็ดไว้หรือไม่

เมื่อเราทำการเพิ่มบทความจะมีปุ่มเพิ่มโค็ดมาให้ใช้งาน

Link download : http://extensions.joomla.org/extensions/edition/code-display/7475

ทำข่าวสไลด์ใน joomla

snappy — Tue, 20 Apr 2010 19:15:00 +0000

คงเคยเห็นกันบ้างนะครับที่ในเว็บจะมีตัวอักษรวิ่งจากขวาไปซ้ายแสดงข้อความหรือข่าวประกาศในเว็บต่างๆ ซึ่งผมว่ามันดูทำให้เว็บไซต์เรามีลูกเล่นดีนะครับสำหรับ joomla แล้วเรื่องนี้ไม่ยากครับ

ถ้าใครนึกภาพไม่ออกว่าจะเป็นยังไงลองดู ตัวอย่าง ได้ครับ ตัวนี้จะเป็น module มาให้เราใช้งานสามารถโหลดได้จาก http://www.gavick.com/download.html ชื่อ News Highlighter GK1 ครับ

หลังจากเราดาวโหลดมาแล้วให้ทำการติดตั้ง module ตัวนี้ลงไปยัง joomla ของเราแล้วไปที่เมนู Extensions > Module manager แล้วค้นหา Gavick News Highlighter GK1 ครับเพื่อเข้าไปทำการตั้งค่า

ทำการเปิดการใช้งานและเลือกตำแหน่งที่ต้องการแสดงออกมาครับ

ในส่วน Parameters เป็นการปรับแต่งการแสดงผลของ module ตัวนี้ครับ

จากนั้นบันทึกแล้วกลับไปดูผลที่หน้าเว็บครับ

Highlight Author Comments in Drupal

snappy — Fri, 13 Nov 2009 21:07:04 +0000

ผมไปเจอวิธีการเปลี่ยนสีความคิดเห็นของผู้เขียนบทความ ให้มีสีที่แตกต่างจากความคิดเห็นของคนอื่น โดยเป็นการเพิ่ม class เข้าไปที่ความคิดเห็นของผู้เขียน จากนั้นเราก็ใช้ css นการตกแต่งให้มันแตกต่าง….

ให้ดูที่ไฟล์ comment.tpl.php ใน theme ที่เราใช้งาน โดยโค็ดที่เราจะแก้คือ

ให้แก้เป็น

ต่อมาให้เพิ่ม css ด้านล่างลงไปที่ css หลักของ theme

/** Drupal comments **/
.author-comment
{
      background-color: #ff5;
      border: 1px solid #aaa;
}

นี่เป็น css เบื้อต้นเท่านั้นเราสามารถตกแต่งได้ตามสะดวกครับ

via : http://wesleybailey.com/articles/how-to-highlight-author-comments-drupal

เน้นสีข้อความให้กับ category ปัจจุบันใน wordpress

snappy — Mon, 19 Oct 2009 20:32:51 +0000

ผู้อ่านส่วนใหญ่ต้องการรู้ว่าหน้าที่เขาอ่านตอนนี้อยู่ส่วนไหนของเว็บไซต์เรา เพื่อช่วยให้พวกเขาทราบว่าตอนนี้เขาอยู่ตรงไหน เราควรที่จะ Highlight หรือเน้นสีข้อความให้กับ category ที่เขาอยู่นะปัจจุบันนั้นๆ ซึ่งวิธีนี้เป็นวิธีที่ง่ายมากครับ

เมื่อเรากดไปที่ category ไหนแล้ว wordpress จะทำการสร้าง class ที่ชื่อว่า current-cat ใน li ให้เลยอัตโนมัติ ให้เราไปที่ไฟล์ style.css ในไฟล์ theme ของเรา จากนั้นเพิ่ม

#nav .current-cat{
    background:#999;
    color:#222;
    text-decoration:underline;
}

ที่เหลือเราก็ปรับแต่งตามสะดวกเลยครับ

via : http://www.wprecipes.com/how-to-highlight-the-current-category

Plugin : SyntaxHighlighter แสดง code สวยๆบน wordpress

snappy — Mon, 29 Jun 2009 10:57:12 +0000

เป็น plugin ที่ผมตามหามานานแสนนาน สำหรับ plugin ในลักษณะแบบนี้ มันเอาไว้ใช้แสดง code ที่เราจะพิมพ์ออกมาในหน้าบทความเราให้ออกมาในรูปแบบที่ดูง่ายขึ้น มีการไฮไลท์สี และแสดงบรรทัด เหมาะสำหรับบทความที่ต้องการสอนเรื่องในการเขียน code ของภาษาต่างๆ เช่น CSS , PHP , HTML เป็นต้น ซึ่งผมถูกใจมากที่สุด เพราะเป็นปัญหามาโดยตลอดในการเขียนใส่ลงในเนื้อหาเพื่อให้แสดงผลออกมาในรูปแบบ code ให้คนที่เข้าชมเว็บเราสามารถ copy นำไปใช้งานได้เลย

โดยให้เราดาวโหลด SyntaxHighlighter มาทำการติดตั้งบน wordpress ของเราครับ แล้วทำการ Active ตัว plugin ครับ

จากนั้นถ้าต้องการปรับแต่งค่าต่างๆให้ไปที่ Settings >> SyntaxHighlighter

วิธีใช้งานน่ะครับ เขียนเนื้อหาปกติอะครับ แต่ถ้าจะใส่ code ที่จะสอนลงไปก็ตามนี้ครับ

ใส่ code ที่ต้องการ

รูปภาพด้านล่างคือตัวอย่างการแสดงผลออกมาครับ

Link : http://wordpress.org/extend/plugins/syntaxhighlighter/