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/AVvXsEifDHGmqogcOfDiCmhfBPqUlNFBkDexKV3S1EJ3ZsyattM5-IsPJOXmNCX0yw_Zc9pj915KSudmEGRgPh875UUUdGhirak8jokk5wpRAmTQMnVY4nbL729x79kj__57WVdi7oPdeuOCfaM/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/AVvXsEhZ845_q1fmgujw_6mribZa2r51TY8HhR3U2ZHJNMg-LgepSeM77PRDwK4iVNHJlMLaT7uNpMDE27IgjLkHWkCpEm17JpeJCe03k0wlxA1MMW52M64RRKwNezOR-Hk_V9rCl_Ha18ohow8/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/AVvXsEjdDZ3keRgAGbrJwyRQrODFvmOCL4ZZdpjVBXMrGus8nB8ms2M7VSJgZgh7fc-fdQUlwkfDaODibnUvMiZpYpnUtxQIoCuduU2t0eT58Angy_nfarGDYKCr7Sz21eUIgCqGNNTt-9oYkiI/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/AVvXsEgNkfz9zPypIj9bXo3S0vPL4weZCEQao2y0uOGG4Ld9Z6QuMxF3rTZ6K1AdNu_lO9B_4my4UCF891DzZcdsa64qsM2KeHj0QQaYek9ghmsvmcVh0yhnk1QDeJkKzAqcdFpLa0c5ZRv789Y/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/AVvXsEi4LL_IQuW1v304oA7QYw9WJQZGQm6Sfoz3Y-JZHOTzr45jDQnIxlcpsLB-GAR8Z4VoL_FvY-4PRm4rJb3xB6lMFBtYIdwcSPTJ5nab_K20kcpkhQ1V2TxRHci0KzWGdYL12aPMLZG2G_Q/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