Cara Membuat Share Button Melayang di Blogger | AKTIVITAS WEB

(Blogging), (Tips dan Trik)

Traffic dalam dunia web/blog sangatlah penting untuk kemajuan suatu blog/web tersebut. Biasanya web atau blog dengan traffic tinggi dianggap sebagai situs yang baik/bagus. Mengapa dikatakan bagus?, karena faktor penentu utama blog bertraffic tinggi adalah karena memiliki konten yang bagus dan menarik.

Traffic terhadap suatu situs (web/blog) terbagi menjadi 2, yaitu :

1. Traffic Organik, adalah traffic terhadap situs yang bersifat asli (alamiah) yang didapatkan tanpa melakukan pembayaran atau tanpa jasa pihak lainnya. Biasanya traffic ini identik dengan traffic yang bersumber langsung dari mesin pencari. Misalnya, anda membaca artikel ini karena anda mencari mengenai "Cara Membuat Share Button Melayang" di Google. Nah, andalah yang dimaksud dengan traffic Organik tersebut.
2. Traffic Non-organik, adalah traffic yang muncul karena melakukan pembayaran terhadap suatu pihak untuk membawa pengunjung kewebsite. Secara sederhananya, traffic non-organik adalah traffic yang muncul karena beriklan. Jika anda mengiklankan konten anda diprogram pengiklan seperti Google Ads/Fb Ads/Ig Ads maka traffic yang dibawa oleh merekalah yang disebut dengan traffic Non-organik.

Saat ini, ada banyak sekali cara-cara yang digunakan oleh setiap pihak demi meningkatkan traffic situsnya. Karena traffic itu sangat penting bagi suatu situs(web/blog).
Nah, diartikel kali ini kita akan membahas mengenai salah satu cara meningkatkan traffic situs kita, yaitu dengan Membuat Share Button.

 Apa itu Share Button ? 

Berdasarkan kata, Share berarti Bagi atau Bagikan sedangkan Button berarti tombol, jadi Share Button adalah tombol yang berfungsi untuk membagikan. Apa yang dibagikan ?, tentu saja yang dibagikan adalah konten yang sedang dibaca atau dilihat. Cara kerja dari Share Button sebenarnya sama dengan membagikan suatu link ke sosial media, namun dengan adanya share button maka prosesnya lebih mudah. Umpamanya begini, jika copy-paste suatu link dianggap manual, maka Share button dianggap sebagai otomatis.

 Bagaimana Hubungan Share Button dengan Traffic Blog/Web ? 

Hubungannya adalah dengan adanya share button disuatu situs, maka para pengunjung atau pembaca dapat dengan mudah membagikan artikel/postingan tersebut kedalam sosial media yang telah disediakan. Nah, jadi secara tidak langsung dengan mereka membagikan artikel tersebut ke sosial media mereka, maka mereka juga membawa pengunjung lainnya ke situs anda, sehingga traffic terhadap situs anda tersebut akan meningkat.

Nah, setelah anda mengerti apa itu Share Button dan bagaimana hubungannya dengan traffic situs, maka kita akan lanjut ke cara pembuatannya.

Perhatian !!!
Cara yang kami bagikan ini adalah cara yang kami gunakan terhadap web ini. Jadi Share Button yang kami bagikan, persis dengan Share Button yang kami gunakan, jadi jangan khawatir jika ada kesalahan dalam penerapannya silahkan tanyakan dikomentar.

Sebelumnya, Berikut tampilan Share Button yang akan kita buat :

Versi Desktop

Versi Mobile

Nah, dapat anda lihat jika pengunjung menggunakan Desktop(labtop/computer) maka Share Button akan berada disebelah kanan, dan jika pengunjung menggunakan Mobile(Handphone) maka Share Button akan berada dibawah.

Oke, langsung saja kita ke langkah-langkahnya.

 Cara Membuat Share Button di Blogger 

1. Langkah pertama sudah pasti Login ke Akun Blogger anda.


2. Kemudian, masuk ke menu Tema / Template dan klik Edit HTML.


3. Selanjutnya copy kode dibawah ini, dan pastekan diatas </head> (kode pertama ini untuk bagian style/css nya).
<style type="text/css">
/*Share Button ala AKTIVITAS WEB */
.crist-wrapper-share{right:0;position: fixed;background-color: white;border: 2px solid green;bottom:30%;overflow:auto;margin: 0px;font-size: 15px;color: black;text-align: center;padding:5px;z-index:100;}
.crist-wrapper-share li {list-style: none;margin: 5px 0px 0px 0px;}
.crist-wrapper-share li:first-child{border-bottom:1px solid black;margin-top:0px;}

