Skip to content Skip to sidebar Skip to footer
Home / #Blogging / Template
Cara Menambahkan Widget Follow Medsos Di Sidebar Blogger

Cara Menambahkan Widget Follow Medsos Di Sidebar Blogger

Posted by Blog Buttatoa Post a Comment

Blog Buttatoa | Membuat Widget Sidebar Follow Medsos - Menambahkan widget follow media sosial ke blog kalian dapat menumbuhkan dan meningkatkan keterlibatan komunitas terhadap konten yang kalian buat. Di Era saat ini, dimana media digital online menjadi kebutuhan mutlak, maka media sosial menjadi sangat penting karena memungkinkan orang menemukan dan mengakses website kalian dimana saja.

Widget Follow Medsos

Bahkan apabila orang-orang tersebut tidak mengenal dan mengetahui website kalian, mereka yang memiliki akses terhadap media sosial bisa saja saling menjangkau dan bertautan dengan kalian di media sosial tersebut. Ini merupakan cara yang mudah dan cepat untuk menjangkau audiens dan memperkenalkan website kalian.

Dalam postingan kali ini, saya akan menunjukkan cara menambahkan widget tombol follow media sosial ke sidebar Blogger kalian. Tombol follow media sosial ini memungkinkan pembaca mengikuti halaman dan profil sosial kalian. Di sini kalian bisa menambahkan layanan tombol follow media sosial paling populer seperti Facebook, Pinterst, Instagram, Telegram, Youtube, dll.

{tocify} $title={Table of Contents}

Widget tombol ikuti sosial ini dirancang dengan HTML dan CSS, yang 100% responsif dan hanya perlu memasangnya melalui widget sidebar. Selain itu, icon yang digunakan adalah icon SVG, tidak menggunakan icon font-awesome. Penggunaan icon SVG ini mempunyai beberapa kelebihan dibandingkan JPEG, PNG, GIF, diantaranya:

  1. Gambar SVG lebih kecil dibandingkan dengan JPEG, PNG, GIF, sehingga lebih ringan dan proses loading lebih cepat.
  2. SVG adalah file vektor sehingga mudah diskalakan.
  3. File SVG juga dapat terindeks oleh Google.
  4. Gambar SVG menggunakan vektor sehingga dapat menjadi kelas atas tanpa kehilangan kualitas apa pun.
  5. CSS juga dapat dikolaborasikan bersama dengan SVG.

Memasang Widget Follow Media Sosial Sidebar Blogger

Untuk membuat dan memasang widget follow media sosial di sidebar blogger, caranya cukup mudah. Kalian ikuti langkah-langkah berikut ini:

1.  Langkah pertama, kalian menuju ke dashboard blogger, lalu pilih menu Tata Letak. Kemudian buat widget baru dengan mengklik Tambahkan Gadget.

2. Ada bermacam gadget yang ditampilkan, kalian pilih HTML/JavaScript.

3. Copy script dibawah ini dan masukkan ke bagian kolom konten. Sementara judulnya kalian bisa menambahkan "Follow Us" atau nama lain yang kalian suka.

<style>
.followbtn {
width:calc(50% - 25px);
display:inline-block;
text-align:center;
background-color:rgba(191, 186, 186, 0.15);
box-shadow: 0 0 1px #f46013;
border-radius:50px;
margin: 0 0 10px 5px;
font-weight: bold;
font-size: 14px !important;
padding:8px;}
</style>
<a class="followbtn" href="https://id fanspage fb kalian" rel='nofollow' target='_blank' title="Fanspage FB" />
<svg style="width:24px;height:24px;margin:-7px;padding-right:15px" viewbox="0 0 24 24">
    <path fill="currentColor" 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" />
</path></svg>Facebook</a>

<a class="followbtn" href="https://id pinterest" rel='nofollow' target='_blank' title="Follow Pinterest" />
<svg style="width:24px;height:24px;margin:-7px;padding-right:15px" viewbox="0 0 24 24">
    <path fill="currentColor" 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" />
