Cara Mudah Pasang Tombol Afiliasi Shopee, Tokopedia, dan TikTok Shop di Blogspot

Menambahkan kode HTML

Tempelkan kode HTML ke dalam postingan di mode Tampilan HTML.

Shopee (dengan Label & Ikon)

<a class="elementskit_button shopee" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M15.26 16.93c.19-1.55-.81-2.54-3.45-3.39-1.28-.44-1.88-1.01-1.87-1.8.05-.87.87-1.51 1.94-1.53.85 0 1.68.26 2.38.74.1.06.16.05.22-.03.07-.12.26-.41.32-.51.04-.07.05-.15-.06-.23-.15-.11-.58-.34-.81-.44-.66-.28-1.36-.42-2.08-.42-1.58 0-2.82 1-2.93 2.34-.07.96.41 1.74 1.43 2.34.22.13 1.39.59 1.85.74 1.47.46 2.23 1.27 2.05 2.23-.16.87-1.07 1.43-2.33 1.44-1-.04-1.89-.44-2.59-.98l-.12-.09c-.09-.07-.18-.06-.24.02-.04.06-.31.45-.38.55-.06.09-.03.14.04.19.29.24.68.51.94.64.73.37 1.52.57 2.34.6.59.03 1.17-.07 1.72-.29.91-.38 1.49-1.15 1.61-2.11ZM12 3.24c-1.71 0-3.1 1.61-3.17 3.63h6.34C15.1 4.85 13.71 3.24 12 3.24Zm6.49 18.68H5.37c-.89-.03-1.54-.75-1.63-1.65v-.16L3.15 7.27a.38.38 0 0 1 .35-.41h4.13c.1-2.67 2.02-4.79 4.36-4.79s4.26 2.12 4.36 4.79h4.11c.21 0 .38.17.38.38v.02l-.64 12.89v.11c-.08.9-.82 1.63-1.72 1.66Z"></path></svg> Beli di Shopee</a>

Tokopedia (dengan Label & Ikon)

<a class="elementskit_button tokopedia" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M20.09 5.71c-1.27 0-2.54-.07-3.81.04-.32-2.08-2.1-3.67-4.27-3.67S8.06 3.66 7.72 5.73c-1.28-.1-2.54-.01-3.82-.01h-.7v16.21h11.75c3.21 0 5.83-2.62 5.83-5.83V5.71h-.7Zm-8.08-2.46c1.55 0 2.84 1.13 3.11 2.61h-.02c-1.03.09-2.17.34-3.1.81-.99-.5-2-.77-3.11-.85.3-1.46 1.57-2.57 3.12-2.57Zm8.08 12.49v.36c0 2.82-2.31 5.13-5.13 5.13H3.91V6.41c1.2 0 2.5-.05 3.77.01l1.16.09c1.19.13 2.21.4 3.16.95.87-.5 2.02-.77 3.16-.91l1.16-.1c1.24-.07 2.54-.04 3.77-.04v9.32Zm-4.3-7.3a4.12 4.12 0 0 0-3.8 2.54 4.11 4.11 0 1 0-3.8 5.68c.59 0 1.14-.13 1.64-.35l.26.28 1.52 1.61.37.4.37-.4 1.52-1.61.26-.28c.5.22 1.06.35 1.64.35a4.11 4.11 0 1 0 0-8.22Zm-3.32 6.53c-.16-.03-.32-.06-.48-.06s-.32.03-.48.06c.19-.26.36-.54.48-.84.13.3.29.58.48.84Zm-4.28 1c-1.89 0-3.41-1.53-3.41-3.41s1.53-3.41 3.41-3.41 3.41 1.53 3.41 3.41-1.53 3.41-3.41 3.41Zm3.8 1.89-1.52-1.61c.32-.55.92-.83 1.52-.82.6 0 1.2.27 1.52.82l-1.52 1.61Zm3.8-1.89c-1.88 0-3.41-1.53-3.41-3.41s1.53-3.41 3.41-3.41 3.41 1.53 3.41 3.41-1.53 3.41-3.41 3.41Zm-4.96-3.33c0 1.22-.99 2.2-2.2 2.2s-2.2-.99-2.2-2.2c0-.41.11-.79.3-1.11a1.06 1.06 0 0 0 2.04-.4c0-.26-.1-.5-.25-.69h.11c1.22 0 2.2.99 2.2 2.2Zm4.53-2.2h-.11c.16.18.25.42.25.69 0 .59-.47 1.06-1.06 1.06-.44 0-.83-.27-.98-.66a2.2 2.2 0 0 0 1.9 3.31c1.21 0 2.2-.99 2.2-2.2s-.99-2.2-2.2-2.2Z"></path></svg> Beli di Tokopedia</a>

