VIEW DEMO

เรามาติดตั่ง Dropdown Menu สวย ๆด้วย css3 ซื้ออาศัยการทำงานของ css3 เท่านั้นเราก็ได้เมนูสวย ๆมาแล้ว เมนูแบบ Dropdown Menu บางครั้งไม่จำเป็นต้องใช้ jQuery เรามีวิธีสร้าง เมนูแบบ Dropdown Menu โดยใช้ css3 ใช้ได้กับเบราว์เชอร์ที่ ทันสมัยทั้งหมดและสนับสนุน css3

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

ขั้นตอนที่ 1 การติดตั้ง CSS3

เข้าไปที่บล็อก > แม่แบบ > แก้ใข html > ดำเนินการ > ข้นหาโค้ด ]]></b:skin> โดยกด Ctrl+f  > แล้ววางโค้ดด้านล่างต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


/* LINK TRANSITION */
a {
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
/* MENU STYLE */
header {
width:100%;
}
header #top {
background:#222;
float:left;
height:30px;
line-height:30px;
width:100%;
}
header nav#topmenu {
margin:0 auto;
padding:0 15px;
position:relative;
width:960px;
}
header nav#topmenu ul {
margin:0
padding:0;
}
header nav#topmenu ul li {
float:left;
position:relative;
font-size:10px;
list-style:none;
margin:0;
padding:0;
width:90px;
text-align:center;
text-transform:uppercase;
border-right:1px solid #ccc;
}
header nav#topmenu ul li:first-child {
border-left:1px solid #ccc;
}
header nav#topmenu ul li a {
color:rgba(255,255,255,0.6);
text-decoration:none;
display:block;
}
header nav#topmenu ul li a:hover {
color:#fff;
}
header nav#topmenu ul li:hover &amp;gt; a { /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */
color:#fff;
}
header nav#topmenu ul li span {
background:url(arrow.png) center no-repeat;
height:10px;
position:absolute;
text-indent:-9999px;
top:10px;
right:5px;
width:10px;
}
header nav#topmenu ul li span.arrow {
background-position:0 2px;
}
header nav#topmenu ul li span.arrow-right {
background-position:-10px 2px;
}
header nav#topmenu ul li ul.sublist { /* FIRST SUB-MENU STYLE */
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:0px;
top:31px;
background:#222;
width:90px;
opacity:0;
visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */

/* CSS3 Multiple Transitions */

-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
header nav#topmenu ul li ul.sublist li {
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin-top:-15px;
padding:0;
width:90px;
-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

header nav#topmenu ul li ul.sublist li a {
color:rgba(255,255,255,0);
}
header nav#topmenu ul li:hover ul.sublist {
opacity:1;
visibility:visible;
}
header nav#topmenu ul li:hover ul.sublist li {
margin-top:0;
opacity:1;
}
header nav#topmenu ul li:hover ul.sublist li a {
color:rgba(255,255,255,0.6);
-moz-transition:color 0.1s ease-out;
-webkit-transition:color 0.1s ease-out;
-o-transition:color 0.1s ease-out;
transition:color 0.1s ease-out;
}
header nav#topmenu ul li:hover ul.sublist li a:hover {
color:rgba(255,255,255,1);
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
header nav#topmenu ul li:hover ul.sublist li:hover &amp;gt; a {
/* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */
color:#fff;
}
/* SUB-MENU SUB STYLE */
header nav#topmenu ul li ul.sublist li ul.subsublist {
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:61px;
top:0px;
background:#222;
width:90px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
header nav#topmenu ul li ul.sublist li ul.subsublist li{
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin:0;
padding:0;
width:90px;
opacity:1;
}
header nav#topmenu ul li ul.sublist li:hover ul.subsublist {
opacity:1;
left:91px;
visibility:visible;
}

ขั้นตอนที่ 2 การติดตั้ง HTML

ข้นหาโค้ด <div id='main-wrapper'> และวางโค้ดด้านล่างลงไปก่อนหน้าโค้ดดังกล่าว >บันทึกเทมเพลต


