ThaiSEOBoard.com

แนะนำเทคนิคครับ ใช้ CSS ทำเว็บ ทำให้มีรายการหลักของเว็บค้นหาครับ



hxxp://www.google.co.th/#hl=th&source=hp&biw=1276&bih=839&q=preedasoftware.com&btnG=%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2+Google&aq=0&aqi=g1&aql=&oq=preedasoftware.&gs_rfai=&fp=c71934190557e961



 :wanwan014:

งง  :wanwan023:

ไม่ครับ ผมทำเว็บมา 3 ปี แต่ก่อนไม่ได้ใช้ CSS แบ่งเป็นหมวดหมู่ พอทำ CSS ทำให้ Bot Google จะมาแบ่งหัวข้อสำคัญให้ครับ ไม่เคยได้แบบนี้เลยครับ


 :wanwan044:

ออ ครับ

ใช้ CSS แบ่งเป็นหมวดหมู่ ทำยังไงหรือครับ


มือใหม่ไม่เข้าใจ  :wanwan017:

ตะกี้ลองทดสอบ Thank ดู นี่เป็น Thank แรกที่แจก

 :wanwan023:

แบบนี้ครับ กำหนด Style ก่อน จากนั้นค่อยไปสร้างรูปแบบตาราง และ CSS ใน Tag Body ครับ




























 
 
<style type="text/css">
<!--
body {
   background-image: url(images/bg2.jpg);
   background-repeat: repeat-x;
   background-position:center;
   background-color: #132b59;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
body,td,th {
   font-family: ms sans serif;
   font-size: 14px;
   color: #666666;
}
.solution {color: #333333; font-size: 12px; }
.free {   color: #FF0000;
   font-weight: bold;
}
.big_package {
   font-family: tahoma;
   font-weight: bold;
   color: #000000;
}
.sub_package {
   font-size: 12px;
   color: #666666;
}
.red_detail {color: #993333; font-size: 12px; }
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
a:active {
   text-decoration: none;
}
body {
   background-color: #e1d4c0;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-image: url(graphic/bg2.jpg);
   background-repeat: repeat-y;
}
 
<!--
.style38 {font-size: 1.3em}
.style39 {color: #FFFFFF}
.style43 {
   font-size: 1.5em;
   color: #FF6600;
   font-weight: bold;
}
 
 
 
ul.v_menu{ /* กำหนดขอบเขตของเมนู */
   list-style:none;
   margin:0px;
   padding:0px;
   font-family:tahoma, "Microsoft Sans Serif", Vanessa;
   font-size:1.3ems;
   
   
   
   
   
}
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */
   display:block;
   width:130px;
   height:25px;
   text-indent:5px;
   background-color:#ff6600;
   border:1px #006633 inset;
   float:left;
   text-align:center;
}
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
   display:block;
   width:130px;
   height:25px;
   text-indent:5px;
   background-color:#66bbdd;
   border:1px #006633 inset;
   float:left;
   text-align:center;   
}
ul.v_menu > li > a,ul.v_menu > li > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
   text-decoration:none;
   font:bold;
   color:#ffffff;
   line-height:25px;
}
ul.v_menu > li > ul{
   display:none;
   list-style:none;
   margin:0px;
   padding:0px;
}
ul.v_menu > li:hover > ul {
   display:block;
   width:130px;
 
   
}   
ul.v_menu > li > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */
   display:block;
   width:130px;
   height:25px;
   text-indent:5px;
   background-color:#FFFFCC;
   border:1px #F4F4F4 solid;
   float:left;
   text-align:center;
}
ul.v_menu > li > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */
   display:block;
   width:130px;
   height:25px;
   text-indent:5px;
   background-color:#66bbdd;
   border:1px #66bbdd solid;
   float:left;
   text-align:center;
}
.style45 {
   font-size: 1.2em;
   color: #000000;
}
-->
 
 
 
 
 
h1{
      font-size:180%;
      font-weight:normal;
      margin:0;
      padding:0 20px;
      }
   h2{
      font-size:160%;
      font-weight:normal;
      }   
   h3{
      font-size:140%;
      font-weight:normal;
      }   
   img{border:none;}
   pre{
      display:block;
      font:12px "Courier New", Courier, monospace;
      padding:10px;
      border:1px solid #bae2f0;
      background:#e3f4f9;   
      margin:.5em 0;
      width:926px;
      }   
         
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
         
   
 
/* Easy Slider */
 
   #slider ul, #slider li,
   #slider2 ul, #slider2 li{
      margin:0;
      padding:0;
      list-style:none;
      }
   #slider2{margin-top:1em;}
   #slider li, #slider2 li{
      /*
         define width and height of list item (slide)
         entire slider area will adjust according to the parameters provided here
      */
      width:926px;
      height:250px;
      overflow:hidden;
      }   
   #prevBtn, #nextBtn,
   #slider1next, #slider1prev{
      display:block;
      width:30px;
      height:77px;
      position:absolute;
      left:-30px;
      top:71px;
      z-index:1000;
      }   
   #nextBtn, #slider1next{
      left:926px;
      }                                          
   #prevBtn a, #nextBtn a,
   #slider1next a, #slider1prev a{ 
      display:block;
      position:relative;
      width:30px;
      height:77px;
      background:url(/images/btn_prev.gif) no-repeat 0 0;   
      }   
   #nextBtn a, #slider1next a{
      background:url(/images/btn_next.gif) no-repeat 0 0;   
      }   
      
   /* numeric controls */   
 
   ol#controls{
      margin:1em 0;
      padding:0;
      height:28px;   
      }
   ol#controls li{
      margin:0 10px 0 0;
      padding:0;
      float:left;
      list-style:none;
      height:28px;
      line-height:28px;
      }
   ol#controls li a{
      float:left;
      height:28px;
      line-height:28px;
      border:1px solid #ccc;
      background:#DAF3F8;
      color:#555;
      padding:0 10px;
      text-decoration:none;
      
      }
   ol#controls li.current a{
      background:#5DC9E1;
      color:#fff;
      }
   ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
   
/* // Easy Slider */
 
 
 
 
/*กำหนดส่วนแสดงภาพและสัญลักษณ์ด้านบนสุดของเว็บเพจ */
#head {
   background-repeat: no-repeat;
   clear: both;
   height: 100%;
   width: 100%;
   border-bottom:4px solid #4477dd;
}
#containner {
   width: 1000px;
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: #CBC2A5;
   margin-top: 5px;
   text-align: left;
}
#containner #main {
      float: left;
   width: 1000px;
   background-color: #FFFFFF;
   background-repeat: repeat-y;
}
/*กำหนดตำแหน่ง และขนาดของพื้นที่แสดงผลทางซ้ายมือ */
#containner #main #left {
   float: left;
   width: 230px;
   margin:0px;
   padding:0px;
}
 
/*กำหนดการแสดงผลของ navigation*/
#containner #main #left #navigation {
   width: 230px;
   margin:0px;
   padding:0px;
   float: left;
}
/*แสดงผลรายการหัวข้อที่อยู่ใน h1 ด้วยพื้นหลังสีเหลือง */
#containner #main #left #navigation h1.yellow {
   height: 18px;
   width: 205px;
   margin-top:0px;
   margin-bottom:5px;
   position: relative;
   left: 5px;
   top: 5px;
   background-image: url(images/bg_menu.jpg);
   padding: 5px;
   color: #000000;
   font-size: 18px;
   font-weight: bold;
   display: block;
}
/*แสดงผลรายการหัวข้อที่อยู่ใน h1 ด้วยพื้นหลังสีฟ้า */
#containner #main #left #navigation h1.blue {
   height: 18px;
   width: 205px;
   margin-top:0px;
   margin-bottom:5px;
   position: relative;
   left: 5px;
   top: 5px;
   background-image: url(images/bg_menu.jpg);
   padding: 5px;
   color: #000000;
   font-size: 18px;
   font-weight: bold;
   display: block;
}
/*แสดงผลรายการหัวข้อที่อยู่ใน h1 ด้วยพื้นหลังสีเขียว */
#containner #main #left #navigation h1.green {
   height: 18px;
   width: 205px;
   margin-top:0px;
   margin-bottom:5px;
   position: relative;
   left: 5px;
   top: 5px;
   background-image: url(images/bg_menu.jpg);
   padding: 5px;
   color: #000000;
   font-size: 18px;
   font-weight: bold;
   display: block;
}
/*แสดงผลรายการหัวข้อที่อยู่ใน h1 ด้วยพื้นหลังสีแดง */
#containner #main #left #navigation h1.red {
   height: 18px;
   width: 205px;
   margin-top:0px;
   margin-bottom:5px;
   position: relative;
   left: 5px;
   top: 5px;
   background-image: url(images/bg_menu.jpg);
   padding: 5px;
   color: #000000;
   font-size: 18px;
   font-weight: bold;
   display: block;
}
/*แสดงรายการที่ตามหลังหัวข้อหลักที่อยู่ใน UL */
#containner #main #left #navigation ul {
   font-size: 16px;
   padding:0px;
   margin-left:28px;
   margin-top:5px;
   position:relative;
   list-style-image: url(images/arrow.gif);
}
#containner #main #left #navigation  li {
   font-size: 16px;
   line-height:20px;
   list-style-type: none;
}
#containner #main #left #navigation  li  a{
   font-size: 16px;
   line-height:20px;
   text-decoration:none;
   color:#000000;
}
 
/*แสดงรายการที่อยู่ทางขวามือทั้งหมด */
#containner #main #right {
   float: right;
   width: 700px;
}
/*สร้างกล่องล้อมรอบรายละเีอียด */
#containner #main #right #content {
   background-color: #FFFFFF;
   clear: both;
   width: 650px;
   border: 2px solid #CCCCCC;
   text-align: left;
   margin: 10px;
   position: relative;
}
/*แสดงผลหัวข้อของเนื้อหาสีเขียว*/
#containner #main #right #content.green h1 {
   font-size: 18px;
   font-weight: bold;
   color: #f26522;
   border-left-width: 5px;
   border-left-style: solid;
   border-left-color: #f26522;
   margin: 5px;
   height: 40px;
   width: 700px;
   padding-left: 5px;
}
/*แสดงผลหัวข้อของเนื้อหาสีพ้า*/
#containner #main #right #content.blue h1 {
      font-size: 18px;
   font-weight: bold;
   color: #f26522;
   border-left-width: 5px;
   border-left-style: solid;
   border-left-color: #f26522;
   margin: 5px;
   height: 40px;
   width: 700px;
   padding-left: 5px;
}
/*แสดงผลชื่อผู้แต่ง*/
#containner #main #right #content #authors {
   font-size:18px;
   line-height:20px;
   color: #000000;
   position: absolute;
   margin:0px;
   padding:0px;
   top: 25px;
   left:15px;
}
 
