Ads 468x60px

Πέμπτη, 12 Μαΐου 2016

Social Share Bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία εύχρηστη, ως
προς το μέγεθος Social Share Bar καθώς διαθέτει DropDown menu και δεν
πιάνει καθόλου χώρο!Μπορείτε να βάλετε αυτό το widget σε διάφορα μέρη της σελίδας
σας!!



Δείτε εδώ το DEMO


Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.......................................................................................................................... - See more at: http://cris-dio4.blogspot.gr/2013/10/wood-social-subscription-widget.html#sthash.jPFAJLaO.dpuf


Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.......................................................................................................................... - See more at: http://cris-dio4.blogspot.gr/2013/10/wood-social-subscription-widget.html#sthash.jPFAJLaO.dpuf
Η εγκατάσταση είναι πολύ απλή:

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--

..............................................................................................................................................................

<style type="text/css">
.avdhoot-box {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
/* CSS3 Browser */
background-image:-webkit-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%);
background-image:-moz-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%);
background-image:-ms-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%);
background-image:-o-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%);
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%);
/* IE only */
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.avdhoot-box:before,
.avdhoot-box: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;
}
.avdhoot-box:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.avdhoot-box input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.avdhoot-box label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.avdhoot-box label:before {
content:attr(data-default);
}
.avdhoot-box label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:hover + label {
color:white;
}
.avdhoot-box input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.avdhoot-box ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
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;
}
.avdhoot-box li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.avdhoot-box 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;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.avdhoot-box a:nth-child(even) {
border-right-width:0;
}
.avdhoot-box 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;
}
.avdhoot-box a:hover:before {
background-position:50% 100%;
}
.avdhoot-box .social-rss:before {background-image:url('img/social_rss.png');}
.avdhoot-box .social-facebook:before {background-image:url('img/social_facebook.png');}
.avdhoot-box .social-twitter:before {background-image:url('img/social_twitter.png');}
.avdhoot-box .social-google:before {background-image:url('img/social_google.png');}
.avdhoot-box a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.avdhoot-box input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.avdhoot-box input:checked + label:before {
content:attr(data-focus);
}
.avdhoot-box input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>
<div class="avdhoot-box">
<input type="checkbox" />
<label data-default="Social Share Bar!" data-focus="Select one of the social media service..."></label>
<ul>
<li><a class="social-rss" href="http://feeds.feedburner.com/USERNAME FEED" target="_blank">RSS Feed</a></li>
<li><a class="social-facebook" href="http://facebook.com/USERNAME FACEBOOK" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="https://twitter.com/USERNAME TWITTER" target="_blank">Twitter</a></li>
<li><a class="social-google" href="https://plus.google.com/USERNAME GOOGLE+" target="_blank">Google+</a></li>
</ul>
</div>

..................................................................................................................................................................
ΑΛΛΑΓΕΣ

 Κάντε αντικατάσταση σε όλα τα USERNAME  με τα αντίστοιχα δικά σας και πατήστε
Αποθήκευση!!Αυτό ήταν!

Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.......................................................................................................................... - See more at: http://cris-dio4.blogspot.gr/2013/10/wood-social-subscription-widget.html#sthash.jPFAJLaO.dpuf
Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.......................................................................................................................... - See more at: http://cris-dio4.blogspot.gr/2013/10/wood-social-subscription-widget.html#sthash.jPFAJLaO.dpuf

Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to avdhootblogger.com




Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog