Friday, August 21, 2020

Add Social Sharing Widget built with Font Awesome 4.2.0

Add Social Sharing Widget built with Font Awesome 4.2.0 Though social sharing widget is useful to increase the connectivity with blog post. Modern blog user use Font Awesome instead of the icons. So I have used Font Awesome 4.2.0 feature. This feature will display the social media icons instead of image. Remember that if you are using Font Awesome 4.2.0 then you don't have to add Font Awesome 4.2.0 file in your blog header section. So skip the Step 4. just follow the below steps- Step 1Log in to yourBlogger accountand Go to yourBlogger Dashboard Step 2Clickon- Template - Edit HTML Step 3Now Find this codeheadby pressingCtrl+F Step 4Paste the below code below/afterhead link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/ Step 5Now again Find this code]]/b:skinby pressing Ctrl+F Step 6Paste the below code Before/above]]/b:skin /*Social Sharing Widget by http://www.bloggerspice.com/ */ .sotontroshare li { float: left; margin-right: 1.2%; list-style-type: none; } .sotontroshare li .fa:before { margin-right: 5px; } .sotontroshare li{width:17.6%;border:1px solid .sotontroshare{overflow: hidden; text-align: center; margin: 20px 0; padding-bottom: 15px; } .sotontroshare li a:hover{opacity:1} .sotontroshare li .twitter{background-color:#55acee} .sotontroshare li .facebook{background-color:#3b5998} .sotontroshare li .gplus{background-color:#dd4b39} .sotontroshare li .pinterest{background-color:#cc2127} .sotontroshare li .linkedin{background-color:#0976b4} Step 7Now again Find this codedata:post.body/ordiv class='post-footer'by pressingCtrl+F Step 8Paste the below code below/after data:post.body/ ordiv class='post-footer' b:if cond='data:blog.pageType == quot;itemquot;' div class='sotontroshare' ul lia class='twitter' data-via='BloggerSpiceDotCom' expr:href='quot;http://twitter.com/home?status=quot; + data:post.title + quot;-quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'i class='fa fa-twitter'/Tweet/a/li lia class='facebook' expr:href='quot;http://www.facebook.com/share.php?v=4amp;u=quot; + data:post.url + quot;amp;t=quot; + data:post.title' onclick='window.open(this.href,apos;sharerapos;, apos;toolbar=0,status=0,width=626,height=436apos;); return false;' rel='nofollow' target='_blank' title='Facebook Share'i class='fa fa-facebook'/Share/a/li lia class='gplus' expr:href='quot;https://plus.google.com/share?url=quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus Share'i class='fa fa-google-plus'/Share/a/li lia class='linkedin' expr:href='quot;http://www.linkedin.com/shareArticle?mini=trueamp;url=quot; + data:post.url + quot;amp;title=quot; + data:post.title + quot;amp;summary=quot; + data:post.snippets' target='_blank'i class='fa fa-linkedin'/Share/a/li lia class='pinterest' expr:href='quot;http://pinterest.com/pin/create/button/?url=quot; + data:post.url + quot;amp;media=quot; + data:post.thumbnailUrl + quot;amp;description= + data:post.titlequot;' target='_blank'i class='fa fa-pinterest'/Share/a/li /ul /b:if Step 9Now hit theSave templatebutton. After go through all the above steps check your blog post. This widget will appear at the end of every blog post. And now your blog readers will able to share your blog post easily. Thanks.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.