<header>
<div id="top">
<nav id="topmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio<span class="arrow">More Link</span></a>
<ul class="sublist">
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link<span class="arrow-right">More Link</span></a>
<ul class="subsublist">
<li><a href="#">Sub Sub link</a></li>
<li><a href="#">Sub Sub link</a></li>
<li><a href="#">Sub Sub link</a></li>
</ul>
</li>
</ul>
</li>
<!-- OTHER LINKS SECTION -->
</ul>
</nav>
</div>
</header>

Conclusion

เราสามารถเพิ่ม Sub Menu ได้ตามต้องการเลยครับ โดยการ copy โค้ด <li><a href="#">Sub link</a></li> ว่างเพิ่มลงไป แค่นี้เราก็ได้เมนู Dropdown สวยๆใว้ใส่ในบล็อกของเราแล้ว เรายังสามารถทำไปใช้กับเว็บไซต์ทั่วไปได้ สำหรับใครที่เปลียนลิ้งเมนูไม่เป็นให้ไปที่ บทความนี้เลยครับ วิธีการใส่ link Menu หลังจากเปลียน Templates ใครมีข้อสงสัยไดๆ สอบถามได้ที่กล่อง comment ได้เลยครับ

Cradit : alessioatzeni.com
edit to blogger by : cyberspace4u

ก่อนที่เราจะทำการปรับแต่งแก้โค้ดต่างๆ ในเว็บบล็อกของเราควรที่จะ Backup Templates ใว้ก่อนเพราะว่าเวลาเราแก้ไขโค้ดเกิดการผิดพลาดขึ้นมาจะได้ อัปโหลดขึ้นกลับไปเหมือนเดิม ผมแนะนำว่าทุกๆครั้งที่แก้ไข blog ควร Backup ใว้ก่อนเสมอ

ขั้นตอนการ backup Templates

เข้าไปที่บล็อก › แม่แบบ › สำรอง / กู้คืน › ดาวน์โหลดเทมเพลตแบบเต็ม

Conclusion

หลังจากที่เราได้ดาวน์โหลดเทมเพลตมาแล้วจะได้ไพล์นำสกุล .xml แค่นี้เราก็แก้ไขโค้ดต่างๆได้ตามสบายโดยไม่ต้องกลัวเทมเพลตจะเสียแล้วครับ ส่วนการเรียกเทมเพลตกลับมาให้ เข้าไปอ่านที่บทความ วิธีการเปลี่ยน Templates ของ Blogger โดยอ่านในขั้นตอนที่ 2 นะครับ

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

ขั้นตอนการเปลียนชื่อและลิ้งเมนู

ขั้นตอนที่ 1

เข้าไปที่บล็อก > แม่แบบ > แก้ใข html > ดำเนินการ > ขยายเทมเพลตวิตเจ็ต

ขั้นตอนที่ 2

กด Ctrl+F แล้วค้นหาโค้ดที่มีลักษณะแบบนี้หรือจะค้นหาชื่อที่อยู่บนเมนูซึ่งแต่ละบล็อกจะมีเมนูไม่เหมือนกันแล้วแต่ เทมเพลตจะออกแบบมา
<ul id="menu3">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
หรือค้นหาโค้ด
<li><a href="#">Home</a></li>
หรือค้นหาคำว่า Home
ใครที่ยังหาไม่เจออีกก็ให้หาชื่อที่อยู่บนเมนูรับรองเจอแน่นอนครับ

ขั้นตอนที่ 3

เมื่อหาโค้ดทีจะเปลียนชื่อและลิ้งเจอแล้วไม่รู้ว่าจะเปลียนยังไงดูขั้นตอนต่อไปนี้เลยครับ
อักษรสีแดง คือชื่อเมนูที่เราต้องการจะเปลียน
อักษรสีน้ำเงิน คือลิ้งที่เราจะลิ้งไปบทความต่างๆที่เราได้โพต์ใว้เช่นถ้าเราต้องการลิ้งไปหน้า home ก็ให้แก้โค้ดเป็น
<li><a href="http://ชื่อบล็อก.blogspot.com/">Home</a></li>

