[ลิงก์ง่าย] ปรับแต่งเป็นการออกแบบที่เรียบง่าย: Moshimo Affiliate

2019 7 年月日 6

Easy Link คืออะไร?

Moshimo Affiliate Easy Link จะสร้างลิงก์ไปยังเว็บไซต์ช้อปปิ้งหลายแห่ง เช่น Rinker และ Kaereva ได้อย่างง่ายดาย

Easy Link คืออะไร?

นี่คือฟังก์ชันที่ช่วยให้คุณสร้างลิงค์พันธมิตรประเภทการ์ดอย่างง่าย (ตอบสนอง) ป้อน URL ของหน้าผลิตภัณฑ์ของ Rakuten Ichiba หรือ Amazon.co.jp หรือป้อนคำค้นหาในช่อง URL

https://af.moshimo.com/af/shop/service/easy-link-card

สะดวกมากเพราะสามารถป้อน URL ของหน้าผลิตภัณฑ์หนึ่งหน้าได้ แต่ค่าเริ่มต้นนั้นเกินจริงไปเล็กน้อย และฉันไม่เก่งเรื่องการออกแบบขนาดใหญ่

ยาวเป็นแนวตั้งแบบนี้

ครั้งนี้ เราปรับแต่งมันด้วยการออกแบบที่เรียบง่ายและเจียมเนื้อเจียมตัว

เปลี่ยน

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

รหัส

เพิ่มโค้ดต่อไปนี้ในการปรับแต่งลักษณะที่ปรากฏ -> CSS เพิ่มเติม

/* การปรับแต่งลิงก์ในเครือ Moshimo อย่างง่าย */ /* --- ชื่อผลิตภัณฑ์ --- */ p.easyLink-info-name a { font-size: 16px !important; font-weight:bold; } /* --- ขนาดปุ่ม --- */ div.easyLink-box div.easyLink-info p.easyLink-info-btn a{ padding:1px !important; } @media screen and (min-width: 704px) { div.easyLink-box div.easyLink-info p.easyLink-info-btn a{ margin-bottom:10px !important; }} /* --- ลบช่องว่างด้านล่างปุ่ม --- */ div.easyLink-box{padding:10px; } div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child { ขอบด้านล่าง: 0 !important; } /* --- สีของปุ่ม --- */ a.easyLink-info - btn-amazon, a.easyLink-info-btn-rakuten, a.easyLink-info-btn-yahoo { สี:#333333 !important; background:#FFFDE7 !important; shadow: inset 1.2 808080px 0 rgba(2 ), 0 255,255,255,0.2px 0px rgba(2, 2, 0, 0); } /* --- เอฟเฟกต์การเลื่อนเมาส์ --- */ a:hover.easyLink-info- btn-amazon, a:hover.easyLink-info-btn -rakuten, a:hover.easyLink-info-btn-yahoo{ การแปลง: translateY(0em)} /* --- ขนาดภาพ --- */ div. easyLink-box div.easyLink-img, div.easyLink- กล่อง div.easyLink-img p.easyLink-img-box, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img- pht{ ความกว้างสูงสุด: 0.19px !important; max-height : 0.1px !สำคัญ;

บล็อกสำหรับการอ้างอิงของคุณ
ปรับแต่งลิงค์พันธมิตรของคุณ!เปลี่ยนสีปุ่ม ข้อความ ฯลฯ