ไอคอน Html สำหรับเครือข่ายโซเชียล

โกลอฟนา เบราว์เซอร์เรานำเสนอชุดไอคอนที่สวยที่สุด 30 อันดับแรกเพื่อเป็นเกียรติแก่คุณ

มาตรการทางสังคม

สำหรับเว็บไซต์ บล็อก ร้านค้าออนไลน์ หรือแหล่งข้อมูลบนเว็บอื่นๆ ของคุณ

เนื่องจากแต่ละไซต์มีสไตล์ ความตรงไปตรงมา และกลุ่มเป้าหมายที่แตกต่างกัน การเลือกไอคอนที่ต้องการจึงอาจเป็นเรื่องยาก

การเลือกนี้ประกอบด้วยชุดไอคอนที่ดีที่สุด ทั้งสำหรับเครื่องมือค้นหาสากล และชุดไอคอนที่เหมาะกับการออกแบบเว็บไซต์ที่มีเอกลักษณ์เฉพาะตัวอย่างสมบูรณ์แบบ

ตั้งค่าไอคอนที่จะวางไว้ในส่วนท้ายของเว็บไซต์หรือบล็อกของคุณ

Vikorist มีอักขระได้สูงสุด 5-6 ตัว

ชุดไอคอนมงกุฎขวดเก่า

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

เห็นได้ชัดว่าองค์ประกอบมีการทำเครื่องหมายไว้อย่างชัดเจนและการออกแบบมีความชัดเจน ดังนั้นเมื่อเยี่ยมชมแหล่งข้อมูลบนเว็บ คุณจะคุ้นเคยกับเพจของคุณบนโซเชียลมีเดีย

ชุดประกอบด้วยไอคอน 20 ไอคอน แต่ละไอคอนมีการออกแบบที่หลากหลาย เช่น ไอคอนขนาดเล็กในรูปแบบ PNG

แสตมป์โซเชียลมีเดียวินเทจ

ไอคอนโซเชียลแบบวินเทจจะเข้ากันได้อย่างลงตัวกับธีมของเว็บไซต์ท่องเที่ยวหรือบล็อกเกี่ยวกับอนุสรณ์สถานโลก

ช่างภาพมืออาชีพมักใช้ไอคอนเหล่านี้เพื่อเพิ่มเนื้อหาโซเชียลมีเดียลงในแฟ้มผลงานของตน

รูปแบบไฟล์ – PNG, PSD

ขนาดของไอคอนสกินคือ 256x256px

สังคมไม้

ชุดนี้ประกอบด้วยไอคอนสิบอันสำหรับโซเชียลมีเดีย

นอกจากนี้ยังมีสิ่งเล็กน้อยสำหรับฟีด RSS และการสมัครรับอีเมล

จากเอกสารกราฟิกไฟล์เก็บถาวรประกอบด้วยไฟล์ทรัพยากรที่ทรงพลังซึ่งคุณสามารถแก้ไขไฟล์เล็ก ๆ ได้อย่างอิสระและบันทึกในรูปแบบอื่น

รูปแบบเริ่มต้นคือ PNG

โซเชียลเมท

ชุดนี้เป็นสากลและเหมาะสำหรับการสร้างเนื้อหาบนเว็บไซต์หรือโครงการเว็บ สำหรับการแก้ไขไฟล์เป็นการส่วนตัว ไฟล์ PSD ต้นฉบับจะถูกเพิ่มเข้าไปในองค์ประกอบสกินภาพที่อนุญาตให้ตั้งค่าเป็น 128x128px, 64x64px และ 32x32p

เว็กเตอร์ 3 มิติโซเชียลไอคอน

ไอคอน 3 มิติใน Vector เป็นตัวแทน

โทรซ้ำ

องค์ประกอบสำหรับส่วนท้ายของเว็บไซต์ของคุณ ซึ่งจะไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น

รูปลักษณ์ที่เป็นเอกลักษณ์ของภาพนั้นเกิดจากการเคารพของทรัพยากร

นอกเหนือจากชุด:

• 16 ไอคอน;
• 6 สิทธิ์ที่แตกต่างกันสำหรับองค์ประกอบสกิน (32px, 48px และ 64px, 128px, 256px และ 512px)
• รูปแบบ PNG มาตรฐาน

เข้าสังคม

เข้าสังคม – นี่คือชุดไอคอนทรงกลมเรียบร้อย 12 อันสำหรับโซเชียลมีเดีย

