Sahabat
cara membuat atau memasanag sheren media social melayang di sebelah cakep deh coba sahabat lihat gambarnya
kalau seneng silahkan sahabat mau menggunakannya untuk mengcopy pastekan di blog sahabat.
berhubung waktu sudah magrib jadi g usah basa basi lagi langsung ajja ikuti tutorialnya sahabat.
temukan kode </body>
dan letakan di atasnya kode tersebut
selesai des sahabat
cara membuat atau memasanag sheren media social melayang di sebelah cakep deh coba sahabat lihat gambarnya
kalau seneng silahkan sahabat mau menggunakannya untuk mengcopy pastekan di blog sahabat.
berhubung waktu sudah magrib jadi g usah basa basi lagi langsung ajja ikuti tutorialnya sahabat.
temukan kode </body>
dan letakan di atasnya kode tersebut
<style type='text/css'>
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 20px;
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/AVvXsEiN1aPA0L_V9WBq9cgdLgU7AzRC4XG8ZYre6LYF80rY3VE5-atXssubKfQ4W-S1TN3wCXyeRiE2nBM1sUxWbSWCs4IA3GKcHN6Gzwiwbp9LISHJb9volecWb9SU21z7rT87O9Uasx8NiqU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYuttmLjfZYJwf19Z12_p74IuHMaB8CedYG9U97METrzntcOoz5wSU9MtEHFNItbNyWCO10w4dzPpu1bR8e03M8PacpA57VMpiG64E6tqYDQBsDjSya03SCykxuLw31dFyeSuZuW-mfo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPl5iN-1jDgLzWggD0OAyjNwgBr5wUFhR1bxEhhS7PHjKAm32PRMXojTRcIYcli3bnvnh-l8njvXtraug1kitUan-MAvMIx64aYfbLh0vXBby9gU-uXwPSyqDMvxs7XZQSitx6OS7lzc/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5RbuW2lLAUMxN4xOqXiPxrZnmo7zlWXUHQi7lYX6vlPu1byZLkX0Z-WhreJoVjydVjd6Dp97IVMfvDuKMIzv_7UDzDpeobYLFsv3AFWVSzMkkifENw02uFAy9UaxtRIdTNENfdE4Btg/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsoqRdZ-sFUnKLx4cH3ak7eqO0SAMurjj1yaglJcq7WQMVZxG8mQOrJDKGHdU4PonEi-zCebEAzb14X4umfQQYfpY1GD-7OHWicT-esY0lWdMAO1gp51Lh3XKn5n-ogl4K5d-cWXL61dU/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 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='https://twitter.com/desalinggajati1' title='Twitter'/></li>
<li class='googleplus'><a href='https://plus.google.com/103936483444691797511' title='Google Plus'/></li>
<li class='facebook'><a href='https://www.facebook.com/desa.linggajati/' title='Facebook'/></li>
<li class='rss'><a href='#' title='Rss'/></li>
<li class='pinterest'><a href='https://id.pinterest.com/desalinggajati/' title='Pinterest'/></li>
</ul>
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 20px;
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/AVvXsEiN1aPA0L_V9WBq9cgdLgU7AzRC4XG8ZYre6LYF80rY3VE5-atXssubKfQ4W-S1TN3wCXyeRiE2nBM1sUxWbSWCs4IA3GKcHN6Gzwiwbp9LISHJb9volecWb9SU21z7rT87O9Uasx8NiqU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYuttmLjfZYJwf19Z12_p74IuHMaB8CedYG9U97METrzntcOoz5wSU9MtEHFNItbNyWCO10w4dzPpu1bR8e03M8PacpA57VMpiG64E6tqYDQBsDjSya03SCykxuLw31dFyeSuZuW-mfo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPl5iN-1jDgLzWggD0OAyjNwgBr5wUFhR1bxEhhS7PHjKAm32PRMXojTRcIYcli3bnvnh-l8njvXtraug1kitUan-MAvMIx64aYfbLh0vXBby9gU-uXwPSyqDMvxs7XZQSitx6OS7lzc/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5RbuW2lLAUMxN4xOqXiPxrZnmo7zlWXUHQi7lYX6vlPu1byZLkX0Z-WhreJoVjydVjd6Dp97IVMfvDuKMIzv_7UDzDpeobYLFsv3AFWVSzMkkifENw02uFAy9UaxtRIdTNENfdE4Btg/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsoqRdZ-sFUnKLx4cH3ak7eqO0SAMurjj1yaglJcq7WQMVZxG8mQOrJDKGHdU4PonEi-zCebEAzb14X4umfQQYfpY1GD-7OHWicT-esY0lWdMAO1gp51Lh3XKn5n-ogl4K5d-cWXL61dU/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 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='https://twitter.com/desalinggajati1' title='Twitter'/></li>
<li class='googleplus'><a href='https://plus.google.com/103936483444691797511' title='Google Plus'/></li>
<li class='facebook'><a href='https://www.facebook.com/desa.linggajati/' title='Facebook'/></li>
<li class='rss'><a href='#' title='Rss'/></li>
<li class='pinterest'><a href='https://id.pinterest.com/desalinggajati/' title='Pinterest'/></li>
</ul>
selesai des sahabat
