ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ

คงมีหลาย ๆ คนที่อยากมีเว็บเป็นของตัวเอง แต่ก็กลัวที่จะเสียเงินไปแล้วไม่คุ้มค่ากับสิ่งที่ได้มา ถ้าแบบนั้นลองมีเว็บของตัวเองแบบฟรี ๆ ที่ WordPress.com ดิ

WordPress.com มีอะไรให้เราบ้าง

มาดูกันนะครับ ว่าทำเว็บฟรีที่ WordPress.com นั้นมีอะไรให้เราบ้าง

  • Domain name ที่เราสามารถตั้งเองได้ แต่ต้องอยู่ภายใต้ wordpress.com เช่น rabbitinblack.wordpress.com หรือ snsd.wordpress.com อะไรแบบนั้น
  • Theme มากมายให้เราเลือกใช้งาน
  • พื้นที่ 3 GB ในการใช้งาน
  • มีการเก็บข้อมูลผู้เข้าชมเว็บให้ และแสดงข้อมูลให้เราดูเข้าใจง่าย
  • ได้เว็บทันที หลังสมัครใช้งาน

แต่เนื่องจากเป็นของฟรี เราก็ต้องเข้าใจถึงข้อจำกัดต่าง ๆ ที่เราไม่สามารถใช้งานได้ หรืออะไรที่เว็บที่ทำด้วย WordPress ทำได้ แต่เว็บฟรีใน wordpress.com ทำไม่ได้

ข้อจำกัดของ WordPress.com

ข้อจำกัดหลัก ๆ ที่น่าจะรู้ไว้ในการทำเว็บฟรีที่ WordPress.com นั้นก็คือ

  • ไม่สามารถลง Theme เพิ่มได้จากที่ WordPress.com มีให้ใช้ (แต่ที่มีให้ก็เยอะพอสมควรแล้ว แค่อาจจะยังไม่ถูกใจเรา)
  • ไม่สามารถเปลี่ยน Layout ของ Theme ที่ใช้ได้
  • ลง Plugin เพิ่มไม่ได้ ใช้ได้เพียง Plugin ที่ทาง WordPress.com กำหนดไว้ให้

แต่ข้อจำกัดบางอย่าง ก็แก้ไขได้ด้วยเงินครับ 555

WordPress.com เองก็มีให้เราจ่ายเงินเพื่อเปิดใช้งานในส่วนที่ถูกจำกัดไว้ เป็นราคารายปีแล้วแต่ส่วนที่เราต้องการใช้งาน

เริ่มต้นสมัคร WordPress.com

ไปที่เว็บ WordPress.com เลยครับ

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [1]

หลังจากที่เราคลิ๊ก Sign Up แล้ว จะเป็นหน้าให้เราสมัคร WordPress.com กรอกข้อมูลต่าง ๆ ของเรา

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [2]

โดยข้อมูลที่เราต้องกรอกก็มีดังนี้

  • Blog Address : URL ของเว็บเรานั่นละ จะตามด้วย .wordpress.com หรือจะเลือกอย่างอื่นก็ได้ แต่ต้องเสียเงิน
  • Username : ชื่อที่ใช้ในการเข้าใช้งาน
  • Password : Password ที่จะใช้คู่กับ Username เพื่อเข้าใช้งาน
  • E-mail Address : ให้ใช้ E-mail ที่มีการใช้งานจริง เพราะทาง WordPress.com จะส่งเมลไปเพื่อให้เรายืนยันการใช้งาน
  • What language will you be blogging in ? : คือเว็บที่เราจะทำ จะทำเป็นภาษาอะไร

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [3]

เลือก Create Blog เพื่อสมัคร หรือจะ Upgrade ซึ่งจะเสียเงิน แต่มีคุณสมบัติเพิ่มขึ้น หลังจากนั้นจะพบข้อความนี้ ให้ไปเช็คเมลที่เราใช้สมัครไว้

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [4]

ในส่วนด้านล่างให้เรากรอกข้อมูลของเราลงไปครับ

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [6]

เนื้อหาของอีเมลจะประมาณแบบนี้ครับ

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [5]

และแล้วก็ได้เว็บฟรี ๆ เป็นของเราเองแล้ว

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [7]

ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [8]

ถ้ากลัวว่า WordPress จะใช้งานยาก ลองศึกษาการใช้งานได้นะครับ แต่มันก็ฟรีอยู่แล้ว ดังนั้นลองใช้ก่อนก็ได้ไม่เสียหายอะไรนะครับ ^^

บทความสอน วิธีใช้ WordPress

อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

ใน iTunes นั้นจะมีส่วนของ Podcasts ซึ่งมีหลายเรื่องที่เราสนใจไว้ให้ได้ดู ได้ฟังแบบฟรีบ้าง เสียเงินบ้าง แต่เรามาหาแบบฟรีกันดีกว่า ลองไปดูว่ามีอันไหนบ้าง

Think Vitamin Radio

View in iTunes : Think Vitamin Radio

