كود عرض المواقع الاجتماعية بطريقة رائعة

السلام عليكم ورحمة الله وبركاته اليوم في محترف الانترنت Xs ساقدم لكم كود رائع من تصميمي حرفيا للمواقع الاجتماعية يعرضها بشكل رائع استغرقني القليل من الوقت لكن اعطى نتيجة لاباس بها اذا.

حسنا اذا ننتقل مباشرة الى الكود:

<div id="background"><div id="Layer1"><a href="http://www.twitter.com/ElmaachiSimo" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXLBXV8eahOWxeWPE6JtKehgx5UUwURVijdWACs9WMoclbkyov7ILuPvpXv0I8xJs_KmMUiZyy2GVFu5za-LtAwMAhMuzniZKIyDQYZJwqCpjd8HkJ02Q0IVOdLMxM_1E_IZ1WplP1xe0/s1600/Layer1.png" /></a></div><div id="Layer3"><a href="http://www.facebook.com/elmaachiS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN7grZMHYnb8vt_O9QDYE6nhbQ6-8iCHH6TfeoiOdNsmQGHYQ0bil3G48BQxxl0jsI1V-DtP22UeOSq0AtTUm9KXZXrL59iN0Hxi4TWFdYe27TBKFQpxRwav_D9genkWZDlNIFyPjg8oM/s1600/Layer3.png" /></a></div><div id="Layer5"><a href="http://www.google.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgL75V26H7Dn3ab1CKAjMD5IzDCxKTtA4cjZoTbUoCgxdGangMDu61w2co_ppVoArPwHaFLBAeUJ_EciooZhTSfiYzQ-iktSR_5gcmaJlBQ1ZOssRF7W3JvWdjFjg-29Sh-c-GbUw8eMM/s1600/Layer5.png" /></a></div><div id="Layer9"><a href="http://pro-xs.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8H-koWJbFKZugNTCS1TRkdzzmJhKGoZuAwBO_JcnZgb9oFLeh6bNTihUDe1Jnneu8ECyRSXczwP4Eeyg66ciMC7wkzpZNucWXCr_NWaKQgHDkdrd15xvhsgGVUGebxWGIOvXNDnMPzE/s1600/Layer9.png" /></a></div><div id="Layer7"><a href="http://www.youtube.com/simoelmaachi" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmnWwkl5wszjCAYU3pUTXDvDcCXJ01gR179Fw2FcZhjuDwQJPT8xlsE6UgeJ4NGslE6eINh9tJLyJptTf-2Twzn3jw3pOWT5vPtNZhPNLnnIjWXxbNsFu_m9kPnYuG4Ervpl6WfG0QmU/s1600/Layer7.png" /></a></div><div id="Layer11"><a href="http:" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJwWJGKNq_88TEdbLWMhYEfxqbmPyIQxle6Rutfjkc-w6gM_K5UT0BcLK3OYn6yxbooh65My32cs4auM3F2QVBcNfOGE403GE4CkPDkUbpX5Sz1H3TplQ25nLiLbnx5X0hr5SpcPThrc/s1600/Layer11.png" /></a></div></div><style>#background {      left: 0px;      top: 0px;      position: relative;      margin-left: auto;      margin-right: auto;      width: 284px;     height: 341px;      overflow: hidden;     z-index:0;    } 
 #Layer1 {      left: 0px;      top: 170px;      position: absolute;      width: 57px;     height: 171px;     z-index:1;} 
 #Layer3 {      left: 56px;      top: 0px;      position: absolute;      width: 58px;     height: 341px;     z-index:2;} 
 #Layer5 {      left: 113px;      top: 57px;      position: absolute;      width: 58px;     height: 284px;     z-index:3;} 
 #Layer9 {      left: 170px;      top: 227px;      position: absolute;      width: 57px;     height: 114px;     z-index:4;} 
 #Layer7 {      left: 226px;      top: 114px;      position: absolute;      width: 58px;     height: 227px;     z-index:5;} 
 #Layer11 {      left: 0px;      top: 311px;      position: absolute;      width: 284px;     height: 30px;     z-index:6;} </style>

 هنا اي اللون الاحمر سيكون عليك تغييره بما يناسب ثم مبروك عليك الكود.