ใส่ปุ่ม Social Media เฟชบุ๊ค กูเกิ้ลพลัส ยูทูบ ทวิตเตอร์ ให้กับเว็บ

vitaminzee

ปุ่มจะอยู่ด้านขวาของเว็บทุกหน้า จะเป็นปุ่มสีจางๆ

แต่เมื่อนำเม้าไปแตะสีจะเข้มขึ้น




วิธีทำ

เปิดไฟ Css ของสกินที่ท่านใช้

ยกตัวอย่างเช่น template/สกินที่ใช้/common.css
แต่บางสกินอาจใช้ไฟล์  extend_common.css ก็ได้

เมื่อเปิดไฟล์ขึ้นมาแล้วให้เลื่อนลงไปด้านล่างสุดเลยแล้วคัดลอกโค้ดนี้ไปวาง

1. /**/
   
2. 
   
3.             #takip {
   
4.                 position: fixed;
   
5.                 right: 0;
   
6.                 top: 220px;
   
7.                 z-index: 999;
   
8.             }
   
9.             .takip {
   
10.             background-image: url(../../../images/social/social17.png);
    
11.             background-repeat: no-repeat;
    
12.             height: 42px;
    
13.             width: 42px;
    
14.             top: 100px;
    
15.             margin-left: auto;
    
16.             opacity:0.3;
    
17.             filter:alpha(opacity=50); /* For IE8 and earlier */
    
18.             }
    
19.             .takip:hover {
    
20.             background-image: url(../../../images/social/social17.png);
    
21.             cursor: pointer;
    
22.             opacity:1;
    
23.             filter:alpha(opacity=100); /* For IE8 and earlier */
    
24.             }
    
25.            
    
26.             .facebook {
    
27.                 background-position: 0px 0px;
    
28.             }
    
29.             .twitter {
    
30.                 background-position: 0px -42px;
    
31.             }
    
32.             .Google {
    
33.                 background-position: 0px -84px;
    
34.             }
    
35.             .Youtube {
    
36.                 background-position: 0px -126px;
    
37.             }
    
38.             .rss {
    
39.                 background-position: 0px -168px;
    
40.             }
    
41.            
    
42. /**/

คัดลอกไปที่คลิปบอร์ด

หลังจากวาง CSS ด้านบนเสร็จแล้วให้เปิดไฟ template/สกินที่ใช้/footer.htm
แล้วนำโค้ดนี้ไปวางที่ </body>โดยวางให้อยู่ด้านบนของ</body>

รูปตัวอย่าง

1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   
2.             <title>Social Media Buttons</title>
   
3.             <script src="dkthemes.forumotion.in/38797.js" type="text/javascript"></script>
   
4.             <script type="text/javascript">
   
5.             $(document).ready(function(){
   
6.             $(".takip").mouseover(function(){
   
7.                   $(this).filter(':not(:animated)').animate({width:135},{duration:500});
   
8.             });
   
9.             $(".takip").mouseout(function(){
   
10.                 $(this).animate({width:42});
    
11.             });
    
12.             });
    
13.             </script>
    
14.            
    
15.            
    
16.             <div id="takip">
    
17.                 <div class="facebook takip" onclick="location.href='http://www.facebook.com/'">
    
18.                 </div>
    
19.                 <div class="twitter takip" onclick="location.href='http://www.twitter.com/'">
    
20.                 </div>
    
21.                 <div class="Google takip" onclick="location.href='https://plus.google.com/'">
    
22.                 </div>
    
23.                 <div class="Youtube takip" onclick="location.href='http://www.youtube.com/'">
    
24.                 </div>
    
25.                 <div class="rss takip" onclick="location.href='#'">
    
26.                 </div>

คัดลอกไปที่คลิปบอร์ด

แล้วนำรูปในนี้ไปอัพไว้ที่ ไดเร็กเตอรีแรกของเว็บคุณหรือที่ public_html นั่นเอง

jameiiz

ขอบคุณครับ ต้องลองแล้ว

DoopDip

ว้าววว  ขอบคุณมากครับ

ninwatza

เยี่ยมเลยครับ

แต่ผมลองแล้ว มันไม่ขึ้นครับ

อัพเดทแคชแล้ว งงจัง

skaless

^^ ยอดไปเลยครับ ขอนำไปศึกษาต่อนะครับ

jame2600

ไม่ขึ้น อ่า แงๆ

kanzayo

ขอบคุณค่ะ จะลองดูนะค่ะ และสวัสดีพี่ด้วยค่ะไม่ค่อยได้เข้าดิสคัทไทยช่วงหลัง ปิดเทอมแล้วคงมีเวลามากขึ้นค่ะ

sahawat13

ผมลองแล้ว มันไม่ขึ้นครับ

อัพเดทแคชแล้ว

ย่ากได้ครับ