Conclusion

บางเทมเพลตไม่จำเป็นต้องเปลียนโดยวิธีนี้ ซึ่งจะอยู่ที่ผู้ออกแบบอาจจะให้ Gadget รายชื่อลิ้งในการเปลียนหรือเชื่อมโยงกับหน้าเว็บเลยก็ได้

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

ขั้นตอนการเปลี่ยน Templates

ขั้นตอนที่ 1 เลือก Templates

ให้เลือก Templates blogger ได้ที่เว็บด้านล่างนี้
http://blogtemplate4u.com/
http://btemplates.com/

หรือใครไม่พอใจให้ไปเลือกหาใน ww.google.com ได้อีกนะครับ
เมื่อดาวน์โหลด Templates มาเรียบร้อยแล้วให้แตกไฟล์จะได้ไฟล์นามสกุล .xml

ขั้นตอนที่ 2 การอัปโหลด Templates

ขั้นตอนนี้จะเป็นการ อัปโหลด Templates ที่เราได้ดาวน์โหลดมาในขั้นตอนแรก
เข้าไปที่บล็อก › แม่แบบ › สำรอง / กู้คืน › เรียกดู › Open ไฟล์ xml. › อัปโหลด

Conclusion

เท่านี้เราก็ได้ Teamplates สวยๆ ใว้ใช้งานกันแล้ว สำหรับใครไม่ทราบวิธีเปลียนลิ้งเมนูที่ติดมากับ Teamplates ให้ไปที่บทความ วิธีการใส่ link Menu หลังจากเปลียน Templates

ใครที่ต้องการสร้างบล็อกก็อย่าลืมคิดว่าจะทำบล็อกเกียวกับอะไรใว้ด้วยครับถ้าเกิดว่าเว็บของเรานั้นมีคนเข้าชมมาก เราสามารถหารายได้จาก บล็อกได้ด้วยนะครับ เพียงแค่ขยันอัพเดทบล็อกบ่อยๆก็สร้างรายได้จาก google adsense ซึ่งจะสอนในบทความถัดไปนะครับ

ขั้นตอนการสมัครและเริ่มต้นทำบล็อกกับ Blogger

ขั้นตอนที่ 1

ขั้นตอนนี้จะเป็นการสมัครใช้งาน gmail นะครับ
ให้เข้าไปที่ http://www.blogger.com/ >> สมัครใช้งาน (ใครมีบัญชี gmail อยู่แล้วก็ข้ามขั้นตอนนี้ไปเลยนะครับ) ผมจะไม่พูดถึงการกรองรายละเอียดต่างๆในการสมัครนะครับ

ขั้นตอนที่ 2

ให้ล็อกอินเข้าไปที่ http://www.blogger.com/ ลงชื่อเข้าใช้งานให้เรียบร้อยโดยใช้ E-Mail@gmail.com ที่ได้สมัครไปแล้วในในขั้นตอนแรก ก็จะเจอกับหน้าตาของบล็อกแบบนี้นะครับ >> ดำเนินการต่อไปยังบล็อกเกอร์

ขั้นตอนที่ 3

ขั้นตอนนี้จะเป็นการสร้างบล็อก >> บล็อกใหม่

กร๊อกรายละเอียดให้เรียบร้อยแล้ว >> สร้างบล็อก

หลังจากสร้างบล็๋อกเสร็จแล้วก็จะพบกับ หน้าแดชบอร์ดของบล็อกเกอร์ ส่วนนี้จะเป็นส่วนควบคุมส่วนต่างๆของบล็อก

Conclusion

หลังจากที่เราได้สร้างบล็อกเรียบร้อยแล้วก็เริ่มโพสต์บทความได้แล้วนะครับ ส่วนขั้นตอนการเขียนบทความ อ่านได้ที่
 การเขียนบทความใน blogger / การตั้งค่าต่างๆใน blogger 
