Floating Social Icons
These social buttons are appears on every page on blog, whenever some one visits on your bolg or sites then they can easily share any post on social network sites. This wigets is easy to install on blog or sites. This is also eye catching.
How to add this Widgets
- Login on Blog
- Click on Template
- Edit Html
- Copy and paste all the below code inside template.
- Save
<!-- Social media share button left side-->
<div class="bookmark" style='top: 25%; position: fixed; left: 6%;'>
<a expr:href=""https://www.facebook.com/sharer/sharer.php?u=" + data:post.url + "&title=" + data:post.title" href="https://www.blogger.com/null" rel="external nofollow" target="_blank"><img alt="facebook" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQ7f1GdfofXnRFkkXvzJC7raysAR5SkEsx4TKTmg4V63P8RQrbhS-YlDmrg-7QvN2JE4M2fYIaBymRfOkba6TNChQKAJqYjqEH4lCDb7w6XEEs34rcuxBulONNQPZD4889ZTqNKawgBw/s1600/facebookicon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href=""https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title" href="https://www.blogger.com/null" target="_blank"><img alt="google-plus" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3NKdfZVtJxaV5KIy5LZyiuI7auHcuaoZYF7Jn25p4e1vR7BoB5k51boj7p9fwTMIsd1dbLlp-jIAcgwM1M7IoCmuohyoOcqmX9JRrJM0MB7jPLZY4UJMZasMJ9jUm0MOGxv5SBPQ8so/s1600/google-plus-icon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href=""https://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title" href="https://www.blogger.com/null" rel="external nofollow" target="_blank"><img alt="twitter" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpwFbTV_3mCLRpJjxmXOdDkRRRVIRcVKTvoIprLTAP1BpMW8qjaJcFR-bk-oKWFJTgyXXdsoWN9VC0FvyZD1GDZLbMMOeZip3Vd4iFF3EAvIIIfKSTTkrjMCKrh6w5GCdESgIu9kFEYE/s1600/twitter.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
<br />
<a expr:href=""https://pinterest.com/pin/create/button/?url==" + data:post.url + "&title=" + data:post.title" href="https://www.blogger.com/null" target="_blank"><img alt="pinterest" class="bookmark-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoIhzd7Qqscn6FF3avmH-MijpbYgcrzzyuy3v55BwjiRRX17xu3ZrQB2cTzZpXo1XcH1Uqe1k1h89uyIPJzWuaIPXl4lX5XKPxqUfNVU42sAxs0mzPqEa6VkJq_DvdsfcPBWH8y3R73U/s1600/pinteresticon.png" height="35" width="35" style="background: transparent; border: 0px;" /></a>
</div>
<!-- end Social media share button left side-->
Settings
- You can increased or decreased size on icons
- You can also change position of floating icons
- top:25%; it means icons display 25% below from top.
- position: fixed; left: 6%; it means icons display after some distance form left side.
No comments :
Post a Comment