postingan kali ini cara memasang
Creating A Sticky Social Share Bar with CSS3 Transitions and Transforms
hampir mirip dgn floating social share efek bounce yg milik para blogger,..tapi widget sosial share ini simple kok
dan tdk memberatkan loading blog anda...
berikut contoh gambarnya,..
* buka blog anda
* template >>> edit HTML
* tambahkan kode css dibawah ini ke dalam ]]></b:skin>
.sticky-container {
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
right: -140px;
top: 130px;
width: 200px;
}
.sticky li {
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
cursor: pointer;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.sticky li:hover {
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
-moz-transform: translateX(-115px);
-o-transform: translateX(-115px);
-ms-transform: translateX(-115px);
transform:translateX(-115px);*/
/*background-color: #8e44ad;*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.sticky li img {
float: left;
margin: 5px 5px;
margin-right: 10px;
}
.sticky li p {
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}
* kemudian tambahkan gadget ke dalam kode HTML/JAVASCRIPT di bawah<div class="sticky-container">
<ul class="sticky">
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/fb1.png" />
<p>Facebook</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/tw1.png" />
<p>Twitter</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/pin1.png" />
<p>Pinterest</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/li1.png" />
<p>Linkedin</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/rss1.png" />
<p>RSS</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/tm1.png" />
<p>Tumblr</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/wp1.png" />
<p>WordPress</p>
</li>
<li> <img width="30" height="32" title="" alt="" src="http://www.cssscript.com/demo/creating-a-sticky-social-share-bar-with-css3-transitions-and-transforms/img/vm1.png" />
<p>Vimeo</p>
</li>
</ul>
</div>
* simpan / save*** S E L A M A T M E N C O B A ***
Baca Juga Artikel Terkait Lainnya