Share Button Sosmed Keren ala Arlina V2

AA Sciences, Aldi Andreansyah - Share Button Arlina, Share Button Sosmed Arlina, Share Button Sosmed Keren ala Arlina V2, Kumpulan Share Button Sosmed Keren ala Arlina V2.

Share Button Sosmed Keren ala Arlina V2

Sebelumnya AA Sciences pun 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
• Share button keren ala arlina v1

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+, Linkedin dan Pinterest yang dimana share button ini mirip sekali para share button sebelumnya yang dimana share button ini memiliki 4 fitur saja yakin fb,twitter, google+,dan linkedin.

Nah tetapi yang menjadi perbedaan nya yakni share button ini memiliki share button terdapat 5 fitur sosial media yakni : facebook, twiter, google+, pinterest dan linkedin.tidak hanya itu share button ini pun berjenis responsive atau memiliki tampilan yang berjenis sama saja antara desktop dan tampilan seluler.

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 V2, berikut penerapan nya :

Share Button Sosmed Keren ala Arlina V2

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 Arlina Design edited by https://aldiandreansyah.blogspot.co.id */

.sharepost li{width:19%;padding:0;list-style:none;}

.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}

.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}

.sharepost li a:hover{opacity:1;color:#30cc91;border:double #fff;}

.sharepost li .twitter{background-color:#55acee;}

.sharepost li .facebook{background-color:#3b5998;}

.sharepost li .gplus{background-color:#dd4b39;}

.sharepost li .pinterest{background-color:#cc2127;}

.sharepost li .linkedin{background-color:#0976b4;}

.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,

.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#374760;color:#fff;}

.sharepost li{float:left;margin-right:1.2%}

.sharepost li:last-child{margin-right:0}

.sharepost li .fa:before{margin-right:5px}

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

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='clear'/><div class='sharepost'>

<ul>

<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook-square'/>Facebook</a></li>

<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter-square'/> Twitter</a></li>

<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus-square'/> Google+</a></li>

<li><a class='linkedin' 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' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin-square'/> Linkedin</a></li>

<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It'><i class='fa fa-pinterest-square'/> Pinterest</a></li>

</ul>

</div> 

        <!-- Tombol share media sosial end-->

<div class='clear'/>

</span>

<div class='clear'/>

</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 pun share button sudah terpasang.

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

Share this post