1. Cool Social Icons with Tooltip Hover Effect
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/TWITTERHANDLE" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/FBID" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>2. Style Social Icons for Blogger
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WZ7QDQXweS2Cah66eDTvgm8coti0lryAMyvtw3i6x_akHDDgYEChy2ZhcT3hMIm2rDI5NMac2tFSD-mEzdYPybY2FJFjGIc21NXp65coxDaHZheLdN1YcC6a1EYGByZaQJgZrMSCGcQ/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_iMUQzju-yUzEQ5xqv1mcFiFuCbMaFj-N4D3Z0MJEUoVNZij7ju21T1GRxBklTQlQ0UUyvdedcjst1fIQA7lvsutC4jlcZwAHLTyJsVZYg-k3Hv-B7pgPzjefJsV_U-uYGuOIPYP2Hlk/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpD8wDDR2qK2B8IYlbEtMBD631b34AD04K1ke1eRk0ILj03M6u8G2fhTbPyTNEuog_99Sc1SbV8nVR3Zyj3lLhcvWYuJ61XOSnVDYYXGoDHhOwd-0-XKzS3iY4umcWfYb9aVJqLeGFtI0/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOUR ID/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
float: left;
width: 147px;
height: 147px;
margin: 0 6px 6px 0;
padding: 0 0 0 0;
border-bottom: none;
list-style: none;
}
#abt-social-icons li a {
line-height: 1px;
display: block;
}
#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
#abt-social-icons li a span {
display: none !important;
}
</style>3. Sliding Social icons with Hover effect for Blogger
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QpGmW_gx8sZKbCMArb4aVA5kp3AJYKleAnI21T7tntKqiZ-cXBYGYgaCOGsthvXBdJ3bVE3pbQ_O_t6lbALbMISJn4UnpyuPohXcSA7ApxAPOPRyPa5xcKm8CZzu9D60dBpTCdQJUw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QpGmW_gx8sZKbCMArb4aVA5kp3AJYKleAnI21T7tntKqiZ-cXBYGYgaCOGsthvXBdJ3bVE3pbQ_O_t6lbALbMISJn4UnpyuPohXcSA7ApxAPOPRyPa5xcKm8CZzu9D60dBpTCdQJUw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtibHx1N0ab2eReO1dOeLSgR351EoiZwT5pKiqzDGz3DPU_vgtuYJH82CPIn1tU5QEezFPpN4fd4S4o52Ij7f5u8mxtqjieLyUrAKTj0kaIInfcdlvfSO7PMNjwQkWY0GDfwV7F-nfw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtibHx1N0ab2eReO1dOeLSgR351EoiZwT5pKiqzDGz3DPU_vgtuYJH82CPIn1tU5QEezFPpN4fd4S4o52Ij7f5u8mxtqjieLyUrAKTj0kaIInfcdlvfSO7PMNjwQkWY0GDfwV7F-nfw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrC68Y8Pf9RXzVoOi36Se8F5pGCL_qwGK2rhbecqmBI-MpHEhQf4Y4Yf-ZWQ5UvPH9-1Ll-Fz9Oky_TfWSIZgd2pJ3wxQc2THz-EgxCSyoGBLmcKo1biV1XGbrfl4u2oHCHP6ZdBTKEw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrC68Y8Pf9RXzVoOi36Se8F5pGCL_qwGK2rhbecqmBI-MpHEhQf4Y4Yf-ZWQ5UvPH9-1Ll-Fz9Oky_TfWSIZgd2pJ3wxQc2THz-EgxCSyoGBLmcKo1biV1XGbrfl4u2oHCHP6ZdBTKEw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nOn6XKqDOTFOlLOM9iVnvhWl-5C1ub-R-9flkKDC7pcrxXRxfIkE_JNvE4oRIXalixcjBL7buguoLFg2GlHYm9NdNzgKuZTdK54eF0scKWV2NYGLQeOcv0mddWSTq_2rvke6AmipXg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nOn6XKqDOTFOlLOM9iVnvhWl-5C1ub-R-9flkKDC7pcrxXRxfIkE_JNvE4oRIXalixcjBL7buguoLFg2GlHYm9NdNzgKuZTdK54eF0scKWV2NYGLQeOcv0mddWSTq_2rvke6AmipXg/s1600/twitter.png) no-repeat 0 0}
</style>
4. Metro Style Social Icons for Blogger
div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/your FB rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/your Twitter></a></li>
<li><a class="gp" href="https://plus.google.com/your G+"></a></li>
<li><a class="pi" href=http://pinterest.com/your Pinterestrel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/your Linkedlinrel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/Your Youtubeurl></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/your Feedrel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>5. CSS Social Icons with Hover Effect for Blogger
<style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
</style>
<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhpHBfv2tKYuE5ngDorKkxRCzukNTzJGGhNVYgQC9VvS8N4EOHcJJIv98bt_AHTL0xSp4hMxq2l2eVUqiMKtp_mVNFCMoUTOcGoWzlncLGt47Lfo-hGzYF0GgrrpitRbbcjzbnFSnP3xV/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcTnJxVc3DUCG-Op1nGAAIhDTV0jZPkNehtMQKOATjwlqPiaLLsTE10TNXN2vA-R_-y18lXKBCZ7YMGDHviTv-0vWNbDR59Vv2bkbVDXZ1Th86dq5mUqJanYYpr6QvWgeO-Jeq2ULMWk1/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/fbpageurl" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ExOgK1g6GBmk6Coo0ukq-eI1UqbN_WipuEwjqUxQKfqa5dhqPMy2sH7y0habbzBLZhxSr3jQClnmVdARLmQ6F8sze4m-qHLsq5_0DSsKFPuaFJgpKnhyphenhyphen1qr8I0VGzPceIMibplA3_IY0/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/twitterurl" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79MEXDGE3BEwBbL9YpDr881NturNcvRl2LzX2tGpSEawFn1JSEnqDIG3yEq1maaIzxPWeA4nv6Z2WwgRT1MtccFLYdQGi9qm4LegBbT0JbpYSsRXK59EPxkuY0MM08spwlbz8IAHAFHUK/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/googleplusurl" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtZv0PEcEQWEZEvnwgLpQxCrp1hzX-wYaPBYGhoEwKdRvv6xuUDeXGLurLf-lkX3af_z7DXGODz1T7lAstD_oL67ZRQKpcvvL7es3DObWphyWNPZ4L_zZi22XlH4RNrikxZTVJQRUf4T2/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/pinteresturl/" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_G_AW35C3LyKxVXro70Ye5sIsvMVbq8d2taRxmoInhTku6mwRds28r1noGskUx5KXSr7pmxg_tQIvmoWA0Ix53u8G_vjFVTMQnd26VDFiAbRkiG9HLmbb31gPS2WpsatqYS0hzK6mT7b/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>Selamat mencoba...!!!
sourche : http://www.allbloggertricks.com
0 Comment:
Posting Komentar