Cara Membuat Tombol Share Social Media Responsive

iyan-blog.com | Cara Membuat Tombol Share Social Media Responsive - Kali ini saya akan kembali mengupdate tutorial blog. Tombol Share biasa dimanfaatkan oleh pengunjung untuk membagikan ulang artikel yang telah kita buat ke dalam sosial media seperti facebook, twitter, G+, dll. 

Tombol Share Social Media Responsive memudahkan pengunjung yang menggunakan mobile saat mengakses blog kita. mereka dapat dengan mudah memperluas artikel kita dengan mengklik salah satu tombol sosial media yang responsive.

Cara Membuat Tombol Share Social Media Responsive

1. Log in ke blogger

2. masuk ke halaman template >> Edit HTML

3. letakkan CSS dibawah ini diatas ]]></b:skin atau </style>

/* CSS Share Button */ .sharepost li{width:19%;padding:0;list-style:none;} .sharepost li a{padding:10px 0;background-color:#aaa;color:#fff;display:block;border-radius:2px;} .sharepost{overflow:hidden;text-align:center;margin-left:-40px} .sharepost li a:hover{opacity:1;color:#fff;} .sharepost li .twitter:hover{background-color:#55acee} .sharepost li .facebook:hover{background-color:#3b5998} .sharepost li .gplus:hover{background-color:#dd4b39} .sharepost li .pinterest:hover{background-color:#cc2127} .sharepost li .linkedin:hover{background-color:#0976b4} .sharepost li{float:left;margin-right:1.2%} .sharepost li:last-child{margin-right:0} .sharepost li .fa:before{margin-right:5px}

4. Letakkan kode HTML ini diatas kode </article> atau tempat yang anda inginkan

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sharepost'><ul> <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'/>Tweet</a></li><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'/>Share</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'/>Share</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'><i class='fa fa-linkedin'/>Share</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'><i class='fa fa-pinterest'/>Share</a></li> </ul></div></b:if>

5. Klik Simpan Template

Sekian itu saja artikel kali ini, jika ada yang ingin ditanyakan silakan lewat komentar. Semoga bermanfaat dan terima kasih.