Web Designer Podcast

View in iTunes : Web Designer Podcast

Web Design TV

View in iTunes : Web Design TV

Sitepoint

View in iTunes : Sitepoint

This Week in Photography

View in iTunes : This Week in Photography

Web Design Tuts+

View in iTunes : Web Design Tuts+

Photoshop Webdesign.de

View in iTunes : Photoshop Webdesign.de

WebDevDesign

View in iTunes : WebDevDesign

Freelance Radio

View in iTunes : Freelance Radio

Mac Tips and Tricks

View in iTunes : Mac Tips and Tricks

MailChimp Academy

View in iTunes : MailChimp Academy

37signals Podcast

View in iTunes : 37signals Podcast

AppClinic – graphic design tutorials

View in iTunes : AppClinic – graphic design tutorials

Founders Talk

View in iTunes : Founders Talk

Web Design 101

View in iTunes : Web Design 101

CreativeXpert Design Interviews

View in iTunes : CreativeXpert Design Interviews

Voices of Design

View in iTunes : Voices of Design

Xcode Quick Tips

View in iTunes : Xcode Quick Tips

jQuery for Designers

View in iTunes : jQuery for Designers

Facebook 101

View in iTunes : Facebook 101

CSS-Tricks Screencast

View in iTunes : CSS-Tricks Screencast

Pragmatic Podcasts

View in iTunes : Pragmatic Podcasts

CSS : แต่งกล่อง Facebook Like Box กัน

เพิ่งไปเจอมา เลยเอามาเขียนไว้เผื่อใครยังไม่รู้ จริง ๆ แล้วเราสามารถกำหนด Stylesheet ให้กับตัว Facebook Like Box ได้นะครับ

[html]
<div class="sidefb">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="ใส่ id จาก facebook" stream="0" connections="8" logobar="0" width="ใส่ความกว้าง" height="ใส่ความสูง" css="ใส่ css ลงไป?1" rel="stylesheet" type="text/css"></fb:fan>
</div><!– .sidefb –>
[/html]

ตรง css= อย่าลืมใส่ ?1 และเปลี่ยนเป็น 2, 3, 4, … ทุกครั้งที่ทำการเปลี่ยนค่า css ในส่วนที่เราจะแต่ง Facebook Like Box ด้วยนะครับ อย่างเช่น ทำครั้งแรกก็ใส่เป็น css="stylesheet.css?1"

ผมก็เอามาประยุกต์ใช้กับ sidebar ด้านขวาของผมเหมือนกัน ใน Code ของ Theme WordPress ผมใส่แบบนี้ครับ

[php]
<div class="sidefb">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="235867876471637" stream="0" connections="8" logobar="0" width="237" height="225" css="<?php bloginfo(‘stylesheet_url’); ?>?1" rel="stylesheet" type="text/css"></fb:fan>
</div>
<div class="sidetw">
<a href="https://twitter.com/Rabbitinblack" class="twitter-follow-button">Follow @Rabbitinblack</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="http://www.rabbitinblack.com"></div><span>Recommend on Google</span>
</div>
[/php]

ส่วน CSS ของผมก็เป็นแบบนี้ครับ

[css]
.fan_box .full_widget {padding:10px 3px 20px 3px !important;border:0 none !important;position:relative;}
.fan_box .connect_top{background: none !important;padding: 0 !important;}
.fan_box .profileimage, .fan_box .name_block{display: none;}
.fan_box .connect_action{ padding: 0 !important; }
.fan_box .connections{ padding: 0 !important;border: 0 !important;font-family: Roboto, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #666; }
.fan_box span.total{ color: #FF4F92;font-weight: bold; }
.fan_box .connections .connections_grid {margin-right:-10px;padding-top: 10px !important; }
.fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; }
.fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #666 !important;padding-top: 1px !important;}
.fan_box .connect_widget{ position: absolute;bottom:0px;left:0px;margin: 0 !important; }
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; }

.sidefb {position:relative;font-size: .85em;color: black;padding:0 9px;line-height: 1px;border:1px solid #DDD;}
.sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg {background-color: #EEF9FD; font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}
[/css]

ผลลัพธ์ที่ได้ มีลักษณะแบบนี้ครับ

CSS : แต่งกล่อง  Facebook Like Box กัน
ลองปรับกันดูนะครับ

ลองเอาไปปรับแต่งกันดูนะครับทุกคน >_<

[Infographic] Sharing Trends

เนื่องด้วย AddThis ครบรอบ 5 ปี ทาง AddThis เลยทำ Infographic จากข้อมูลที่ทาง AddThis รวบรวมไว้ เกี่ยวกับลักษณะนิสัยการแชร์ของคน อย่างเช่น ไม่ว่าจะเป็นเวลาใดที่คนเราชอบแชร์กัน หรือคนเข้าดูเยอะที่สุดหลังจากแชร์ข้อมูลไปนานเท่าไหร่ เป็นต้น

Sharing Trends