Social Sharing Buttons Gadget For Blogger
Social Media is really a good media to increase traffic to blog. Mostly bloggers and webmasters trust on social media sites like facebook, twitter and now Google+ also. They all are the great source of free and targeted traffic. Strong social media presence helps to improve our blog ranking in all the search engines. We should share our blog posts to these sites to get traffic and visitors to our blog. We should also include social media sharing buttons to our blog so that our readers can share our blog posts and give us valuable and natural backlink. To make this task easy for our readers today I bring a very stylish and fancy social sharing buttons for blogger which includes Facebook, Twitter, Google Plus, Pinterest, StumbleUpon, Delicious, LinkedIn and Reddit. Let's start adding this gadget into blogger blog.
Social Share Buttons for Blogger
- Go to your blogger dashboard.
- Click Edit HTML > Proceed > Tick Expand Widget Templates Box.
- Press Ctrl+F and search below code in your template.
- Now paste the below code just after that.
- Now click on save template button.
- You are done!
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div> <ul class='social' id='cssanimation'> <li class='facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a> </li> </ul></center></div> <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/> <style> ul.social { list-style:none; display:inline-block; margin:15px auto; } ul.social li { display:inline; float:left; background-repeat:no-repeat; } ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; } ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; } ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk4Vq7ceRGeAJYicHOyA2jixxn_0doKKIRBLP14mH-wv_V-aigRd8nL65sw-4ZsqfPprbGqZQBq4mquYAiPewUrvz7eDb80_dJn4AhFB4aPDTVDa6hEYjiPMM3NdjQw23_hqx2ubovxY/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFFPdzcyaN8xpMPvsYdLALLbrsyzcmJf7eZfcGe0d1-7UwEd58H1Hvr8LTYoj4tI9BqJJnL8pEA33C3GKCS8-sEW0zov0wuQ0z6qOpxPpR1EGcLuC2YNU0Nv0rOX6KSQo_P5P6QrptRk/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqMoy45dk9yFXw1JhErvij4nu4PNFnbrWD6J5TZeX6aJHz6WBtEF0n7lYCBmMzA-3FM-rG9uyEjnckXUcKxkQxlIx_OpA9JeqA7Z074jPVLYLgdmTKW4ELTBq6YT2ozGul9B9CVpDY5g/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3ksUy6NLnJd4713hrGoqSABPHA4HD3KIKoudDlrxUtzyL81MvfZlheOjyZPnp2O-A5sk9KqzhkzaePeOJao82T0wrpMYcfKPCluRj7pqYOLqjPLmO-E3cPtd7dQS2O6O_g7hcZTU7j8/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdobv5EniZMDVVnyjPaZ6XOxiuSLkwsLspJczngTh-vtcIMx291GVoxP3jYhhPTHHI6fdK2dFvPijkAWqZNoCxYE9XT0Yg7m-nKfGsjxLJuuNJWJ1BNDaC3t70x8UvDuZlViE1aAZK-Y/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGTGBLOs_JpjGYjpkvjrTlZBk7sJ-vm8Pq2_5JtX0MC6gZ0ezibg-e0lg-qb9t46shEsG6nn7dnZn42ydpV_veDU0BRSP7k2lwvJ0qSrwlxk7yhpz8aQd8QBv6cxbcxVFu4oNA-Bsyuh8/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8h1LVl_wDngmwkKnomBk7-4EpMs1sLcXdZ41jmv7da0a3SOGoEPSDjhCxJR9FRu6vPcWN1MFu_BPQGM_DEsRxuEpLaA2hbqwusDFzSFK38NZHall9tgY1PjfTNM1VdddVyUJWH5I007E/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKh9VDPvuXUL1KPfCg24MLhoVnLVWHhRtUvjqqGO0avD8_HKtrMWG893sLWXj5F0F-i6dghRMiS01CyHoZ30Y9yIDzqwiChxzRWRle6TGrcipsbkEt-_H_WJwFWrIpGJVTgQMjf8Db0s/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipgoG5jzQg-twVLtuIeuw916rD1fhOOo1nVrDTe0pCUkGtz3ASSNctmODZGpdiFFBay_OXU6z46jBUc6nNkqs7IgFADUHnoiUCwA9sa5HUNqfNd7q1igIRWtcHEcMMErM0tC0UBpC9I9af/s1600/TBI-technorati.png); } #cssanimation:hover li { opacity:0.2; } #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; } #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; } #cssanimation li:hover { opacity:1; } #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{ font-size:25px; font-family: 'Englebert', sans-serif; } .sharelordhtml{ border-top:30px solid #3873CC; padding:16px; -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s; background:#D9D6FF; } .sharelordhtml:hover { background:white; } </style> </b:if>
0 commentaires:
Enregistrer un commentaire