[Lien facile] Personnalisez avec un design discret: si affilié

2019er mars 7

Qu'est-ce qu'un lien simple?

Affiliate Easy Links facilite la création de liens vers plusieurs sites commerciaux tels que Rinker et Kaeleva.

Qu'est-ce qu'un lien simple?

C'est une fonction qui permet de créer facilement un simple lien d'affiliation de type carte (responsive). Veuillez saisir l'URL de la page produit de Rakuten Ichiba ou Amazon.co.jp ou le mot-clé de recherche dans le champ URL.

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

C'est très pratique car il est OK pour entrer l'URL d'une page de produit, mais la valeur par défaut est un peu écrasante, ou j'étais un peu faible avec le grand design.

C'est long verticalement comme ça

Cette fois, je l'ai personnalisé à un design simple et discret.

Où j'ai changé

  • Nom du produit: réduisez la taille de la police.Audacieux.
  • Taille du bouton: miniaturisation.Les marges sont également réduites.
  • Sous le bouton: suppression des larges marges.
  • Bouton: De l'orange à la crème.Ajout d'un effet tridimensionnel.
  • Au survol de la souris: mouvement ajouté pour appuyer sur le bouton.
  • Taille de l'image: réduite.

code

Personnalisation de l'apparence → Ajoutez le code suivant au CSS.

/ * Si Affiliate Easy Link Customization * / / * --- Titre du produit --- * / p.easyLink-info-name a {font-size: 16px! Important; font-weight: bold;} / * --- Taille du bouton --- * / div.easyLink-box div.easyLink-info p.easyLink-info-btn a {padding: 1px! Important;} @media screen et (min-width: 704px) {div.easyLink-box div.easyLink-info p.easyLink-info-btn a {margin-bottom: 10px! Important;}} / * --- Supprime le blanc sous le bouton --- * / div.easyLink-box {padding: 10px; } div.easyLink-box div.easyLink-info p.easyLink-info-btn a: last-child {margin-bottom: 0! important;} / * --- Couleur du bouton --- * / a.easyLink-info - btn-amazon, a.easyLink-info-btn-rakuten, a.easyLink-info-btn-yahoo {color: # 333333! important; background: # FFFDE7! important; border: 1.2px solid # 808080! important; box - shadow: insert 0 2px 0 rgba (255,255,255,0.2), 0 2px 2px rgba (0, 0, 0, 0.19);} / * --- Effet de survol de la souris --- * / a: hover.easyLink-info- btn-amazon, a: hover.easyLink-info-btn-rakuten, a: hover.easyLink-info-btn-yahoo {transform: translateY (0.1em)} / * --- Taille de l'image --- * / div. easyLink-box di v.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {max -largeur: 125px! important; hauteur-max: 125px! important;}

Le blog que j'ai utilisé comme référence
Personnalisez les liens faciles de votre affilié!Couleur du bouton, changement de texte, etc.