17. 4. 2015.

Kako dodati Vertical Social Media dugmice

Нема коментара   

Vertikalni "Social Media" dugmici



 Postupak je isti kao za "SOCIAL MEDIA DUGMICI" .

Izgled > Dodaj gadzet > HTML/JavaScript 





<style>
.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfX3pwdTyCK099Km2Dp_jpr6Q-SpQX10_V8kNoyPRPnhdTGSi0wQ-UsBntuaHykwqx04hakbVk14tOmfSdO08Wz2LMdS3WPnZbFVjpvAZ5sl4chvoFlownNFT1YamYZvrkW42H6bwqm58/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7eRhUievlBOnjWIjopw4Gn0L11hjfaGq9Zq9UjI20TqatxJI-X2434E3lLwnusvr6Ki5lIpViT9-rUHtT8Yv1FjQl2UE5D6fu9OF5xdNZ_EIHMlCi8eWyTr4JeDuEIin3V-QJme25C4/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJj6F0-LPcriNHrF_gJ49LH47G4Fbe9-LM2BcciZ-iRycGsC2wVZ3KlXb8cpsYUOqccbnR_XEPrTjI3xIStBujAbZj2tDOJx62uFrLDt6i-zpfSRIZwUmavRKjjk9QWIJPSf-_GxOJR8/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpuOET1aEa5kk_yAnDv0iH21k2k1S_v-JV28x6YqZ6CazuwZZ6LzC-scag6w_jWbQGtjU1NPI_ms58JG48dg2Z2oKod6xmqEQVEyHKwc_k7ftXUvHqpQehHDdYZuzL7kj-OfYset0546Y/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.fixedmenutw_1{margin:0px 0 0 43px}
.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lxaQzJA_F6i_H1HghyphenhyphenH8cRA7M_cajGy7-OL74B0A8JrgQtw_ybbsOhlebZ724ZQkJBX_tZITHedKJjYdyRu-x6NyTTlcdiuQMrnFhn00Y0VcV6SQ4bilJOKwDNGx0Y5XRM1wGDZUqAc/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ZYehpCtPDPUUarVMmEeYwymG7tYQtFH4ioOaqrtizlb2WZbzxa-L09wSm1dd6n1Vd_C1Q7XDDB3Pi0tO0bjW37zNr55aaVoCg4kjnpOBwUEDHLEPfEBqEGAkRHbhFICra4UJGWRT5-w/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.fixedmenufb_1{margin:0px 0 0 43px}
.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugixeWi3gB8NwQsKa3Hz0ZZGzWd6vFpiyYi0FnUssoPlBnlf9EjechL_qkfnDDIIjkmizQwlu6NpnjXSU2IP0KlDOuNzF0gNzzOPVRi9XNt-iLQT4FffFW-YZvrk38Fk510MFtm090t4/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK-DO7MFa7HwHKn2uUvqmWopPU604wAirq2eaW7bT0w8hgwta1KzZwSAwGh-LgazzBiJ8-x-E8gmoLGHplYoyt14547_5Y863lynb0ux8MH5Yb-h8Uvxh2IQtMkaVpzveErgk6QRMXyLc/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='fixedmenu' onmouseout='this.className=&apos;fixedmenu&apos;' onmouseover='this.className=&apos;fixedmenu1&apos;'><div class='fixedmenu_1'>
<a href='VAS FACEBOOK LINK' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7CyUZmlQyBTUuWIiWSkw7SJczyBuWLDHimwUxU7eAfFFxOLpVmHNwPoVlVmkK98qFFE8jOAmqiO9LfSpMJx_0tGjaiUP8-r9lEwchtIA-kWqB-4Xi33sqVt_mhYoRG_Srn1EfR5pwQs/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='fixedmenutw' onmouseout='this.className=&apos;fixedmenutw&apos;' onmouseover='this.className=&apos;fixedmenutw1&apos;'><div class='fixedmenutw_1'>
<a href='VAS TWITTER LINK' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9I0O3DnMbmDuNj4g1rdvEFQhfWwdJp070atAdUJC4tyDX4_uVUgfjVG2HpBLPFNgswH4G588M9r96avHEw_DRic7CFLdgEWjBw9rcz1cFdDMWtP7p2M1EGSTSGUft6j24mPl4TJyCSLI/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='fixedmenufb' onmouseout='this.className=&apos;fixedmenufb&apos;' onmouseover='this.className=&apos;fixedmenufb1&apos;'><div class='fixedmenufb_1'>
<a href='VAS GOOGLE LINK' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBNfe_O9wZlqxeX7dFmBwUtZwjablFrMfWZczgC6tgnuczlYJ5vBnAFhE_J2BhRJLvySyX9PxT4zxvDwz7kqVlxEs5ERMpDQGFy4b2ejFu-WQt__Wid3mTiBHHER2Sg1hdMBF3mCBClc/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='fixedmenurss' onmouseout='this.className=&apos;fixedmenurss&apos;' onmouseover='this.className=&apos;fixedmenurss1&apos;'><div class='fixedmenurss_1'>
<a href='VAS RSS LINK' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzZwdcgckhNN9hd0mHXOzyO1e0VBcOUQpuliW0zRBbDLxPzphtp_uzczFgF6KVqiE2HP5yN87D-rU6DYHG_an1bKxbhNU_h-_HCZ_YM_52gLu0QG5RfaM54UoGzCAGgYciWSU8z1IAQII/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>





<style type="text/css">
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUaXrM7ICKYa8G1i9nf1gc4rTS7Tq4zTuXVa7wVrDcdginlu9hx7WuauAg1qPCwfJ6iLLEWDgJFX81QVtnZ2LWW7EWuynLHf2Vavl5Jtsj39j6xocZ55P3y9dc0Yl4ihMODKyVOM-7x4/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xTdtI2YpC21qOLbbk0JxZ_NIdAn54hBeHBmkJq5rQzWOYV6pdNOPPIOkUK1WLffyToUFjcZQETuGsyLDZ8dtLzrHGu3jHc7en9TsejG_bLihWpuqq96VxaKWqzNN3iECvL3aCkAL_1k/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3681UNaLYAunhnUpzFU4s9Jhpwh3dl1ckUFBvYlW_0qbKhR3I-Lxy70wuSsrnFBNQ3Vxd5i0JCGj-tWJ3dyiPW_i3ae0FF0mVYHxsShclSnSk3bEGioe4_0GS8kaY-nZxDT6CJ8sLSF0/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBcnrSCz4eP_T0YR6MNqg4iDSUalsIPHE4a3ym5xi_Ukc9GEo1-pp39uvC8UoUaJmQLOy-vwgY_xZuPEU8cnkjuXt8ntxnW1TZo83ZeP5L08gCYuJZdyrp3suoVp86opJcyjrB1FqCzo/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd0WMRCTWA9_zsP-cCj1OV40a9UanneKrcqxdXbrF03iwBD8Wn9uJh9YaZrlM7929I2KvdibNYcNZu65oUuMgQzpuap6LTFdPCdvh917bOGmKliOBhb1anJ8jsbiBcYXb8ZL79DTbsMJc/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='VAS LINK' title='Twitter'></a></li>
<li class='googleplus'><a href='VAS LINK' title='Google Plus'></a></li>
<li class='facebook'><a href='VAS LINK' title='Facebook'></a></li>
<li class='rss'><a href='VAS LINK' title='Rss'></a></li>
<li class='pinterest'><a href='VAS LINK' title='Pinterest'></a></li>
</ul>

0 komentara:

Постави коментар