โปรดทราบว่าสำหรับไซต์สกิน รูปภาพจะแสดงทันที

ด้วยวิธีนี้ คุณสามารถเลือกองค์ประกอบที่เหมาะสมที่สุดสำหรับสไตล์ของเว็บไซต์หรือบล็อกของคุณได้

รูปภาพประเภทเวกเตอร์จะถูกบันทึกในรูปแบบ SVG

โซมาโคร Somacro - มีไอคอนที่ชัดเจน 45 ไอคอนสำหรับโซเชียลมีเดียยอดนิยมทั้งหมด รวมถึง , เฟสบุ๊คทวิตเตอร์

, Steam รวมถึงระบบการชำระเงิน Paypal, Webmoney

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

ขนาดของไฟล์คือ 500×500 พิกเซล

รูปภาพแต่ละรูปมีให้เลือกทั้งแบบมีและไม่มีกรอบ ให้คุณสร้างไฟล์ต่างๆ ได้ 90 ไฟล์

ไอคอนโซเชียลมีเดียบูล Bulb Icons เป็นชุดไอคอนที่ได้รับความนิยมมากที่สุดสำหรับแหล่งข้อมูลที่เกี่ยวข้องกับวิทยาศาสตร์การออกแบบภาพสกินสุดเท่จะเข้ากันได้อย่างลงตัวกับบล็อกเกี่ยวกับวิทยาศาสตร์

ข้อเท็จจริงบางอย่าง

, เทคโนโลยี.

เล็ก 9

ไอคอนโซเชียลมีเดียที่โปร่งใส

ไอคอนนี้จะเชื่อมโยงกับไซต์ใด ๆ อย่างแน่นอน โดยไม่คำนึงถึงการออกแบบหรือธีม

ชุดนี้เหมาะสำหรับผู้ที่ชื่นชอบความเรียบง่าย

สิ่งหนึ่งที่เด็กน้อยสามารถโกรธได้แม้ว่าพวกเขาจะสดใสมากก็ตาม

ขนาดที่มีจำหน่าย: 48, 56, 72, 96, 128, 256 และ 512 พิกเซล

จำนวนภาพในไฟล์เก็บถาวรคือ 40

ไอคอนวงกลมแบนพร้อมจอประสาทตา

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

เพิ่มสีสันให้กับเว็บไซต์จาก Vectezy ให้กลายเป็นเครื่องมือมหัศจรรย์ในการดึงดูดลูกค้า

หน้าโซเชียล

บริษัทของคุณ

ภาพสามารถแสดงได้อย่างอิสระจากการออกแบบหน้าเว็บที่ซ่อนอยู่

กลิ่นเหม็นดูดีทั้งเพลี้ยอ่อนและเพลี้ยอ่อน

ไอคอนโซเชียลมีเดียสีเทา

ตั้งค่าไอคอนโซเชียลมีเดียที่แรเงาเพื่อรวมรูปภาพ 40 ภาพพร้อมเอฟเฟกต์เงา

การออกแบบนี้เหมาะอย่างยิ่งสำหรับ vikoristanya บนไซต์ที่มีการออกแบบที่สว่าง

ไฟล์เก็บถาวรสามารถเข้าถึงได้ในสองรูปแบบ

อันแรกมีใบอนุญาตฟรี ส่วนอีกอันขายในช่วงสุดสัปดาห์และขายในราคา 3 ดอลลาร์

ไม่เพียงแต่มีไอคอนของเว็บไซต์ยอดนิยมเท่านั้น แต่ยังมีรูปภาพสำหรับระบบการชำระเงิน Wi-Fi และอื่นๆ อีกมากมายอีกด้วย

ไอคอนมอนสเตร

Iconmonstr เป็นแหล่งข้อมูลที่ผู้จัดพิมพ์เผยแพร่ไอคอนเฉพาะสำหรับเว็บไซต์เป็นประจำ

ในบรรดารูปภาพมากกว่า 500 ภาพ คุณจะพบไอคอนขาวดำสำหรับไซต์หรือเครื่องมือใดๆ

คุณสามารถรับไฟล์ทั้งหมดได้โดยไม่มีค่าใช้จ่ายใดๆ

นอกจากนี้ ในหน้าทรัพยากร คุณสามารถเลือกเนื้อหาและรูปแบบไฟล์แต่ละรายการได้

