-->
Load more

Membuat Tombol Share Media Sosial Yang Responsive Untuk Meningkatkan Trafik Blog

Shares ShareTweet
Cara Membuat Tombol Share Media Sosial Yang Responsive Untuk Meningkatkan Trafik Blog

Membuat Tombol Share Media Sosial Yang Responsive Untuk Meningkatkan Trafik Blog Untuk meningkatkan jumlah pengunjung blog tentu beberapa blogger memiliki cara mereka masing-masing. Dan salah satunya adalah dengan menambahkan tombol share media sosial pada blog mereka, ini ditujukan agar pengunjung dapat membagikan konten yang dimiliki oleh blogger ke akun media sosial miliknya, jika sang pengunjung merasa konten tersebut layak untuk dibagikan. 

Maka dari itu saya sarankan untuk membuat konten-konten yang berkualitas agar pengunjung tertarik membagikannya sehingga jumlah pengunjung pada blog kita dapat bertambah. Lalu bagaimana cara membuat tombol share media sosial, Berikut langkah-langkah memasang tombol share media sosial tersebut.

1. Log In ke https://sumo.com/register untuk membuat akun dan mendaftarkan link website kamu.

2. Copy kode HTML yang tertera di sana dengan cara mengkliknya.

3. Masuk ke blog kamu, klik Tema > Edit HTML. Cari kode </body> dengan menekan Ctrl + F di Keyboard lalu EnterPaste kode HTML yang telah kamu copy sebelumnya di atas kode </body>. Simpan tema. Klik Kembali Ok.

4. Kembali ke Sumo klik Start Using Sumo. Kamu akan diarahkan untuk membuat banner Subscribe, ikuti langkah-langkahnya (jika diinginkan). Jika tidak, refresh halaman. Klik Social Share Active Now.

5. Selesai. Cek blog kamu untuk melihat hasilnya.

Catatan:Untuk mengedit tombol share, di menu Social Share > Klik Setting. Di sini kalian bisa mengedit tombol share sesuka kalian.
Jika anda kurang puas dengan tampilan tombol share media sosial diatas, anda juga dapat mencoba tombol share lainnya. Seperti tombol share vertikal dan horizontal yang akan admin bahas dibawah ini.


Tombol Share Melayang Responsive Vertikal

1. Buka Blogger dan masuk ke Dashbor anda
2. Masuk Tata Letak → Tambahkan Gadget
3. Gunakan HTML/JavaScript
4. Kemudian copy Script dibawah ini dan pastekan di HTML/JavaScript
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.venomku.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
5. Simpan dan Lihat Blog anda

Anda juga dapat menyesuaikan posisinya pada bagian yang saya tandai. Top 150px artinya jarak Tombol Share Melayang ini 150px dari atas.
Sekarang apabila anda buka Blog anda floating share button anda sudah muncul. Tapi masalahnya tombol tersebut juga akan muncul pada tampilan ponsel mobile, hal ini akan menghalangi tulisan diblog anda. Jadi anda harus membuatnya Tombol Share Melayang Responsive agar bisa tersembunyi ditampilan mobile. Anda hanya perlu menambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> untuk membuatnya jadi responsive :
/* Untuk menyembunyikan venomku vertical share ketika ukuran layar kurang dari 980 */
@media screen and (max-width: 980px) {
    .a2a_floating_style.a2a_vertical_style { display: none; }
}

Tombol Share Melayang Responsive Horizontal

Apabila anda tidak suka dengan tampilan tombol share melayang disamping layar anda dapat meletakkan dibawah bagian layar dengan menggunakan script untuk HTML/JavaScript dibawah ini :
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

Untuk membuatnya jadi responsive, Tambahkan kode CSS sama seperti Tombol Share Vertical.
Sekian tutorial memasang tombol share pada halaman blog, semoga bermanfaat. Dan jangan lupa terus kunjungi blog Ahlitech untuk mendapatkan tutorial-tutorial menarik lainnya yang dapat membantu anda dalam meningkatkan produktifitas dari blog.

Tags

Shares ShareTweet

Hallo, Kami Akan Selalu Berupaya Untuk Selalu Memberikan Informasi Yang Anda Cari

Sedang Dibincangkan