Share Button Sosmed Keren ala Arlina V1

AA Sciences, Aldi Andreansyah - Share Button Sosmed ala Arlina, Cara Membuar Share Button Sosmed ala Arlina, Kumpulan Share Button Sosmed ala Arlina.

Share Button Sosmed ala Arlina V1

Sebelumnya AA Sciences pum alhamdulillah sudah membahas mengenai share button serupa yang dimana share button tersebut bersifat stcky atau biasa di kenal melayang dan tidak hanya itu button share sosmed sebelumnya pun memilik fitur responsif yang dimana jika kita menggunakan tombol tombol tersebut kita maupun pengguna akan sama nya jika tampil ada versi desktop (laptop, computer) dan seluler (Smartphone, IOS), yang dimana menurut AA Sciences share button sosmed tersebut sangat cocok bila digunakan khususnya para user web/blog.

Baca Juga :

• Share Button Melayang Responsive

Nah tetapi di kali ini alhamdulillah AA Sciences membagikan share button yang dimana share button ini dibuat oleh arlina dan disini AA Sciences hanya sekedar membagikan nya saja, membicarakan mengenai share button sosmed ini sebelumnya memiliki fitur² di dalam nya yakni terdapat share sosmed seperti : Facebook, Twitter, Google+, dan Linkedin secara keseluruhan share button ala arlina ini terdapat empat buah share button saja.

Share button ala arlina ini memang sangat cocok di terapkan yang dimana biasa nya diterapkan pada bagian sesudah kolom posting an sebuah website yang dimana bertujuan untuk mempermudah pengunjung untuk mendapatkan url atau dapat juga membagikan nya sebuah artikel melalui tombol share yang sudah dipasang tersebut.

Jika kalian sudah penasaran simak langsung saja berikut cara membuat Share Button Sosmed ala Arlina V1, berikut penerapan nya :

A . Pembuatan CSS nya terlebih dahulu  :

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode b:skin atau <style>.

3 . Jika sudah ditemukan kode b:skin atau <style> tadi, langsung saja kalian Copy Paste

kan Script CSS di bawah ini, tepat pada bagian dalam kode b:skin atau <style> nya :

/* CSS Share Button edited by https://aldiandreansyah.blogspot.co.id */

.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid#dadada;margin:auto}.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-HI7VZZitQcqceeHSrF0yoHhv31bnl4n4LpF8cJHyRPpfFHw2z7-9KzDvqmCMgQrpW9KFZOwceQDfumDOv7k-AaBBXcLbXe4ICxF-2CrcLLzwc5WWddiKLwXfug2CtTUSlKTO9X2iiQe/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}.tombol-berbagi-fb-label{color:#2d609b}.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}.tombol-berbagi-tw{background-position:0 -43px}.tombol-berbagi-tw-label{color:#00c3f3}.tombol-berbagi-gp{background-position:0 -86px}.tombol-berbagi-gp-label{color:#f00}.tombol-berbagi-lin{background-position:0 -129px}.tombol-berbagi-arlina a{color:#999;transition:all .3s;}.tombol-berbagi-arlina a:hover{color:#7cb0ed}@media only screen and (max-width:640px){

.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

Catatan :

Kalian dapat mengubah warna² nya dengan kode warna HTML sesuka kalian.

4 . Terakhir, pilih menu Simpan Template

B . Penerapan Share Button Sosmed Arlina di Bawah Postingan nya

1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode <data:post.body/> atau <div class='post-footer'/> pasang di bagian mana sesudah kolom posting an kalian.

3 . Jika sudah ditemukan kode <data:post.body/> atau <div class='post-footer'/> tadi, langsung saja kalian Copy Paste kan Script HTML/Share Button Sosmed nya di bawah ini, tepat pada bagian sebelum kode <data:post.body/> atau <div class='post-footer'/> nya :

<b:if cond='data:blog.pageType ==&quot;item&quot;'><div class='tombol-berbagi-arlina'><div class='tombol-berbagi-arlina-fb'><a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/><a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a></div><div class='tombol-berbagi-arlina-tw'><a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/><a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Shareon Twitter</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/><a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Shareon Google+</a></div><div class='tombol-berbagi'><a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url +&quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/><a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url +&quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a></div></div></b:if>

4 . Terakhir, langsung saja kalian pilih menu Simpan Template dan lihat hasil nya dengan cara :

Kunjungi Blog kalian - > Pilih Postingan kalian - >  Gulir halaman ke bagian bawah - > lalu lihat hasilnya pada sesudah postingan kalian dan tara akhir nya sudah terpasang.

Mungkin hanya cukup sekian mengenai pembahasan Share Button Sosmed Keren ala Arlina V1 yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan kalian mengenai Share Button Sosmed Keren ala Arlina V1 ini, Amin.

Share this post