Social sharing widgets play a vital role in blogospher and has become one of the tremendous factor for each blog and websites. You might have seen alot of blogs and websites holdings different styles of social sharing widgets. Likely If you take a tour of my Blog then you will find different types of social sharing gadget on different locations. Each social sharing gadget has its own task to publish posts on different social media websites. You can put your gadgets according to your blog designing and layouts. So if you are a regular PBT reader then you might be aware that in early days we have published so many Blogger Widgets and Plugins they were well appreciated and liked by Newbies bloggers.
So since from the couple of days we have received so many request from our loyal readers, Asking for social sharing widgets. They have voiced to kindly shared PBT below every posts social sharing widgets with us. So in this article we will share with you the PBT All in One Social Sharing
Add All in One Social Sharing Buttons widget below Every post in Blogger.
Attention: If any one want to share this widget on his/her blog then do not forget to give credit links back to PBT. Also Don't change the credit names (PBT). Anyone who does not link back then it could be destroyed his Blog post maliciously. If you do so the legal action will be taken against him.
Step 1:
- Go To Blogger Dashboard:
- Go to >> Template >> Edit/Html:
- Find for ]]></b:skin> and past the below css codes above
]]></b:skin>
/*-----------------PBT Social Sharing Widget For Blogger---------------*/You done Almost step 1:
ul.social_pbt {
list-style:none;
display:inline-block;
margin:15px 0 0 -20px;
}
ul.social_pbt li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_pbt li a {
display:block;
width:35px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_pbt 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_pbt li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwIAvQCNLpSu7cc-LEbM7H-_PusvN6m6vS2VP06rEl7u1e46wCxvVm0TxhwEIzCsqLPjPZoKaRLnRxNTYCb2H6xTcXpy2HgEfrbUhkMlnhX_LbFfXG8XDE81TJK6DHN4pkNXuQuQxoVxO/s1600/btrix-facebook-icon.png);
}
ul.social_pbt li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5216d4qJVlCZ6uL0j2qQlLQNXxSzyD3sisuSjYwHNpG7Tqr0GSerIiL6iI3_ehXg9S25V5uh1NI4Dgu3SiLWSaAHzFT_-IjFIWWIqjtxemW_zmHs1kD-JG-ct9FuZgNb3XiWqhLG64Pb/s1600/btrix-twitter-icon.png);
}
ul.social_pbt li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwCDZ4L4BxLwnmsY61pIK4yrfM6D0nvfJG9b-vtFJdcWZMh2C5UIRuts9MtH5W2Op7PDanHNvofxr2CT__9xuLRVWUp02dNxW8HzxR3jfG5PAq3kqCQs9soN63s8g0_UWInCKeGTcWhdS/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFDul1MR0jkSlTz4iQXIP3M-lfnF7qIhy6SPmaylXlp5jDeHm43na9BLMbC5B86jR1NiPm03gxvreyzfC2B2b9eaFxoVbKHE4I-I2j91uP3KIC661cwA4ej7T5AcSqA6usGtHUr236-xg/s1600/btrix-Pinterest-icon.png);
}
ul.social_pbt li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHzuABuAG-Vp3gr7NQPNxWvptW4vQ_NsBR6dApPxfeSukoehGkoyHdRc3zCt4yj233eoqIgsUUm9ENo3VR5WHhH1Ypc3aAiJKnaJ53ZID6rOx6-XlBzojZC5gyq6vrHeskywEhpol85fH/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_pbt li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqpzRELiyPgw6j-BL6lHA_SoHE0xOdDK5F3s3C6oh9hB_5IDyVNHkRv7_QUSq-3qzXdRAGZvHiqYfCHspi21QeF4FCI9mW7vqtUnjLPpB41U6mPmvymZ90UmiwUIX4zJal58N27WoDyZ6h/s1600/btrix-Digg-icon.png);
}
ul.social_pbt li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr_k-OiC2u0yfFkW65ZMy_90QzU_kJ41ML67VRxGgysik8Myvep5s4fYyvVDpdRKIe_XSnl8gaPALMgi9iJVdSBA-r4Z_VkQILdPo4eWtbRN_frc2ynVrTap4EbUdZesBk42gh1QwFSCht/s1600/btrix-Linkedin-icon.png);
}
ul.social_pbt li.abrdit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgVjccdeD6Trh2SZOkyKTXP4BoIPpU4zHha-K4Ve2LfSA3r_f0Z8rz6TeflGBjIzrVzD1wNhvwdtrryQsxMAH1CL2iKzPFMf-1Gw3YY6thKW-86w_HprroIHdd0cGXvWC4u074H8EMP98/s1600/redit.png"); }
ul.social_pbt li.abdelis { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKd8gVJBKABK2MiE7tz7G_JVP2rTYgumAArnlJdjbbgXatotPn2Ahrx2mE9U9TdGDHPgL45uGJIOZCbzQ69dNVnwFUVxcK6FAIQcdsfk6DPPIXn5_IkZ_j8z99BQAF1GXP162l46ts5k/s1600/delecious.png"); }
ul.social_pbt li.abtechno { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_6_1x2XVmzuVyOPEq2PmEEcuLahDnngavsOpoqs4xKiSRu9eSI0sVzCLr1bG-YjE-ycfQyv7oGEgjwr_TH3OlKbayOu4JmIdjPYtSwHP6RJ1THMqqs8myJN2IcXsQFmODowD_8VqaV8/s1600/technorathi.png"); }
#animation_pbt:hover li {
opacity:0.2;
}
#animation_pbt li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_pbt li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_pbt li:hover {
opacity:1;
}
#animation_pbt li:hover a strong {
opacity:1;
top:-10px;
}
#subbutton {
background: none repeat scroll 0 0 #0089E0;
border: 1px solid #292929;
border-radius: 5px 15px 5px 15px;
color: #FFFFFF;
font-weight: bold;
height: 40px;
margin-top: 15px;
text-transform: uppercase;
transition: border-radius 0.5s ease 0s;
}
#subbutton:hover {
border-radius: 15px 5px 15px 5px;
}
Step2:
- Go To Blogger Dashboard:
- Go to >> Template >> Edit/Html:
- Now find for <data:post.body/> or <p><data:post.body/></p> and past the below given code:
- If you could not find the above tags then look at the below illustrative screenshot.
After clicking on the var'post' scroll down slowly you will find one of these codes <data:post.body/> or
<div style='border-bottom: 1px solid #ddd; border-top: 1px dotted #ddd; color: #000000; font-size: 24px; margin: 45px 0px 10px; padding: 15px 30px'><b>Share This Article with your Friends</b></div>
<ul class='social_pbt' id='animation_pbt'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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='abrdit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='abdelis'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='abtechno'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
Now you done Almost Save your Template and refresh the Page.
0 nhận xét:
Đăng nhận xét