Cara Menciptakan Tombol Social Media Responsive Dengan Css Di Blog

Cara Membuat Share Button Responsive - Pada tutorial kali ini saya akan membuatkan tombol sosial media sederhana responsive super ringan, dan menariknya tombol sosial media ini dibuatnya dengan memakai properti CSS.

Selain itu, tombol sosial media ini sudah support HTML5 dan CSS3 loh sobat, yang saya maksud tombol sosial media responsive ini yaitu tombol sosial media yang saya pasang di bawah postingan blog saya ini.

Bagaimana Anda tertarik ingin memasang widget tombol sosial media responsive super ringan ini, bila tertarik berikut langkah-langkahnya :

Cara Memasang Share Button Responsive

1. Log-in keakun Blogger
2. Didasbhor, pilih Template >> Edit HTML
3. Kemudian Anda cari kode ]]></b:skin>, selanjutnya ada copy arahan di bawah ini dan pastekan di atasnya atau sebelumnya.

#share-aak{position: relative; overflow:hidden; margin:10px auto; padding: 0; text-align: center; line-height:1.4em}#share-aak a{float:left;display:flex;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:14px}#share-aak a.this-fb{background:#395796;}#share-aak a.this-tw{background:#4cb0ea;}#share-aak a.this-gp{background:#de3425;}#share-aak a.this-fb:hover,#share-aak a.tis-tw:hover,#share-aak a.this-gp:hover {opacity:.9}#share-aak i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJagNFRAw-lXFEbN4DWyjXzeS1FrfI4rh7MT6VK8JUucmiF9xoORaPFtcTcKMKNC4zmKS7sztSbDv_nIQCZG7OfZQm6pwXvMJbWjMh5lCTqwAMNqN38WP3i_XL5lNp5QYJXYbduHOBJg/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:auto;text-align:center}
.this-fb i{background-position:0 -100px;margin-top:0px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:414px){#share-aak{margin:10px 15px}.#share-aak a{min-width:100%;padding:1px;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-aak a.this-gp i, #share-aak i{display:none}}

4. Berikutnya, Anda cari kode <data:post.body/>, setelah ditemukan Anda copy arahan di bawah ini dan pastekan di bawahnya atau sesudahnya.

<div id='share-aak'>
<a class='this-fb' 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' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&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' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&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' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>

5. Simpan template

Demikian saya sampaikan cara membuat Tombol Sosial Media Responsive Dengan CSS di Blog, terima kasih sudah berkunjung dan biar bermanfaat.

Sumber http://www.websiteedukasi.com/