قائمة جانبية ثابتة للمواقع الإجتماعية بـشكل إحترافي

السلام عليكم
إن أزرار المواقع الإجتماعية تلعب دورا هامة جدا في أي موقع فهي تمكن زوارك لمتابعة الموقع او المدونة على حسابهم على هذه المواقع الإجتماعية ومشاركتها مع أصدقائهم.تضم هذه القائمة أيقونات مواقع التواصل الإجتماعى  فيسبوك ، تويتر ، جوجل بلس ، يوتيوب  , RSS بتقنية Css

للمعاينة المدونة نفسها

لإضافة الكود لمدونات بلوجر:
1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT
6.أختر الستايل المناسب لمدونتك وأنسخ الكود الموجود أسفله وأضفه إلى موقعك>
7.إستبدال الروابط الملونة باللون الأزرق بما يناسبك

<style type="text/css">
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vhome.gif
) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QYWckvleXlYWb7H6b6xrH1cmPzpzmyR58kVkVCDQ6bt4oJOpZxrltmBOea4mOus8mM722x2W4yvmTB5ISEUXzktyfu3FWrEBU_uRBDYJcGJNF2GO0bOAtEnv_e4jB2EWRagPMuOqNQjG/s190/social%2520navigation.png') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 0px #FFFFFF;
-webkit-box-shadow:0 0 0px #FFFFFF;
box-shadow:0 0 0px #FFFFFF;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 0;}
#navigationMenu .home span{
background-color:#0033FF;
border-radius: 10px;
color:#3366FF;
text-shadow:1px 1px 0 #44a8d0;
}


/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#00CCCC;
border-radius: 10px;
color:#007A7A;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#FF6699;
border-radius: 10px;
color:#8F0021;
text-shadow:1px 1px 0 #44a8d0;
}


/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#FFCC00;
border-radius: 10px;
color:#540000;
text-shadow:1px 1px 0 #44a8d0;
}


/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#9999FF;
border-radius: 10px;
color:#3366FF;
text-shadow:1px 1px 0 #44a8d0;
}


</style>

<div style='position: fixed; top: 40%; left: 2%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.facebook.com/chahidna">
<span>الفيسبوك</span>
</a>
</li>

<li>

<a class="about" href="http://www.twitter.com/chahidna">
<span>تويتر</span>
</a>
</li>

<li>
<a class="services" href="https://plus.google.com/118295586132431044660">
<span>جوجل بلس</span>
</a>

</li>

<li>
<a class="portfolio" href="http://feedburner.google.com/fb/a/mailverify?uri=chahidna&loc=en_US">
<span>الخلاصة</span>
</a>
</li>

<li>
<a class="contact" href="http://www.chahidna.com/p/foxyform_3.html">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a http://www.chahidna.com/" target="_blank"><small></small></a>