Social media buttons may be a good way to boosting your blog traffic. The shares of your blog content created through these social buttons flow into over totally different social networks can facilitate your blog engaged with future traffic. Twitter, Facebook and Pinterest all offer JavaScript that they'd LOVE for you to feature to your web site. tracking is one among the reasons that they'd love you to add these. which will or might not be a robust reason to not add their JavaScript, however a concrete reason to not is speed. once you add 3 services' JavaScript you are adding 3 DNS lookups, 3 (or 20) http requests for his or her JavaScript and pictures, and on and on. That JavaScript must execute additionally, of course, however the worth it provides is not even over the speed and trouble concerned in our opinion. we have a tendency to add only one third party (addtoany) script during this contrivance. I wished to feature social sharing links while not adding JavaScript. as luck would have it of these services support sharing via merely visiting a url. declared otherwise, you'll be able to share via AN http GET. This contrivance uses a complete of eight Icons however believe it or not it's super-fast and loads with in seconds.
How to make the user focus on special points.
You can replace the Statement Text Color Highlighted in Red. You can also change the Background width by changing the width: 420px; highlighted above in yellow color.
How to make the user focus on special points.
Now Lets Add Them Below Each Post In Blogger
- Go to Blogger Dashboard > Select the Blog > Go to Template page of theBlog
- Click Edit HTML button.
- Press
Ctrl +F and Add the Following CSS Code before ]]></b:skin>
div#social-sharing {
width:420px;
height: 90;
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
padding:10px;
margin:0 auto;
border: 1px solid #999;
border-radius:5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
div#social-sharing:hover {
-webkit-box-shadow: 1px 1px 3px #CCC inset;
-moz-box-shadow: 1px 1px 3px #CCC inset;
box-shadow: 1px 1px 3px #CCC inset;
}
#social-sharing img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
opacity:1;
filter:alpha(opacity=1); /* For IE8 and earlier */
}
#social-sharing img:hover {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.social-sharing-title {
text-align: center;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #8d0303;
text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}
You can replace the Statement Text Color Highlighted in Red. You can also change the Background width by changing the width: 420px; highlighted above in yellow color.
4. Next, Press
<b:if cond='data:blog.pageType == "item"'>
<center>
<div id='social-sharing'>
<div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>
<!-- Facebook -->
<a class='face-book' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAX4H8d25-x4gTqwvIK8F191zlcBnz8ZC_Kfp9SLeEwks7Av6ZRpbUf405fJHCaPJ1IIWAVBAC7C4Uk8m7ZvfjhyphenhyphenPqNDvPwp4kpqrE0A25Rw3320rCd-xirLNFriRcjoHe8QLLOw519Rb/s1600/Facebook.gif'/></a>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKzEURkc4aEK0kZieXbCrm0Xk5ohOUrhLFlPMvJ2DvbPrRcuKp10rHp0sOY5LeC-IX8tNeFlLaHmW5YrSC4oK9PenG6deVbM1F8ERxuuaN0NIDwBZHNHguCs9MxM_fI6F6l6itMY8ZA44j/s1600/twitter_bird.gif'/></a>
<!-- Pinterest -->
<a class='pint-er-est' 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)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptGUy86pIXOJWxl4VRK13AiKET28rBCG2NcZU5_IkEVNuCV1OanriB8BI-QyUwJtMAJP3g5tZYc8QhHAhZaauwI6XOO9WtVS_dv6K1Ftm13NirxU6W17wIxfBGUE2WBAUTl7L3UPx_z3-/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon -->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3qTCwbI_OQ4n2Xaq0Rt93Ve494Wv-Xsikb3I0TV_3T36QU6tikGRcMRlRAjtWYzfEBd_lqyU86FFhz7ikz-EQJc2nMGkyM1zdnrnDLhM-pKlcEW37n4Y8fnxCox-djoMhjxkg8abf55K/s1600/stumbleupn.gif'/></a>
<!-- Delicious -->
<a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmLoDWrNZUvlUkrytNREyNKsUMX3f3g_-PKzYasUmDKvEHJzrBXGCoSd5m9TW803RPCy_rJESs_4H5S340ULVKG4kTdYsBOX2-eNyd6mPnUHEH7Falqhfkv8MLrQvHt8a6cxBUFznxZVs/s1600/Delicious.gif'/></a>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdoL_mE3reKgNgkxIKvf1W9ocB0j8QSMYIFOuL52KxFQ2IlHRWMyaqEUFVdLYnGGmOGzaLycOgdxKPCkSg8FFWSwIr3RNE3fyCCfVCQCKYl41732gIasZbkr6BsI5UVTFXBdg33jpDBAwa/s1600/reddit.gif'/></a>
<!-- Digg -->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0M_21FPCPb4iIMHE4ivR07GteKevihfgF08CaXRfFr0wUQBcbaPPpKcjlhqBAd1qvH2yaesXAUikG2hKJOjnnx1ZM6KQhIJtCI7vQaq95W32j9I-qcz2o22bQhoi6ibjnnuhHC_9jnJp5/s1600/digg.gif'/></a>
<!-- Email -->
<a href='mailto:?Subject=My Blogger Tricks&Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cFWRbgq1_EHEuFdDXRp-60FC8Mz4VjMF2HtyA2GrHi4U4tKwd2xyVN_qurpYEGg4ZDKgY1YP26r-iPwQSBYgSeLNQlDf6JpGk6n8NJ7Wz9CmJLGuU_oRN1tdErNOoB2gEBawNl0LRJ-N/s1600/email.gif'/></a>
<!-- addtoany -->
<a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0n2s9wjT1lJQ7yfkdEWXjkLO2yFTJgWv4slcolhtLzh-YHIRDlqaxt-xADGNO-z-PsJ88YarA-Tuv2X8PYw9yzvHa0lvnVE_p3CT2osKdpvyGCqamF6eVYPwtvv3JyLbuwaJZYUjhhslC/s1600/share-to-any.gif'/></a>
</div>
</center>
5. See Preview before saving.
Note:- The buttons will only appear on post pages. We place this limit as a result of the Pin-it button only pins the page on that it appears. per se on homepage (if we tend to were to allow it there), every instance of the button can pin the homepage, not the post (as it’s “supposed” to).
Troubleshooting
While finding the code is returning 3 time.This drawback comes once we install machine scan a lot of Hack in our Blogs. For this drawback explore for anyone line from below and place on top of Section of device html Code once it!This
<div class='post-footer-line post-footer-line-1'>
Or this
<div class='post-footer'>
Or this
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Let me know about different social sites that support this sort of sharing within the comments, and i am going to add your tips to the current post. I hope you may relish this tutorial and take a five seconds to share it.Keep Blogging :)
0 comments:
Post a Comment