ใครที่ไม่ชอบเทมเพลตของ blogger ให้ไปดาวน์โหลดมาเปลียนได้ที่ บทความ วิธีการเปลี่ยน Templates ของ Blogger

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

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

สำหรับใครที่ต้องการทำเว็บบล็อกก็ให้เข้าไปอ่านบทความ วิธีการสมัครและเริ่มต้นการทำบล็อกกับ Blogger

รายละเอียดซอฟต์แวร์ (โปรแกรม)

Descriptions :
Avast เป็นซอฟท์แวร์รักษาความปลอดภัย ที่ป้องกันไวรัส ที่มีผู้ใช้สูงสุด เป็นซอฟต์แวร์ที่เชื่อถือได้และรวดเร็วด้วยการใช้ทรัพยากรที่มีขนาดเล็กและมีประสิทธิภาพในการป้องกันดีกว่าคู่แข่ง เป็นอีกหนึ่งโปรแกรมที่ป้องกันไวรัสที่สแกนไวรัสได้รวดเร็วอีกหนึ่งโปรแกรม เป็นโปรแกรมที่ใช้แรมน้อยไม่กินแรม แถมยังมีความสามารถป้องกันไวรัสแบบเรียลไทม์เพื่อป้องกันไม่ให้ไวรัสกลับมาอีกครั้ง
English Descriptions :
From AVAST Software : Avast Free Antivirus is a full-featured product, with the same antivirus and anti-spyware scanning engine used in our premium products. Version 7.0 provides even faster protection than its predecessor and offers a web-reputation browser extension as well as virtualization technology. Accurate threat updates via avast. CommunityIQ technology ensure worry-free downloading, surfing, social networking, and gaming--for over 170 million registered users (and over 130 million active users).
What's new in this version : Version 7.0.1456 has fixed problem with random opening of the SafeZone and SSL connection issues with SMTP.

เวอร์ชั่น :	7.0.1456
ขนาดไฟล์ :	85.2 MB
ประเภท :	Freeware
ผู้พัฒนา :	AVAST Software
ระบบปฏิบัติการ :	Windows XP/Vista/7

...

วิธีเปิดเอ็มหลายอันในเครื่องเดียว windows 7 และ windows xp หลายคนอาจจะมีอีเมล์หลายอันเอาใว้ทำงาน เอาใว้คุยส่วนตัว แต่ msn นั้นจะใช้เล่นได้ทีละ Acconut แต่เรามีวิธีที่จะให้ทำ ออนเอ็มหลายๆอันในเครื่องเดียวได้ โดยต้องไปตั้งค่าที่ Registry มาเริ่มทำตามกันได้เลยครับ ไม่ยาก มีทั้ง windows xp และ windows 7 สามารถเปิดได้หลายๆ อันนะครับไม่ใช้แค่สองอัน

Windows xp

1. ไปที่ปุ่ม Start Windows > Run
2. พิมพ์คำว่า regedit กด ok
3. เลือก HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows Live > Messenger
4. จากนั้นคลิกขวาที่ Messenger เลือก New > DWORD Value
5. ตั้งชื่อว่า Multipleinstances และ ที่ Value Data ใส่เป็น 1
6. กด Ok แล้วไปเปิดได้เลยครับ

Windows 7

ต่างกันที่ข้อ 3 นะครับนอกนั้นเหมือนกันหมด
1. ไปที่ปุ่ม Start Windows >ที่ช่องSearch >พิมพ์คำว่า Run
2. พิมพ์คำว่า regedit กด ok
3. เลือก HKEY_LOCAL_MACHINE > SOFTWARE > wow6432Node > Microsoft > Windows Live > Messenger
4. จากนั้นคลิกขวาที่ Messenger เลือก New > DWORD Value
5. ตั้งชื่อว่า Multipleinstances และ ที่ Value Data ใส่เป็น 1
6. กด Ok เรียบร้อยครับใช้งานได้เลย