Social Subscribe widget
Ένα όμορφο Social Subscribe widget για το site και το blog σας που τον τελευταίο καιρό μπορεί να το είδατε σε άλλες σελίδες, τώρα μπορείτε να το βάλετε και εσείς στην δικη σας σελίδα η blog.
Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
html, body {
min-height: 100%;
}
body {
background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
margin: 0;
}
#buttons {
padding: 2px 2px;
width: 330px;
overflow: hidden;
}
.button {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 4px;
overflow: hidden;
width: 156px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 118px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: Open Sans;
font-weight: 400;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 16px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
}
.button .slide {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.facebook iframe {
display: block;
position: absolute;
right: 23px;
top: 10px;
z-index: 1;
}
.twitter iframe {
width: 90px !important;
right: 5px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___follow_0 {
width: 70px !important;
top: 10px;
right: 45px;
position: absolute;
display: block;
z-index: 1;
}
.youtube #___ytsubscribe_0 {
top: 10px;
right: 1px;
position: absolute;
display: block;
z-index: 1;
}
.facebook:hover .slide {
left: 180px;
}
.twitter:hover .slide {
top: -40px;
}
.google:hover .slide {
bottom: -40px;
}
.youtube:hover .slide {
left: -150px;
}
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
.youtube .icon, .youtube .slide {
background: #b31217;
}
/* foulscode.blogspot.gr */
</style>
<div id="buttons">
<div class="facebook button">
<i class="icon">
<i class="fa fa-facebook"></i>
</i>
<div class="slide">
<p>
</p>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FFoulscode&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true">
</iframe>
</div>
<div class="google button">
<i class="icon">
<i class="fa fa-google-plus"></i>
</i>
<div class="slide">
<p>
Google+
</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-follow" data-annotation="bubble" data-href="https://plus.google.com/u/0/109721759993422268214/" data-rel="publisher"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="youtube button">
<i class="icon">
<i class="fa fa-youtube"></i>
</i>
<div class="slide">
<p>
YouTube
</p>
</div>
<div class="g-ytsubscribe" data-channel="techpingo" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
</div>
<div class="twitter button">
<i class="icon">
<i class="fa fa-twitter"></i>
</i>
<div class="slide">
<p>
</p>
</div>
<a href="https://twitter.com/foulscode" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
Tweet
</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
DEMO LIVE
Και αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα γράμματα με τα δικάσας link μπορείτε να κάνετε αποθήκευση.
Σχόλια