TikTok Shop (dengan Label & Ikon)

<a class="elementskit_button tiktok" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12.43 2.1c1.08-.02 2.16 0 3.23-.02.07 1.26.52 2.55 1.45 3.45.93.92 2.23 1.34 3.51 1.48v3.33c-1.19-.04-2.39-.29-3.47-.8-.47-.21-.91-.49-1.34-.77 0 2.41 0 4.83-.02 7.23a6.35 6.35 0 0 1-1.12 3.26c-1.08 1.59-2.96 2.62-4.89 2.65-1.18.07-2.36-.26-3.37-.85-1.67-.98-2.84-2.79-3.02-4.72-.02-.41-.02-.83 0-1.23.15-1.57.93-3.08 2.13-4.1 1.37-1.19 3.29-1.76 5.08-1.42.02 1.22-.03 2.45-.03 3.67-.82-.26-1.78-.19-2.5.31-.52.34-.92.86-1.12 1.45-.17.42-.12.88-.12 1.33.2 1.36 1.5 2.5 2.89 2.37.93 0 1.81-.55 2.29-1.33.16-.27.33-.55.34-.88.08-1.48.05-2.95.06-4.43 0-3.33 0-6.65.02-9.98Z"></path></svg> Beli di TikTok Shop</a>

Shopee (Hanya Ikon)

<a aria-label="Button" class="elementskit_button icon_button shopee" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M15.26 16.93c.19-1.55-.81-2.54-3.45-3.39-1.28-.44-1.88-1.01-1.87-1.8.05-.87.87-1.51 1.94-1.53.85 0 1.68.26 2.38.74.1.06.16.05.22-.03.07-.12.26-.41.32-.51.04-.07.05-.15-.06-.23-.15-.11-.58-.34-.81-.44-.66-.28-1.36-.42-2.08-.42-1.58 0-2.82 1-2.93 2.34-.07.96.41 1.74 1.43 2.34.22.13 1.39.59 1.85.74 1.47.46 2.23 1.27 2.05 2.23-.16.87-1.07 1.43-2.33 1.44-1-.04-1.89-.44-2.59-.98l-.12-.09c-.09-.07-.18-.06-.24.02-.04.06-.31.45-.38.55-.06.09-.03.14.04.19.29.24.68.51.94.64.73.37 1.52.57 2.34.6.59.03 1.17-.07 1.72-.29.91-.38 1.49-1.15 1.61-2.11ZM12 3.24c-1.71 0-3.1 1.61-3.17 3.63h6.34C15.1 4.85 13.71 3.24 12 3.24Zm6.49 18.68H5.37c-.89-.03-1.54-.75-1.63-1.65v-.16L3.15 7.27a.38.38 0 0 1 .35-.41h4.13c.1-2.67 2.02-4.79 4.36-4.79s4.26 2.12 4.36 4.79h4.11c.21 0 .38.17.38.38v.02l-.64 12.89v.11c-.08.9-.82 1.63-1.72 1.66Z"></path></svg></a>

Tokopedia (Hanya Ikon)

