Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Membuat Tombol Share Media Sosial Keren di Blog

1 komentar
Cara Mengganti Tombol Share Media Sosial di Blog

Setelah beberapa kali posting seputar interior dan dekorasi, kali ini Oom akan bagikan salah satu tips blogger yang keren abis! Yakni cara membuat tombol share media sosial di blog. Tips ini tidak murni dari Oom pribadi sih, tapi hasil modifikasi dari blog Sempetin.

Ngomong-ngomong, ini adalah posting pertama setelah blog Oom ganti template, lho. Yah, meskipun template sebelumnya sudah keren maksimal, tetap saja rasa jenuh dan bosan tak ayal datang. Membuat rasa malas yang tak tertahankan bahkan untuk sekedar ngeblog 😂

Ganti suasana itu perlu. Dan Oom rasa, ini waktu yang tepat untuk refresh tampilan blog. Kalau sebelumnya Oom pakai template buatan sendiri, kali ini Oom pakai template Blogger keren buatan oom Sugeng. LinkMagz!

Review dan penjelasan mengenai template LinkMagz akan Oom tuliskan dalam kesempatan lain. Mumpung belum lupa, kita akan kembali ke topik awal. Yakni bagaimana cara membuat (atau mengganti) tombol share media sosial di blog kamu.

Berhubung dalam tutorial blogger kali ini menggunakan template LinkMagz, silahkan sesuaikan dengan struktur template masing-masing, yaa.. Jika ada kesulitan jangan sungkan hubungi Oom.

Tombol share media sosial memang fitur yang sudah lama ada. Bahkan hampir semua template-template terbaru yang ada di internet pasti sudah memiliki fitur share ke media sosial ini. Dengan tombol ini, pengunjung blog kamu bisa membagikan artikel ke akun facebook, twitter, pinterest, atau whatsapp mereka.

Kalau dalam tutorial ini sih memakai 4 tombol yakni tombol share facebook, twitter, pinterest, dan whatsapp. Bisa dilebihin atau dikurangi? Bisa banget! Tapi modifikasi sendiri yah.

Langsung aja kita ikuti tutorial cara memasang atau mengganti tombol share media sosial di blog ini ya:

  1. Masuk ke Dashboard blogger kamu

  2. Pilih menu Tema/Theme > Edit HTML

  3. Khusus pengguna template LinkMagz, cari kode berikut: 

    #share-container{margin:20px auto 30px}#share-container::after{content:"";display:block;clear:both}.share-title{position:relative}.share-title::before{content:"";border-top:4px dotted rgba(121,128,136,0.24);position:absolute;top:12px;left:0;right:0}.share-this-pleaseeeee{font-weight:700;margin:0 0 16px;margin:0 0 1rem;display:inline-block;position:relative;padding-right:7px}#share{width:100%;text-align:center}#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;-webkit-transition:opacity .15s linear;transition:opacity .15s linear;float:left}#share a:first-child{border-radius:4px 0 0 4px}#share a:last-child{border-radius:0 4px 4px 0}#share a:hover{opacity:.8}#share a svg{width:24px;height:24px;margin-top:7px}#share a svg path{fill:#fff}.facebook{background:#3b5998}.twitter{background:#55acee}.linkedin{background:#0077b5}.pinterest{background:#cb2027}.whatsapp{background:#25d366}

  4. Ganti kode di atas dengan script berikut:

    .share-this-pleaseeeee{font-weight:700;margin:0 0 1rem;display:inline-block;position:relative;padding-right:7px;padding-left:7px}#share{width:100%;text-align:center;padding-top:50px}#share a{width:20%;height:40px;display:block;font-size:24px;color:#fff;-webkit-transition:opacity .15s linear;transition:opacity .15s linear;float:left}#share a:hover{opacity:.8}#share a svg{width:24px;height:24px;margin-top:7px}.facebook {border-color: #3a579a;border-top-style: solid;border-top-width: 3px}.twitter{fill:#55acee;background: transparent;border-top:3px solid #55acee}.linkedin{fill:#0077b5;background: transparent;border-top:3px solid #0077b5}.pinterest{fill:#cb2027;background:transparent;border-top:3px solid #cb2027}.whatsapp{fill:#25d366;background: transparent;border-top:3px solid #25d366}.total {border-color: #009688;border-top-style: solid;border-top-width: 3px}

  5. Buat kamu pengguna template lainnya, tambahkan kode di atas sebelum ]]></b:skin>

  6. Kembali ke pengguna LinkMagz, cari kode berikut:

    <div class='share-title'>
                <p class='share-this-pleaseeeee'><data:messages.share/></p>
            </div>
            <div id='share'>
            <!-- facebook -->
                <a aria-label='facebook' class='facebook' expr:href='&quot;//www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' onclick='return ! window.open(this.href);' title='facebook'>
                    <svg viewBox='0 0 24 24'>
                        <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/>
                    </svg>
                </a>
                <!-- twitter -->
                <a aria-label='twitter' class='twitter' expr:href='&quot;//twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' onclick='return ! window.open(this.href);' title='twitter'>
                    <svg viewBox='0 0 24 24'>
                        <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/>
                    </svg>
                </a>
                <a aria-label='pinterest' class='pinterest' expr:href='&quot;//pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' onclick='return ! window.open(this.href);' title='pinterest'>
                    <svg viewBox='0 0 24 24'>
                        <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/>
                    </svg>
                </a>
                <a aria-label='whatsapp' class='whatsapp' expr:href='&quot;//api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' onclick='return ! window.open(this.href);' title='whatsapp'>
                    <svg viewBox='0 0 24 24'>
                        <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
                    </svg>
                </a>
            </div>

  7. Kemudian ganti dengan script berikut:

    <div id='share'>
  <a class="total" target="_blank">
<svg viewBox="0 0 24 24"><path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" fill="#009688"></path></svg></a>
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#3a579a'/>
</svg>
</a>
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='#55acee'/>
</svg>
</a>
  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z' fill='#cb2027'/>
</svg>
</a>
  <a class='whatsapp' expr:href='&quot;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='#25d366'/>
</svg>
</a>
</div>

  8. Buat pengguna template lainnya, masukkan kode di atas tepat sebelum related post widget, yang biasanya ditandai dengan kode berikut ini:

    <div class="related-post" id="related-post">

  9. Jika tidak ada masalah, simpan tema.

Selesai sudah tutorial atau panduan cara membuat tombol share media sosial yang keren di blog kamu. Script di atas sudah Oom test dan terbukti WORK 100%. Jika kamu mengalami masalah, tinggalkan pesan di kolom komentar.

1 komentar untuk "Cara Membuat Tombol Share Media Sosial Keren di Blog"

  1. Anonim11/17/2023

    Om, kalo di template linkmagz kan itu udah ada ya icon apk berbagi gitu berada dibawah postingan, kalau mau pindahin ke atas bisa gak ya? Gimana caranya?

    BalasHapus