Add Foldable Sharing Widget below posts of Blogger
|
10:58 PM |
No Comments |
Add Foldable Sharing Widget below posts of Blogger
Preview-
Live Demo- (Click here)
How to add-
Step 1: Back up your template(Optional step)
- Log in to your blogger, select your blog,
- Select 'Template' tab option, click 'backup/restore' from upper right corner.
- Download full template and save it on your pc's Harddrive
Step 2: Then, Installing (Mandatory step)
- From 'Template' tab, select 'Edit html'
- And find (using CTRL+F) or (CMD+F) this line-
<div class='post-footer-line post-footer-line-1'>
- You may find this code phrase twice, ignore first phrase, after second phrase paste all given codes.
<!--crawlist.net sharer starts-->
<div class="ks-koolsharer">
<input type="checkbox">
<label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
<ul>
<li><a class="facebook" expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'>Facebook</a></li>
<li><a class="twitter" expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class="google" expr:href='"http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Google+</a></li>
<li><a class="stumble" expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Stumble upon</a></li>
<li><a class="pinit" expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'>Pinterest</a></li>
<li><a class="delicious" expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Delicious</a></li>
<li><a class="reddit" expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'>Reddit</a></li>
<li><a class="feed" href='http://feeds.feedburner.com/you' target='_blank'>Subscribe</a></li>
</ul> </input> </div> <!--crawlist.net sharer ends-->
<style>/*crawlist.net css starts*/
.ks-koolsharer {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
border-radius:7px;
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.7);
float:right;
}
.ks-koolsharer:before,
.ks-koolsharer:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
right:5px;
z-index:4;
}
.ks-koolsharer:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.ks-koolsharer input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.ks-koolsharer label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
transition:all 0s ease-out;
}
.ks-koolsharer label:before {
content:attr(data-default);
}
.ks-koolsharer label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
border-radius:0 7px 7px 0;
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.ks-koolsharer input:hover + label {
color:white;
}
.ks-koolsharer input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.ks-koolsharer ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.ks-koolsharer li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.ks-koolsharer a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-right:1px solid #111;
padding:0 15px 0 32px;
box-shadow:inset 0 0 0 1px #333;
border-radius:1px;
}
.ks-koolsharer a:nth-child(even) {
border-right-width:0;
}
.ks-koolsharer a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.ks-koolsharer a:hover:before {
background-position:50% 100%;
}
.ks-koolsharer .facebook:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HY0kDQPMpHhNqlAM-ME50OL8p3mjqZkNVKuYmmJ1FY4s3QL1y23-5ab9fHGiufsc8wZavidSrCWlN33ZxVY-fA5dKyoOunVDr-VkK23WoETuuc-1-p_9seK0lw4-FpjQ09e0EZlFXsd4/s1600/facebook-16x16.png')}
.ks-koolsharer .twitter:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumvza8DW94QzEsPTOiwTX6ScKEq-y-b7qifN1y9TLMeHf5ySAnZLpfkYu_JYsZb-eTxv1Z7iHH1qwUhu3PceO6aAtLSRTqnNLMzYjbryyB3hO-EFLWn2SXfRUa3CFAg4wmzjdZxIk6-56/s1600/twitter-16x16.png')}
.ks-koolsharer .google:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33283js2L8fELaEVFnHv4cE_vnVZM-ukJIag8X1R-FPal8P5qpbrJmEiRV29CGAAQ788TX1F6_fl8i93n2jFcvhs-wJHxRfH7AU8a36ielKvDB6b7P2LOZInaDcZ0btKQui0mcvOjIkLb/s1600/google+-16x16.png')}
.ks-koolsharer .stumble:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_w6ATpEHziEsrquaUBN67iW6Cc0l5Ts1azvmkX5tDdslRO-3HBRfB8YdEKfQpq_TptSJl8MolX-VaB_XZDU8XCrQ3NWO9brfTm64KpT_DLar4pZSaaS4mQgilYpY32htDbdVaAmwMqtLC/s1600/stumbleupon-16x16.png')}
.ks-koolsharer .pinit:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0iBCjqPtEp8LoP1_HslZyD_NmbZNcU1XDz4OqOX9qShMgGNXAsq6jiS3WuAmJcAe69Ue1oSwbrYSeMVOpLmoATOwgwYjFwdYDcwjzCRSB0E04brDa8e8enLTlZiy6NgQVC-FnyYDu4gjz/s1600/pintrest-16x16.png')}
.ks-koolsharer .delicious:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbBaEO25dHvvW_SXlYqI0rk8cjOOTNhBBnauuQ-Jj6DR6xZsSgLxlwK0LSCO5unGg19VY_Os4EmP3REoo8jWNRgC0J6ZASwLrYL5Jj8vENt9e5UanG2FB_QleLe6SGLVdqrVaF9nvRAZe/s1600/delicious-16x16.png')}
.ks-koolsharer .reddit:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAS2aiQ8adPEscdFefUdHO8Kpzq7x6r44SjsbSuO5WdDKka_KtSfZkHGWkfEjrW_GgCQnI-z7ThpjvBRzjf8ot6se5eBxIuoXNtV-JyAxl-QIvhZsQK-8uAB4lVSf7gEYejG61ZwQ73yZ/s1600/reddit-16x16.png')}
.ks-koolsharer .feed:before {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazm28g_bbSEmim5aXoZ-DxZ2GsGZfT9_DcLFvfi9kfXW2KlbCqQI4eqMpHXNrD05nzMPl935oOVmtkzBS-_sHC6lWLW7QBjmXM4yjiWN2ZdI266uuJVFBOAAjfgPtehdvtBZLnkxAGck5/s1600/feed-16x16.png')}
.ks-koolsharer a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
.ks-koolsharer input:checked + label {
color:rgba(255,255,255,.4);
transition-duration:.4s;
}
.ks-koolsharer input:checked + label:before {
content:attr(data-focus);
}
.ks-koolsharer input:checked + label:after {
background-color:rgba(0,0,0,.2);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.ks-koolsharer input:checked ~ ul {
visibility:visible;
opacity:1;
}/*crawlist.net css ends*/
</style>
- To configure the Feedburner email subscription, place your Feed Id in the red marked link.
- Finally Save Template; Check out your Blog for live action.
Template Capability and Faq
- This widget is compatible with almost all stranded templates, but unique designed templates or highly coded templates will not accept this.
- If your template build with HTML5/Following tutorial fails to show the widget on blog; then search </article> instead of <div class='post-footer-line post-footer-line-1'> And paste all codes after </article>
0 comments:
Post a Comment