Add Foldable Sharing Widget below posts of Blogger ~ Crawlist

Previously I had published lots of Social Sharing/Bookmarking widget what appears below every post of your Blogger bogs. Few of them are Truck icon style, Elegant silver icon style, Share with counter + Feedburner email subscription, Coldblooded sharer etc. To continue that sharing widgets making and publishing here I am publishing another super smart compact Social Share/bookmarking widget. This widget created with HTML, CSS and CSS3. Got 8 slots of service (Facebook, Twitter, Google plus, Stumble upon, Pinterest, Delicious, Reddit and a Feedburner email subscription slot), Easy to add on your blogger blog. This widget will look cool on any site no matter what kind of site they are. Let’s see how it looks like and how to add it on your site.

Add Foldable Sharing Widget below posts of Blogger

Preview-

Live Demo- (Click here)

How to add-

Step 1: Back up your template(Optional step)

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.

<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> 
<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('http://2.bp.blogspot.com/-PL2_qVil_4Q/U8lfNAwrjaI/AAAAAAAAEhc/VIWncEeFCAA/s1600/facebook-16x16.png')}
.ks-koolsharer .twitter:before {background-image:url('http://3.bp.blogspot.com/-mROwY2MqdpM/U8lfdXh2kXI/AAAAAAAAEik/etjFv6l0KLg/s1600/twitter-16x16.png')}
.ks-koolsharer .google:before {background-image:url('http://1.bp.blogspot.com/-IgOO89uTv84/U8lfSUH_WgI/AAAAAAAAEh0/UelxcDrB02U/s1600/google+-16x16.png')}
.ks-koolsharer .stumble:before {background-image:url('http://2.bp.blogspot.com/-lJp8eROzZnI/U8lfc6WMVBI/AAAAAAAAEic/bvcnmSHT4mY/s1600/stumbleupon-16x16.png')}
.ks-koolsharer .pinit:before {background-image:url('http://2.bp.blogspot.com/-zxyYy9V2w9c/U8lfWIcKDAI/AAAAAAAAEiE/f6Hq9S8dOzE/s1600/pintrest-16x16.png')}
.ks-koolsharer .delicious:before {background-image:url('http://3.bp.blogspot.com/-exfzQl3Tj8Q/U8qp0-ZCsKI/AAAAAAAAEk8/PhoOesgmrKE/s1600/delicious-16x16.png')}
.ks-koolsharer .reddit:before {background-image:url('http://3.bp.blogspot.com/-35Olk2kGf5Q/U8lfXSXwSaI/AAAAAAAAEiM/N6qzIncUXSw/s1600/reddit-16x16.png')}
.ks-koolsharer .feed:before      {background-image:url('http://3.bp.blogspot.com/-Xn_R-YC2wtk/U8lfPm9riHI/AAAAAAAAEhk/fQ9ut3xlSbY/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>

Configure:

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>

How it looking in your Blogger blogsite don't forget to mention, Any feedback don’t forget to mention too. Goodluck…..

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu

Add Foldable Sharing Widget below posts of Blogger

Add Foldable Sharing Widget below posts of Blogger

Popular Posts

Labels