0
komentar
KODE PERTAMA :
/*****************************************
Name : Widget Social Slide
By : Rivai Silaban | Blog Design
Update : Kamis, 07 November 2013
******************************************/
#socialbdrssliding a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
overflow: hidden;
}#socialbdrssliding a:hover{
width: 100px;
overflow: hidden;
}#socialbdrssliding {
float: right;
position: relative;
height: 40px;
}#socialbdrssliding ul { margin: 0; }
#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-thumb,
#socialbdrssliding li .bdrs-title {
display: block;
position: relative;
width: 40px;
height: 40px;
}#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-title {
float: left;
width: auto;
overflow: hidden;
}#socialbdrssliding li a {
width: 40px;
line-height: 40px;
color: #E9E9E9;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 2px 2px #000;
text-decoration: none;
}#socialbdrssliding li .bdrs-thumb { float: left; }
#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }
#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsNdPIzot6Zn1JHECVKu63oQL2xPyuvgIlboYiP0t4hKL9mzllO-1_G0jlCINvPW6SNDmD30MSL8BCLgr5ZBD15pW3IdqZMLM6MIju0uUWsqR8GPNb2qbfrNK-sO2JilrjoBoiMHFT84/s1600/FACEBOOK.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVBbzBa2L8AlfhRLySRxfFFZTlAiJ0ho_cpMl7klXwJajpgSCzHMZ_YlElcUK29ZrfDv8wefbKfGxBlnvrrefLFur2GbrcZPWvI4NAjbU3YOmd2AVaAOOXRWpehnvYFYywOIywxndaJlQ/s1600/googleplus.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHiTLu03ufdCsNxkgZd_5P-pzuo-m270xOPrR7HNiFSJRXp_Z8AjkaPyZPfk0l9Uriw5LNnltoi9J0i7th3cMnyilaX4JfN8f7F1eC-_bW-l7uSiQjTDCJVy11bNU0sbIrN8rUlfP-Qw/s1600/TWITTER.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlptQzTFj0-Sz0hfZDl9cYZOue0Fs4IuU_jaWhpQhj8OMjll-ncbwd-kmiEPYc36666TdHALZnkQb7tI3UJDZHd2Sh4A9GQsHnwA6EaaaoMWkvDXqxog6qN09tVuYTfePAqzFW5YHE5s/s1600/rssbd.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }
#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUk6bBGn_4DlkrYvxJPAYLPt6uhX2FRLFKpUAKtHhc-pC1ON_BsE5ET0DHqgsRgyMqCZcaG3P9lr99MONI9_lw58uwcr-TjNqBYGzR_faWLcYzbLe1gt_Ev8Yl0karoABfOZ8DziOcENE/s1600/youtube.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}
/*code CSS end */]]>
Keterangan warna :
Biru : warna latar gambar social media. (bisa sobat ganti atau tidak).
Merah : alamat gambar social media (bisa sobat ganti atau tidak).
Hijau : nama social media (bisa sobat ganti atau tidak).
0 komentar:
Posting Komentar