@media only screen and (max-width:640px){
body{margin-bottom: 42px;}
.crist-wrapper-share {width: 99%;height: 36px; bottom: 0;margin:0px auto;padding:0px;}
.crist-wrapper-share li{display: inline;margin: 0px 0px 0px 5px;border:none;padding:0px;}
.crist-wrapper-share li:first-child{border:none;}
}
</style>


4. Setelah itu, copy kan juga kode dibawah ini, dan pastekan diatas </body> (kode kedua ini untuk bagian html/formnya).
<div class='crist-wrapper-share'>
<li><b>Bagikan</b></li>
<li><a expr:href='&quot;whatsapp://send?text=&quot; + data:blog.pageName + &quot;%20%2D%20&quot; + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Whatsapp'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfJWjuFlWO5usWGKbVv143tWXov-jgXLsQ2M2ZxAlMFc5ASGYC_U8hpJTSYo9RfazySE01WMmXXUj8nn-RaBh5R9oep5cr5iYiaTZRYFMDi3HyuRjwhI9XleorRitGsHpyKt5WP9-7JB9/s30/AW_Wa_icon.png' width='35'/></a></li>
<li><a expr:data-text='data:blog.pageName' expr:data-url='data:blog.url' expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:blog.pageName + &quot; (by: @AKTIVITAS WEB) &quot;' rel='nofollow' target='_blank' title='Bagikan ke Twitter'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8gpKpPTxuqh0jNqacrTd6Ajq4zQbuOsjQeo5T1HB_EteYAOfqs6IzukULUhzVFng0NRcUGOnoT_T6ZKCNrv015sc-CxZi2r0ELGnycbepHSxDch832_rmH5zQ3ar0kzjeaun7CALK0Vo/s30/AW_Tw_icon.png' width='35'/></a></li>
<li><a expr:href='&quot;mailto:?subject=&quot; + data:blog.pageName + &quot;&amp;body=&quot; + data:blog.url' rel='nofollow' title='Kirim ke Email'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6naS3KsWeeMsA8wuofvlcFbLLtLjMjS2x17SG4c-oKZbqeY-TGWZ4CBviES-6r1jhESNGU2bA_5SYKwbX7z0pQzgGhrVdunJDzOUPV8lN7h_sU_oRI5b_Vu8zq1PsSIUCUbk6Qoykk2z/s30/AW_Email_icon.png' width='35'/></a></li>
<li><a expr:href='&quot;tg://msg?text=&quot; + data:blog.pageName + &quot; - &quot; + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Telegram'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtzdWEVr0YNEFHn1GdwiWQaMqAREECe2mEE3kfKMKHiSlhHca9zlufi3XQ7pkmRI1QuTN_ygxaLjfrnIanPxkfWXT-1ED2I9ERalXaW5fM1a1KWLOBPsbndSIqLGhhdcvZ4eJzCC_z5Yl/s30/AW_Tg_icon.png' width='35'/></a></li>
<li><a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Line'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMMOCTkNcjRvk4944v0ySmJoc3C98Tmb75qhbcy_XEpLV0RKXlBbQs3n0nbBspiUBnGkBtoQ_EXD6DBjKmRLdYtW3vUIbZzJaaGkI4bYt9tCtHygm08ofkE_Ok7I4y2Hd-JIUGYyBcbN9/s30/AW_Ln_icon.png' width='35'/></a></li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:blog.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:blog.pageName&quot;' rel='nofollow' target='_blank' title='Bagikan ke Pinterest'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_L_xKFDiJ_nA5gpiR5-qTL_dN5GrjrOWptgkywDis2FAC3z2s3oocu5bML8rwY45-ORCtq3tBD4v22OT6zk1PX1bpow7_JYtuT4JhflysR9iRRQ-vyVjROGlsGS4N4DuwD_hLDmVoPZVZ/s30/AW_Pn_icon.png' width='35'/></a></li>
</div>


5. Nah, langkah terakhir tinggal klik Simpan Tema. 

 Kelebihan Share Button ala AKTIVITAS WEB 

Mungkin anda berpikir apa saja kelebihan dari cara ini, maka kami merangkumya sebagai berikut :

1. Tidak melibatkan API (source) dari pihak lain.
Cara yang kami bagikan ini tidak melibatkan source dari pihak lain seperti netnda untuk mengimport font-awesome.
2. Tiap satu gambar berukuran < 1kb.
Tombol Share tersebut terdiri dari gambar yang hanya berukuran kurang dari satu kilobyte, sehingga tidak memberatkan web atau blog anda.

Nah, sahabat AKTIVITAS WEB, begitulah Cara Membuat Share Button Melayang di Blogger, dan ingat, Seorang Blogger tidak pernah puas dengan apa yang didapatkan, oleh sebab itu teruslah berkarya agar tampilan blog anda semakin bagus.

Terima kasih telah membaca artikel ini, baca juga artikel lainya diWeb ini ya...

◄ Post Selanjutnya Post Sebelumnya ►

Artikel Terkait :