ชุดไอคอนโซเชียลมีเดียลองชาโดว์

ชุดไอคอน Social Media Long Shadow ประกอบด้วยไฟล์ 35 ไฟล์สำหรับโซเชียลมีเดียต่างๆ

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

ไฟล์เก็บถาวรจะมีเฉพาะไฟล์ในรูปแบบ PNG เท่านั้น

ไอคอนโซเชียลการออกแบบวัสดุ

ไอคอนเวกเตอร์ 8 ไอคอนในรูปแบบ SVF ช่วยให้คุณสามารถเพิ่มข้อความที่สามารถคลิกได้เพิ่มเติมลงในไซต์ของคุณ จากนั้นทำการปรับเปลี่ยนไฟล์ของคุณเอง

คุณสามารถเปลี่ยนการแยก เพิ่มเงา เปลี่ยนสี ปรับความคมชัด และอื่นๆ อีกมากมาย

ภาพนี้มีอยู่ใน Instagram, YouTube, Facebook, Pinterest, Linkedin, Skype, Google+

พิคอน โซเชียล

Picons Social คือชุดไอคอนโซเชียลมีเดียระดับมืออาชีพที่ประกอบด้วยรูปภาพต่างๆ มากกว่า 60 รูป

รูปภาพ Wikionian ทั้งหมดอยู่ในรูปแบบขาวดำและมีการออกแบบที่ "สว่าง" สวยงาม

• เหมาะอย่างยิ่งสำหรับเนื้อหาสากลบนเว็บไซต์ที่มีการออกแบบสว่าง
• มีหลายรูปแบบสำหรับไอคอนสกินในไฟล์เก็บถาวร:
• .PSD;
• .กำไรต่อหุ้น;
• .PDF;

.PNG;

- แรงเคลื่อนไฟฟ้า.

เซอร์เคิลแอนด์รอลโซเชียลมีเดียไอคอน

16 ไอคอนสำหรับโซเชียลมีเดียจะกลายเป็นส่วนเสริมที่ยอดเยี่ยมให้กับเว็บไซต์ของคุณ

การออกแบบช่วยให้คุณเห็นช่องส่งด้านข้างในแหล่งข้อมูลอื่นๆ อย่างน่าอัศจรรย์

ขนาดของภาพสกินคือ 58 และ 40 พิกเซล

นอกจากนี้ยังมีเอาต์พุตสำหรับการแก้ไขใน Photoshop

ไอคอนโซเชียลมีเดียแบบแบนมินิมอลลิสต์

คลังเก็บประกอบด้วยไอคอนเรียบง่ายขนาดใหญ่ 85 ไอคอนสำหรับโซเชียลมีเดีย

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

ไอคอนมี 2 รูปแบบ ได้แก่ PNG และ SVG

มีให้เลือกทั้งแบบสีและแบบขาวดำ

ไอคอนโซเชียลมีเดียเฮ็กซ์

ไอคอนชุดนี้ดูเหมือนใบมีดหกอัน

ผู้ค้าปลีกส่งต่อช่วงสีของโซเชียลมีเดียของสกิน

บนเว็บไซต์ของผู้ค้าปลีก คุณสามารถใช้ไอคอนเดียวกันกับแบบอักษรได้โดยเลือกรูปแบบและโครงสร้างที่แยกจากกันก่อน

มีดีไซน์ให้เลือกถึง 32 แบบ

นอกจากนี้ ชุดนี้ยังมีไอคอนสำหรับ HTML5, CSS

รูปแบบไฟล์ – PNG

อนุญาต – 58 พิกเซล

ไอคอนโซเชียลมีเดียขั้นสูงแบบแฟลต

ผิวมีลักษณะพิเศษของเงาและการแรเงาในโทนสีที่สดใส

ขนาดที่มีจำหน่าย - 72, 96, 128, 256 และ 512 พิกเซล

องค์ประกอบหนังมีจำหน่ายบนเว็บไซต์ที่ออกแบบมาสำหรับโทนสีสว่างและสีเข้ม

ไอคอนโซเชียลมีเดียสไตล์ iOS

ดาวน์โหลดไฟล์เก็บถาวรจากเว็บไซต์ของผู้จัดพิมพ์และแยกข้อมูลเอาต์พุตเพื่อการแก้ไขส่วนตัวแทน

รูปแบบที่ใช้ได้ - .EPS และ .AI

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

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

