Cara Membuat Tombol Share Simpel dan Ringan Tanpa Javascript

Santos el Salam

22 Februari 2020

Aktivitas berbagi dalam hal kebaikan memang selalu mendatangkan manfaat, apa pun itu bentuknya. Sama halnya saat anda membagikan sebuah artikel, anda juga telah medatangkan manfaat kepada orang-orang yang kebetulan membutuhkan ulasan dalam artikel yang anda bagikan tersebut.

Bagi pemilik atau penulis artikel, ia juga mendapatkan manfaat karena blognya mendapat kunjungan dari sumber yang tidak ia sangka sebelumnya. Semakin banyak orang membagikan tulisan-tulisannya, maka semakin banyak pula kunjungan di blognya. Seiring dengan ramainya kunjungan, blog pun akan semakin populer dan tentunya semakin bermanfaat bagi orang banyak. 

Untuk bisa terciptanya kemaslahatan berkesinambungan tersebut, maka ada baiknya memang sebuah blog terpasang fitur tombol berbagi (share) agar artikel mudah dibagikan oleh pembaca yang ingin memberi manfaat kepada orang-orang disekitarnya seperti teman-temannya di sosial media.

Tombol berbagi (share) ini ada banyak macamnya, dan ada banyak pula tutorial cara membuatnya dengan tampilan-tampilan menarik yang ditawarkan. Selain itu, biasanya juga ada banyak jenis sosial media yang dimunculkan dalam fitur tombol share. Mulai dari facebook, twitter, whatsapp, linkedin, pinterest sampai yang tidak begitu populer di telinga seperti digg, baidu, kakao dan jenis-jenis lainnya. 

Bagi penyuka blog loading cepat alias fast loading, tentunya mereka lebih memilih menggunakan tombol share yang simpel agar loading blog tidak begitu berpengaruh. Tidak perlu dengan tampilan yang wah, pemakaian javascript untuk tombol share ini pun sebaiknya dihindari agar loading blog tetap ringan dan cepat.

Nah, pada kesempatan kali ini, saya akan coba berbagi tutorial cara membuat tombol share yang simpel, keren, responsive dan pastinya ringan karena tidak menggunakan javascript. Jenis sosial media yang disediakan pun cukup tiga saja yaitu facebook, twitter dan whatsapp, dimana ketiganya inilah yang lebih sering digunakan oleh masyarakat kita. Untuk tampilannya seperti di bawah ini:

Bagaimana cara membuatnya?. Simak langkah-langkah di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode  ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya

#share-button {margin:0 0 8px;padding:0;overflow:hidden}

#share-button p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;font-weight: 700;}

#share-button a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}

#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}

.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}

.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}

.wa-button i{font-weight:400;margin:0 10px 0 0}

4. Pastikan di template blog anda sudah terpasang kode font awesome, jika belum silahkan tambahkan kode berikut ini di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Lanjut ke pemasangan, masih dalam edit html, berikutnya cari kode <data:post.body/> dan letakkan kode berikut ini di bawahnya: 

<div id='share-button' style='margin-top:8px;'>
<p>Share: </p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a>
</div>

5. Jika sudah ditambahkan, silahkan simpan kembali template blog anda dan lihat hasilnya.

Demikianlah Cara Membuat Tombol Share Simpel, Responsive, dan Ringan Tanpa Javascript. Sumber

Labels: Blogging

Thanks for reading Cara Membuat Tombol Share Simpel dan Ringan Tanpa Javascript. Please share...!

Facebook

Twitter