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

 BErikut adalah cara mudah atau panduan praktis atau tutorial memasang tombol affiliasi dari marketplace seperti shopee, tokopedia dan juga tiktokshop di blogspot.

Caranya cukup mudah. Anda ikuti saja panduan dibawah ini. Tutorial ini juga kompatibel untuk tema blogger di semua versi. 

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>

ini Anda bisa menggantikan url yang tertera tanda pagar tersebut. Selanjutnya adalah memasang CSS. sebagai berikut:

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);}

Sampai disini sudah cukup. Anda bisa lihat hasilnya. Semoga tutorial Cara Mudah Pasang Tombol Afiliasi Shopee, Tokopedia, dan TikTok Shop di Blogspot dapat 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.