ไฟล์สกินมีให้ในรูปแบบ PSD

ไอคอนโซเชียลมีเดียเรขาคณิต

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

โทนสีมาตรฐานสำหรับไอคอน Vikon จะเป็นสีอ่อน

นอกจากนี้ คุณยังสามารถเลือกตัวเลือกสไตล์ที่สว่างขึ้นหรือเข้มขึ้นได้

กลิ่นทั้งหมดมีอยู่ในคลังเดียว

ไอคอนโซเชียลมีเดียโรจี้

ชุดไอคอนในเว็บเบราว์เซอร์ที่เลือกจะช่วยปรับปรุงเอกลักษณ์ของทรัพยากรบนเว็บ และจะดึงดูดผู้ชำระเงินมายังโซเชียลมีเดียของคุณมากขึ้น

รูปภาพวิโคเนียนทั้งหมดทาสีด้วยโทนสีและขาวดำ รูปภาพที่มีให้สำหรับแพลตฟอร์มเกมการเล่นตลกที่น่าสยดสยอง

และประกันสังคม

ไอคอน Adobe Muse

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

วิญญาณชั่วร้าย ระบบการชำระเงิน และแหล่งข้อมูลบนเว็บยอดนิยมอื่น ๆ

120 แฮนด์ Drawn Social Media Icons

เมื่อเลือกชุดนี้ คุณจะได้รับไอคอนที่ไม่ซ้ำกัน 120 ไอคอนสำหรับโซเชียลมีเดีย

ภาพสกินมีการออกแบบที่ห่างไกลและมีเส้นที่ชัดเจน

มันจะเข้ากันได้ดีกับการออกแบบเว็บไซต์ธีม DIY หรือแหล่งข้อมูลอื่นๆ ที่เกี่ยวข้องกับความคิดสร้างสรรค์โดยเฉพาะ

รูปแบบที่ใช้ได้คือ PNG และ SVG

Garnu รวยฉันขุด

ฉันไม่ได้โพสต์ไอคอนเป็นเวลานาน อาจเป็นเพราะไอคอนทั้งหมดที่จำเป็นมีอยู่แล้วบนเว็บไซต์ของฉัน :)) แต่ฉันต้องการไอคอนในสไปรท์ตัวเดียว และฉันรู้ดีและกำลังแบ่งปันไอคอนเหล่านั้นกับคุณ ก่อนที่จะพูด มีข้อดีเพียงอย่างเดียวสำหรับสไปรท์ เนื่องจากหากคุณเคยสนใจภาพของสไปรท์สักครั้ง องค์ประกอบทั้งหมดของสไปรท์จะไม่สามารถปรับได้อีกต่อไป ดังนั้น จึงเปลี่ยนความลื่นไหลหน้า html

- เรียกหน้าวิกิเพื่อดูปุ่มที่เปลี่ยนแปลงเมื่อวางเมาส์เหนือ

บางครั้งมันเกิดขึ้นที่ปุ่มอยู่ในตำแหน่งเริ่มต้น และปุ่มเมื่อโฮเวอร์เหนือรูปภาพสองภาพที่คุณอาจทำเครื่องหมายไว้ในบางไซต์ เมื่อคุณโฮเวอร์เหนือปุ่ม รูปภาพจะไม่ปรากฏขึ้นทันที – มันจะถูกเน้น

ด้วยสไปรท์จะไม่มีปัญหาดังกล่าว

ข้อดีอีกประการของสไปรท์คือการประหยัดพื้นที่ สมมติว่าคุณมีปลั๊กอินบางประเภท เช่น ตัวเลื่อน และมีรูปภาพจำนวนมาก (ชุดเฟรม ตัวเฟรมเอง ลูกศร สัญลักษณ์แสดงหัวข้อย่อย หน้าต่างโซเชียลมีเดีย และอื่นๆ)

ดังนั้น หากวางกลิ่นเหม็นทั้งหมดไว้ในภาพเดียว มันจะดูสวยงามและเรียบร้อยกว่ามาก ราวกับว่ากลิ่นเหม็นนั้นนอนอยู่ในโฟลเดอร์จากรูปภาพเหล่านั้น

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

ไอคอนเหล่านี้เชื่อมต่อได้ง่ายมาก:

ฉันยินดีต้อนรับคุณสู่บล็อกของฉัน