</path></svg>Pinterest</a>

<a class="followbtn" href="https://id instagram kalian" rel='nofollow' target='_blank' title="Follow Instagram" />
<svg style="width:22px;height:22px;margin:-7px;padding-right:15px" viewbox="0 0 24 24">
    <path fill="currentColor" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</path></svg>Instagram</a>

<a class="followbtn" href="https://id telegram kalian" rel='nofollow' target='_blank' title="Telegram Chat" />
<svg style="width:22px;height:22px;margin:-7px;padding-right:15px" viewbox="0 0 26 26">
    <path fill="currentColor" d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12S5.373 0 12 0s12 5.373 12 12zM12.43 8.859c-1.167.485-3.5 1.49-6.998 3.014c-.568.226-.866.447-.893.663c-.046.366.412.51 1.034.705c.085.027.173.054.263.084c.613.199 1.437.432 1.865.441c.389.008.823-.152 1.302-.48c3.268-2.207 4.955-3.322 5.061-3.346c.075-.017.179-.039.249.024c.07.062.063.18.056.212c-.046.193-1.84 1.862-2.77 2.726c-.29.269-.495.46-.537.504c-.094.097-.19.19-.282.279c-.57.548-.996.96.024 1.632c.49.323.882.59 1.273.856c.427.291.853.581 1.405.943c.14.092.274.187.405.28c.497.355.944.673 1.496.623c.32-.03.652-.331.82-1.23c.397-2.126 1.179-6.73 1.36-8.628a2.111 2.111 0 0 0-.02-.472a.506.506 0 0 0-.172-.325c-.143-.117-.365-.142-.465-.14c-.451.008-1.143.249-4.476 1.635z'/>
</path></svg>Telegram</a>

<a class="followbtn" href="https://id youtube kalian" rel='nofollow' target='_blank' title="Youtube Channel" />
<svg style="width:24px;height:24px;margin:-7px;padding-right:15px" viewbox="0 0 24 24">
    <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
</path></svg>Youtube</a>

<a class="followbtn" href="https://id blog kalian" rel='nofollow' target='_blank' title="Follow Your Blog" />
<svg style="width:22px;height:22px;margin:-7px;padding-right:15px" viewbox="0 0 24 24">
    <path fill="currentColor" d="M13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V6C22 4.89 21.1 4 20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19M4 8V6L12 11L20 6V8L12 13L4 8M20 15V18H23V20H20V23H18V20H15V18H18V15H20Z" />
</path></svg>Blogger</a>

Script HTML dan CSS diatas telah disesuaikan dengan Template VioMagz v4.9.0 Redesign👀. Bila kalian menggunakan template lainnya, ada beberapa yang perlu kalian sesuaikan, yaitu:

  • Pada CSS width:calc(50% - 25px);, kalian sesuaikan dengan lebar widget sidebar tempalate kalian.
  • Ubah nilai pada background-color:rgba(191, 186, 186, 0.15);, dengan background pilihan kalian.
  • Ubah nilai pada border-radius:50px;, untuk mendapatkan ukuran lengkungan pinggiran borders.
  • Ubah nilai pada margin: 0 0 10px 5px;, untuk mengatur jarak antara tombol follow medsos.
  • Ubah nilai pada font-size: 14px !important;, untuk mengganti ukuran huruf.
  • Ubah nilai pada padding:8px;, untuk memberikan jarak antara text dan garis border pada tombol follow medsos.

Sementara untuk script HTML dibawahnya ada beberapa yang perlu kalian sesuaikan, yaitu:

  • Tambahkan margin:-7px;padding-right:15px, dan ubah masing-masing nilainya untuk mengatur jarak antara icon dan text medsos pada tombol follow.
  • Ubah nilai pada fill="currentColor", untuk mengganti warna icon SVG.
  • Ubah nilai pada style="width:24px;height:24px;, untuk memperkecil atau memperbesar ukuran icon SVG.

