Cara Menambahkan Tombol Share Kustom di Postingan Blog

Halo semuanya! Selamat datang Kembali di Situs Seonxyrbae

Jika kalian sedang mencari tombol bagikan yang menarik mungkin kalian bisa mencoba versi yang saya buat ini.

Dipostingan kali ini saya akan membagikan bagaimana Cara Menambahkan Tombol Share Kustom di Postingan Blog Anda.

Bagaimana Cara Menambahkannya :-

Jadi, untuk menambahkan Tombol Share Kustom di blogger Anda harus mengikuti proses berikut di bawah ini dengan tepat.

Terlebih lagi, dengan bantuan langkah-langkah ini, Anda dapat dengan mudah menambahkan fitur ini di situs web blogger Anda.

Ikuti langkah berikut untuk membuat nya

Login ke akun - Blogger

Pergi ke Theme

Klik - Edit HTML

cari kode - </head> atau &lt;/head&gt;

Salin dan tempelkan css dibawah tepat di atas </head> atau &lt;/head&gt;

Setelah itu salin kode dan tempelkan kode HTML tombol share dibawah di tempat Anda ingin menambahkan tombol Share itu

Di bawah ini adalah kode CSS dan HTML dari setiap tombol Share yang saya sediakan

| Facebook

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Fbbutton{background:#3b5998}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Fbbutton'><i class='fa fa-facebook'></i>Facebook</button></a>

| Whatsapp

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Whbutton{background:#25D366}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Whbutton'><i class='fa fa-whatsapp'></i>Whatsapp</button></a>

| Twitter

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Twbutton{background:#1DA1F2}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Twbutton'><i class='fa fa-twitter'></i>Twitter</button></a>

| Telegram

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Tebutton{background:#0088cc}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://t.me/share/url?url=&quot; + data:blog.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noreferrer'><button class='Sharebutton' id='Tebutton'><i class='fa fa-telegram'></i>Telegram</button></a>

| Email

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Embutton{background:#008080}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:blog.url.canonical'><button class='Sharebutton' id='Embutton'><i class='fa fa-envelope-o'></i>Email</button></a>

| Pinterest

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Pibutton{background:#E60023}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:blog.url.canonical + &quot;&amp;media=&quot; + data:blog.postImageUrl' rel='nofollow noreferrer'><button class='Sharebutton' id='Pibutton'><i class='fa fa-pinterest-p'></i>Pinterest</button></a>

| Tumblr

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Tubutton{background:#34526f}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Tubutton'><i class='fa fa-tumblr'></i>Tumblr</button></a>

| Linkedin

<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Libutton{background:#0077b5}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

<a expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Libutton'><i class='fa fa-linkedin'></i>Linkedin</button></a>

Kesimpulan :-

Cukup sekian dulu Tutorial Cara Menambahkan Tombol Share Kustom di Blogger. Jika kalian ingin request tutorial silahkan pergi ke Kolom Komentar