วันนี้ฉันอยากจะแสดงให้คุณเห็นทีละขั้นตอนว่าคุณสามารถสร้างปุ่มโซเชียลมีเดียบน html และ css ได้อย่างไร

เกือบจะตั้งแต่เริ่มต้น ในที่สุดเราก็ได้ผลลัพธ์ที่ต้องการ

ไปข้างหน้า!

เค้าโครงและสไตล์พื้นฐาน
ในที่อยู่ฉันแค่ใส่ґrati
แน่นอน หากคุณเลือกในความเป็นจริง แต่ละคนอาจมีที่อยู่ที่ทำงานที่ลงทะเบียนไว้ซึ่งคุณจะถูกโอนให้
เพิ่มสไตล์ต่อไปนี้:
แบ่งปัน (
}
ความกว้าง: 280px;
ระยะขอบ: 0 อัตโนมัติ;
ช่องว่างภายใน: 10px;
พื้นหลัง: #D3CDEE;
}

.แชร์ ฉัน (

ขอบขวา: 15px;

สี: สีดำ;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
เราตกแต่งคอนเทนเนอร์ทีละน้อยสำหรับ posilan (ขนาด, แนวทาง, tlo) และเขียน
การออกแบบไอคอน
ทางสังคม (
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 40px;
}

ความสูง: 40px;

พื้นหลัง: #bdc3c7;

แนวตั้ง-จัด: กลาง;

ขอบขวา: 10px;

เราสร้าง display: inline-block ในลักษณะที่ข้อความของเราถูกแปลงเป็นองค์ประกอบบล็อก และในขณะเดียวกัน เราก็บันทึกอาคารให้ยืนเรียงกัน

ถัดไประบุขนาดและช่องเปิดทางด้านขวาเพื่อไม่ให้บล็อกติดกัน

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

เราปราศจากการวางไอคอนของเราบนสกินจากบล็อกการเตรียมการซึ่งจะระบุเครือข่ายโซเชียลของกันและกัน

มิ้ม

เพื่อจุดประสงค์นี้ ฉันขอเสนอให้ใช้วิธีที่ดีที่สุดอย่างรวดเร็ว - เชื่อมต่อภาพต่อเรียงและวางทุกอย่างไว้ในตำแหน่งหลังการวางตำแหน่งพื้นหลัง สรุปแล้วเราต้องการภาพแบบนี้ผมสูงประมาณ 120/40 สไตล์ CSS เพิ่มกฎต่อไปนี้:สังคม-vk(

โดยการเขียนในพื้นหลังดังนี้: พื้นหลัง: url(icon.png) -40px 0 เราระบุอย่างชัดเจนว่าสำหรับบล็อกโซเชียล fb ภาพพื้นหลังจะต้องแสดงจากตำแหน่งที่กำหนด - สี่สิบพิกเซลเกินความกว้างไปทางซ้ายและ ที่สูงโดยไม่มีการกระจัด ดังนั้นจึงไม่จำเป็น

ทุกอย่างง่ายมากจริงๆ

คุณสามารถรับอะไรได้อีก?

บางที ดูเหมือนว่าคุณยังต้องการสร้างมาตรการทางสังคมแบบเป็นทางการ
ไอเดียมากมาย
}

ก่อนอื่น คุณสามารถเพิ่มขอบโค้งมนให้กับไอคอนทั้งหมดได้

ทางสังคม(

รัศมีเส้นขอบ: 5px;

หรือคุณสามารถเพิ่มเฟรมได้

เส้นขอบ: สีม่วงทึบ 3px;

ในส่วนของดีไซน์ เรามีตัวเลือกสีม่วงนะ

คุณยังสามารถปัดขอบของภาชนะออกได้ด้วย

ให้ฉันบอกคุณอีกครั้งมีตัวเลือกการออกแบบมากมาย แน่นอนคุณสามารถเปลี่ยนสีได้อย่างง่ายดายในบทความนี้ ฉันจะแสดงตัวเลือกการออกแบบนี้ให้คุณดู แต่ตอนนี้คุณสามารถสร้างไอคอนของคุณเองได้อย่างง่ายดาย: สีเหลือง สีเขียว สีแดง และไอคอนอื่นๆ กระเป๋าดังที่คุณทราบ คุณสามารถเพิ่มปุ่มโซเชียลลงในไซต์ด้วยตนเองได้อย่างง่ายดาย และช่วยเราในเรื่อง html และ css ของคุณ

เมื่อรับรู้ด้วยสายตา ไอคอนของเราจึงสามารถออกแบบได้ตามความต้องการของการออกแบบเว็บไซต์แห่งใดแห่งหนึ่ง

สไปรต์ CSS เช่น http://spritepad.wearekiss.com/ หรือ http://www.spritecow.com/ดังนั้นคุณจะพบสิ่งที่เหมาะกับคุณได้อย่างง่ายดาย

ฉันพร้อมสำหรับวิโครีแล้ว

body( พื้นหลัง: url("fon.png"); color: #1aa5ca; ) .box ( margin: 250px; padding: 25px; พื้นหลัง: #; text-indent: -9999px; display: inline-block; ) .click ( พื้นหลัง: url("click.png"); ความกว้าง: 200px; ความสูง: 86px; จอแสดงผล: บล็อก; ) .vk( พื้นหลัง: url("vc.png"); ความกว้าง: 51px; ความสูง: 52px; ระยะขอบ: 10px ตำแหน่งพื้นหลัง: 0 0px, การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-transition: ความทึบ 0.5s; /* Opera */ ความทึบ: ซ้าย;) .vk:hover ( พื้นหลัง: url(" vc.png"); ความกว้าง: 51px; ความสูง: 52px; ความทึบ: 1; ) .ya( พื้นหลัง: url("ya.png"); ความกว้าง: 50px; ความสูง: 50px; ระยะขอบ: 10px; ตำแหน่งพื้นหลัง: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5 วินาที; /* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5s; ความกว้าง: 50px; ความสูง: 50px; ตำแหน่งพื้นหลัง: 0 -50px; ความทึบ: 1; ) .ma( พื้นหลัง: url("ma.png"); ความกว้าง: 51px; ความสูง: 52px; ระยะขอบ: 10px; ตำแหน่งพื้นหลัง: 0 0px; การเปลี่ยนแปลง: ความทึบ 0.5s; -moz-การเปลี่ยนแปลง: ความทึบ 0.5s; /* Firefox 4 */ -webkit-transition: ความทึบ 0.5s; /* Safari และ Chrome */ -o-transition: ความทึบ 0.5s; /* โอเปร่า */ ความทึบ: 0.6; ลอย: ซ้าย;

: url("ma.png"); ความกว้าง: 51px; ความสูง: 52px; ตำแหน่งพื้นหลัง: 0 -51px; ความทึบ: 1; - ระบุได้ตำแหน่งพื้นหลัง: 0 0px; พูดตามตรง ฉันตั้งค่าความทึบไว้ที่ 0.6 ซึ่งเป็นเพียงข้อมูลเชิงลึกเล็กน้อยเมื่อโฮเวอร์ความทึบ: 1; ชาร์จทุกอย่างใน (0.5 วินาที) การเปลี่ยนแปลง: ความทึบ 0.5s;

เมื่อวางเมาส์เหนือตำแหน่งของรูปภาพจะเปลี่ยนไป ตำแหน่งพื้นหลัง: 0 -51px;เทคนิคของ Vikorist มีความสำคัญมาก

ปรับภาพให้เหมาะสม

(ขั้นตอนน้อยลงในการเข้าสู่เซิร์ฟเวอร์)

ป.ล.

เขียนอาหารยังไง!

1. สวัสดีเพื่อนรัก

ในหน้านี้ คุณสามารถเห็นภาพปุ่มโซเชียลที่ไม่จำเป็น ซึ่งรวมอยู่ใน

1. ทุกสไตล์จะลดลงเหลือน้อยที่สุด

1. บวกกับเฟรมเวิร์ก html ที่เรียบง่าย
2. วิธีที่ฉันสอนไม่ใช่การแก้แค้นข้อความกระหายน้ำจากภายนอก
3. ไม่ก็ส่งไปแต่กลิ่นทั้งหมดจะเหมือนข้อความภายใน

ส่วนอาหารของคุณก็ทำใหม่ได้

แล้วพวกเขาก็จะไม่สามารถมองเห็นได้

การติดตั้งทำได้ง่ายมาก

สิ่งที่คุณต้องทำคือใส่โค้ด html ลงในบล็อกในโค้ดเอาต์พุตของหน้าด้านข้างของไซต์ ปรับแต่งสไปรท์ เพิ่มสไตล์ css และการติดตั้งเสร็จสมบูรณ์

คุณจะต้องนำทางไปยังไฟล์โดยใช้รูปภาพปุ่ม

เห็นได้ชัดว่าประเด็นนี้ไม่ใช่ทั้งข้อดีและข้อเสียของบล็อกพลังงานของปุ่มโซเชียล

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

การแทรกบล็อกของปุ่มโซเชียลด้วยโค้ดเอาต์พุต

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

ฉันจะแสดงตัวเลือกต่างๆ ให้คุณดู และคุณสามารถเลือกสิ่งที่คุณต้องการได้

การแทรกบล็อกในโค้ดเอาต์พุต single.php

href="javascript: void(0)" class="evernote">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");"href="javascript: void(0)" class="liveinternet">

","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");" href="javascript: เป็นโมฆะ(0)" class="digg">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");" href = "javascript: เป็นโมฆะ (0)" class = "สปริง">.

" class="bookmark" rel="sidebar"> &body=

"คลาส="อีเมล"> คำอธิบายของรหัส:มีหนึ่งบล็อก DIV iz class.share ซึ่งมีข้อความบนโซเชียลเน็ตเวิร์ก

ข้อความจะเปิดขึ้นในหน้าต่างป๊อปอัป ซึ่งได้รับการยืนยันโดยฟังก์ชัน onClick=window.open

การแทนที่ข้อความในบทความได้รับผลกระทบจากรหัสนี้- สกินมีคลาสของตัวเองโดยที่รูปภาพของปุ่มถูกกด ","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");"

href="javascript: void(0)" class="evernote"> href="javascript: เป็นโมฆะ(0)" class="digg"> ","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");" href = "javascript: เป็นโมฆะ (0)" class = "สปริง">

"คลาส="อีเมล">

และโปรดระวังว่าหลังจากใส่โค้ดแล้ว คุณจะไม่มีการเว้นวรรคหรืออักขระอื่นใด

หรือทำไมไม่ปิดโค้ด php?>.

มิฉะนั้น ให้หยุดใช้งานไซต์

ตำแหน่งที่จะวางปุ่มโซเชียลมีเดียจะถูกกำหนดผ่านคีย์ API comment_template

ปุ่มนี้ระบุสถานที่ก่อนความคิดเห็น

โค้ดปุ่มโซเชียลนั้นถูกวางไว้ในแท็กเปิดและปิดของ php ในรหัสฉันทำเครื่องหมายด้วยสีแดงผู้ทรงมีไหวพริบดี

ส่วนแทรก html

แบ่งปัน a ( display: inline-block; Vertical-align: inherit; Margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") ไม่เลื่อนซ้ำ 0px 0px โปร่งใส;) .share a.vkontakte ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -168px 0px transparent; ) .share a.google ( พื้นหลัง: url("http://test..png ") เลื่อนไม่ซ้ำ -252px 0px โปร่งใส; ) .share a.livejournal ( พื้นหลัง: url("http://test..png ") ไม่ทำซ้ำ scroll -336px 0px transparent; ) .share a.mail ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -42px 0px transparent; ) .share a.mail ( พื้นหลัง: url("http ://test..png ") ไม่มีการเลื่อนซ้ำ -294px 0px โปร่งใส; ) .share a.odnoklassniki ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -126px 0px โปร่งใส; ) .share a.pinterest ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -210px 0px transparent; ) .share a.liveinternet ( พื้นหลัง: url("http://test..png ") เลื่อนไม่ซ้ำ -378px 0px โปร่งใส;

href="javascript: void(0)" class="evernote">) .share a.evernote ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -420px 0px transparent; ) .share a.bookmark ( พื้นหลัง: url("http://test.. ) png ") ไม่มีการเลื่อนซ้ำ -462px 0px โปร่งใส; ) .share a.email ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -504px 0px transparent; ) .share a.print ( พื้นหลัง: url("http://test.. png ") ไม่เลื่อนซ้ำ -546px 0px transparent; ) .share a.digg ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -588px 0px transparent; ) .share a.spring ( พื้นหลัง: url ("http://test..png ") ไม่มีการเลื่อนซ้ำ -630px 0px โปร่งใส )

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

จากนั้นข้อความสกินจะมีคลาสของตัวเอง และข้อความสกินถูกกำหนดลักษณะที่ปรากฏของปุ่มผ่านพาวเวอร์พื้นหลัง

ตอนนี้แกนเสร็จสมบูรณ์แล้ว