Menambahkan Tombol Follow Medsos Lainnya

Jika ingin menambahkan tombol follow medsos lainnya yang tidak ada pada script diatas, kalian bisa lakukan dengan cara:

Menambahkan Kode Icon SVG

Untuk menambahkan kode icon SVG untuk medsos lainnya, kalian ikuti langkah berikut:

  1. Kalian perlu mengakses ke MaterialDesignIcons.Com. Ketikkan nama medsos yang ingin kalian cari pada kolom pencarian lalu tekan Enter.

  2. Selanjutnya kalian pilih icon yang ingin kalian gunakan. Dibagian Advanced Export, kalian pilih View SVG 👉Inline SVG For HTML.

  3. Copy code icon SVG tersebut, lalu tambahkan pada script HTML diatas. Pastekan dan replace kode icon SVG sebelumnya.

  4. Sebagai contoh untuk icon twitter tersebut, kalian hanya perlu menambahkan kode html yang berwarna biru, sehingga hasilnya akan seperti dibawah ini: 

    <a class="followbtn" href="https://id twitter kalian" rel='nofollow' target='_blank' title="Follow Twitter" />
    <svg style="width:24px;height:24px;margin:-7px;padding-right:15px" viewBox="0 0 24 24">
        <path fill="currentColor" 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" />
    </path></svg>Twitter</a>

Menambahkan Link Follow Media Sosial

Untuk tahapan berikutnya, kalian hanya perlu menambahkan id medsos, agar ketika tombol follow medsos tersebut di klik akan mengarahkan link ke akun medsos kalian. Berikut saya contohkan, cara melihat dan mendapatkan id medsos:

  1. Facebook

    Untuk facebook, kalian sebaiknya membuat halaman fanspage tersendiri, tempat kalian membagi tautan postingan/artikel kalian sendiri. Di halaman tersebut, kalian bisa mengundang teman untuk mengikuti dan me-like postingan kalian.

    Untuk mendapatkan link atau id fanspage facebook tersebut, kalian bisa melihatnya dengan cara: buka facebook kalian dan masuk ke halaman fb yang kalian kelola. Setelah itu copy link halaman tersebut.

  2. Pinterest

    Sama seperti Fanspage facebook diatas, untuk dapatkan link atau id pinterest kalian, cukup login ke akun pinterest kemudian klik icon atau logo profil pinterest kalian. Copy link profil yang ditampilkan.

  3. Instagram

    Caranya sama dengan yang diatas, login ke akun instagram kemudian klik icon atau logo profil instgram kalian. Copy link profil yang ditampilkan.

  4. Telegram

    Untuk telegram, masuk ke akun kalian, lalu klik setting. Di bagian setting ini, klik edit profile lalu edit username telegram. Akan ditampilkan nantinya link yang untuk memulai chat dengan kalian. Copy link tersebut.

  5. Youtube

    Masuk ke akun youtube kalian, lalu klik dibagian icon profil, pilih channel anda. Copy link yang ditampilkan.

  6. Twitter

    Untuk twitter juga hampis sama. Masuk ke akun kalian lalu klik icon profil. Copy link yang ditampilkan.

  7. Blogger

    Blogger juga cukup mudah. Kalian copy link berikut lalu ganti id blog berwarna biru dengan id blog kalian. http://www.blogger.com/follow-blog.g?blogID=310xxx6102xxxx04390.

 

Kesimpulan

Menambahkan widget follow media sosial pada blog kalian memberikan manfaat yang signifikan terhadap peningkatan jumlah pengunjung pada blog itu sendiri dan tentu saja akan mempengaruhi pula peningkatan CTR dan pendapatan. Bila kalian memerlukannya, silahkan membaca "5 Cara Efektif Meningkatkan Traffik Blog Melalui Media Sosial👀" yang telah dibahas sebelumnya. Semoga bermanfaat, Wassalam.


Show Comments

Post a Comment for "Cara Menambahkan Widget Follow Medsos Di Sidebar Blogger"