/*แสดงผลวันที่สีเขียว*/
#containner #main #right #content.green #date  {
   color: #FFFFFF;
   background-color: #003366;
   margin: 0px;
   padding-top: 10px;
   padding-bottom:10px;
   height: 10px;
   width: 100px;
   position: absolute;
   top: 5px;
   right: 5px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
}
/*แสดงผลวันที่สีพ้า*/
#containner #main #right #content.blue #date  {
   color: #FFFFFF;
   background-color: #003366;
   margin: 0px;
   padding-top: 10px;
   padding-bottom:10px;
   height: 10px;
   width: 100px;
   position: absolute;
   top: 5px;
   right: 5px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
}
/*แสดงผลส่วนของเนื้อหา*/
#containner #main #right #content #story {
   font-size: 1.3em;
   line-height:20px;
   text-indent: 5px;
   margin-top: 5px;
   margin-right: 5px;
   margin-bottom: 40px;
   margin-left: 5px;
}
/*แสดงผลปุ่ม อ่านเนื้อหาเพิ่มเติม สีเขียว */
#containner #main #right #content.green #more {
   color: #FFFFFF;
   background-color: #003366;
   margin: 0px;
   padding-top: 5px;
   padding-bottom:5px;
   height: 15px;
   width: 150px;
   position: absolute;
   bottom: 8px;
   right: 5px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
}
#containner #main #right #content.green #more a {
   color: #FFFFFF;
   text-decoration:none;
}
/*แสดงผลปุ่ม อ่านเนื้อหาเพิ่มเติม สีฟ้า */
#containner #main #right #content.blue #more {
   color: #FFFFFF;
   background-color: #003366;
   margin: 0px;
   padding-top: 5px;
   padding-bottom:5px;
   height: 15px;
   width: 150px;
   position: absolute;
   bottom: 8px;
   right: 5px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
}
#containner #main #right #content.blue #more a{
   color: #FFFFFF;
   text-decoration:none;
}
/*แสดงผลส่วนล่างสุดของเว็บเพจ*/
#footer {
   background-color: #66bbdd;
   height: 100px;
   width: 100%;
   margin: 0px;
   padding: 0px;
   float: left;
   border-top:4px solid #c2e4f0;
   
}
#footer p {
   font-size: 18px;
   color: #FFFFFF;
   margin-top : 5px;
   margin-left:10px;
   padding: 0px;
   float: left;
   text-align: left;
}
#footer ul {
   padding:0px;
   margin:0px;
   font-size: 18px;
   font-weight: bold;
   color: #FFFFFF;
   float: right;
   list-style-type: none;
   width:600px;
   position:relative;
}
#footer li {
   position:relative;
   top:10px;
   float: left;
   left: 20px;
}
#footer li a{
   color: #FFFFFF;
   text-decoration:none;
}
.style49 {font-size: 1.3em; color: #FFFFFF; }
.style50 {
   font-size: 1.5em;
   color: #000000;
}
.style54 {
   color: #000000;
   font-weight: bold;
}
.style56 {font-size: 1.3em; color: #000000; }
.style57 {color: #000000}
.style58 {
   font-size: 1.3em;
   font-weight: bold;
   color: #000000;
}
</style>
 
 











จากนั้นก็ดึง CSS มาทำเป็น Menu ครับ








 
    <ul class="v_menu">
            <li><a href="index.php"><strong>Home</strong></a> </li>
          <li><a href="product.php"><strong>Product</strong></a> </li>
          <li><a href="order.php"><strong>Buy</strong></a> </li>
          <li><a href="download.php"><strong>Download</strong></a> </li>
          <li><a href="http://forum.preedasoftware.com"><strong>Webboard</strong></a>  </li>
                   
          <li><a href="#"><strong>Help</strong></a>
                <ul>
                  <li><a href="help.php"><strong>Help</strong></a></li>
                  <li><a href="training.php"><strong>Video Training</strong></a></li>
                </ul>
          </li>
         
                   <li><a href="contact.php"><strong>Contact Us</strong></a>  </li>
         
         
        </ul>

ขอบคุณครับ  :wanwan017: งั้นขอติชมหน้าเว็บหน่อยแล้วกัน

ตรงเมนู ควรใช้ display : block ตรง li a น่ะครับ เพราะผมต้องไปกดตรงตัวอักษร มันเล็กกดยาก

และตรงเมนู drop drow น่าจะใช้อักษรที่ไม่ใช่สีขาว เพราะมองไม่เห็น สีพื้นน่าจะเปลี่ยนหน่อย

เท่านี้ก่อน

ขอบคุณมาก



 :o

ขอบคุณพี่ TSB Club มากครับ

 :wanwan017:

กระจ่างเลยครับ สุดยอด  :wanwan013:

เจ๋ง ๆ ได้ sitelinks จาก google ด้วย  อยากได้มั่ง   :-[

ผมไม่ใช้ css ก็ได้ sitelink จาก google เช่นกันครับ
ข้อสังเกต เว็บได้ sitelink อีกอย่างคือ เว็บมีอายุระดับหนึ่ง และมีความน่าเชื่อถือ ที่ google มองแล้วว่าน่าจะเป็นประโยชน์สำหรับผู้ใช้งาน google ก็จะให้ sitelink เองครับ รายละเอียดเพิ่มเติม ที่ google webmaster tools ครับ  :wanwan016: :wanwan016:

ขอบคุณครับ

มือใหม่ ได้แนวคิดดีๆ อีกแล้ว


 :wanwan019:

 :wanwan017:
ออ sitelink นั่นนะเอง

เพิ่งมาเข้าใจตรงด้านล่างนี่แหละ งง ตั้งนาน

อ่ออ อย่างนี้ๆๆๆๆๆๆๆๆ นี่เอง ๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ  :wanwan002:

ไม่น่าจะเกี่ยวกับ CSS นะครับ ถ้าอยากให้โครงสร้างเว็บไซต์ส่งผลดีต่อ SEO ลองไปศึกษาเกี่ยวกับเรื่อง Web standard ดูครับ