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).

Komentar →