Tunggu Sebentar...

2/10/2017

Share Button Sosmed Keren ala Arlina V1

Baca Juga



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



Share button
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 :

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('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/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.

Artikel Terkait

Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

================================================================
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
================================================================
EmoticonEmoticon