<a aria-label="Button" class="elementskit_button icon_button tokopedia" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M20.09 5.71c-1.27 0-2.54-.07-3.81.04-.32-2.08-2.1-3.67-4.27-3.67S8.06 3.66 7.72 5.73c-1.28-.1-2.54-.01-3.82-.01h-.7v16.21h11.75c3.21 0 5.83-2.62 5.83-5.83V5.71h-.7Zm-8.08-2.46c1.55 0 2.84 1.13 3.11 2.61h-.02c-1.03.09-2.17.34-3.1.81-.99-.5-2-.77-3.11-.85.3-1.46 1.57-2.57 3.12-2.57Zm8.08 12.49v.36c0 2.82-2.31 5.13-5.13 5.13H3.91V6.41c1.2 0 2.5-.05 3.77.01l1.16.09c1.19.13 2.21.4 3.16.95.87-.5 2.02-.77 3.16-.91l1.16-.1c1.24-.07 2.54-.04 3.77-.04v9.32Zm-4.3-7.3a4.12 4.12 0 0 0-3.8 2.54 4.11 4.11 0 1 0-3.8 5.68c.59 0 1.14-.13 1.64-.35l.26.28 1.52 1.61.37.4.37-.4 1.52-1.61.26-.28c.5.22 1.06.35 1.64.35a4.11 4.11 0 1 0 0-8.22Zm-3.32 6.53c-.16-.03-.32-.06-.48-.06s-.32.03-.48.06c.19-.26.36-.54.48-.84.13.3.29.58.48.84Zm-4.28 1c-1.89 0-3.41-1.53-3.41-3.41s1.53-3.41 3.41-3.41 3.41 1.53 3.41 3.41-1.53 3.41-3.41 3.41Zm3.8 1.89-1.52-1.61c.32-.55.92-.83 1.52-.82.6 0 1.2.27 1.52.82l-1.52 1.61Zm3.8-1.89c-1.88 0-3.41-1.53-3.41-3.41s1.53-3.41 3.41-3.41 3.41 1.53 3.41 3.41-1.53 3.41-3.41 3.41Zm-4.96-3.33c0 1.22-.99 2.2-2.2 2.2s-2.2-.99-2.2-2.2c0-.41.11-.79.3-1.11a1.06 1.06 0 0 0 2.04-.4c0-.26-.1-.5-.25-.69h.11c1.22 0 2.2.99 2.2 2.2Zm4.53-2.2h-.11c.16.18.25.42.25.69 0 .59-.47 1.06-1.06 1.06-.44 0-.83-.27-.98-.66a2.2 2.2 0 0 0 1.9 3.31c1.21 0 2.2-.99 2.2-2.2s-.99-2.2-2.2-2.2Z"></path></svg></a>

TikTok Shop (Hanya Ikon)

<a aria-label="Button" class="elementskit_button icon_button tiktok" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12.43 2.1c1.08-.02 2.16 0 3.23-.02.07 1.26.52 2.55 1.45 3.45.93.92 2.23 1.34 3.51 1.48v3.33c-1.19-.04-2.39-.29-3.47-.8-.47-.21-.91-.49-1.34-.77 0 2.41 0 4.83-.02 7.23a6.35 6.35 0 0 1-1.12 3.26c-1.08 1.59-2.96 2.62-4.89 2.65-1.18.07-2.36-.26-3.37-.85-1.67-.98-2.84-2.79-3.02-4.72-.02-.41-.02-.83 0-1.23.15-1.57.93-3.08 2.13-4.1 1.37-1.19 3.29-1.76 5.08-1.42.02 1.22-.03 2.45-.03 3.67-.82-.26-1.78-.19-2.5.31-.52.34-.92.86-1.12 1.45-.17.42-.12.88-.12 1.33.2 1.36 1.5 2.5 2.89 2.37.93 0 1.81-.55 2.29-1.33.16-.27.33-.55.34-.88.08-1.48.05-2.95.06-4.43 0-3.33 0-6.65.02-9.98Z"></path></svg></a>

Menambahkan kode CSS

Tambahkan kode CSS di atas tag ]]></b:skin> di dalam template.

.elementskit_wrapper {display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:16px 0;}.elementskit_button {display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:100px;outline:none;font-size:14px;color:#6442d6;line-height:1.3;height:40px;padding:0 16px;transition:all .2s cubic-bezier(.2,0,0,1);overflow:hidden;position:relative;}.elementskit_button.shopee {background-color:#ee4d2d;color:#ffffff;}.elementskit_button.tokopedia {background-color:#00AA5B;color:#ffffff;}.elementskit_button.tiktok {background:#040404;color:#ffffff;}.elementskit_button svg {width:18px;height:18px;}.elementskit_button.icon_button {width:40px;height:40px;padding:0;}.elementskit_button.icon_button svg {width:24px;height:24px;}.elementskit_button.filled:not(:active):hover {box-shadow:0px 3px 1px -2px rgb(0 0 0 / 0.2), 0px 2px 2px 0px rgb(0 0 0 / 0.14), 0px 1px 5px 0px rgb(0 0 0 / 0.12);}

Terima kasih telah mengikuti tutorial Cara Mudah Pasang Tombol Afiliasi Shopee, Tokopedia, dan TikTok Shop di Blogspot. Semoga panduan ini membantu Anda dalam menambahkan tombol afiliasi yang menarik dan fungsional di blog Anda, sehingga dapat meningkatkan peluang konversi dan penjualan.

Jangan lupa untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan, saran, atau ingin berbagi pengalaman setelah mencoba tutorial ini.