كيفية اضافة كود اداة أيقونات المواقع الاجتماعية بشكل جميل وثابته

كيفية اضافة كود اداة  أيقونات المواقع الاجتماعية بشكل جميل وثابته

كيفية اضافة كود اداة  أيقونات المواقع الاجتماعية بشكل جميل وثابته

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

اضافة الكود لمدونات بلوجر
اذهب إلى لوحة التحكم

تخطيط أو تصميم
عناصر الصفحة
أضف أداة
أختار HTML/JAVASCRIPT

الشكل الاول

انسخ الكود التالي

<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/AVvXsEji5zMgtV_cBprx3vCA7g2xJFVsvhqToeKeg2UU9AGfROoO1AmSw67Nb2Vaxn_x2j54w-aPi9Mk2QjqlKkbBcyKk6F6gJtTR-Agb6nZJj8kbVnZZl3I74pU38ogkSecGJVXm_4xWT1UPlsl/s190/woody%2520icons.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:#A15203;
border-radius: 10px;
color:#540000;
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:#A15203;
border-radius: 10px;
color:#540000;
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:#A15203;
border-radius: 10px;
color:#540000;
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:#A15203;
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:#A15203;
border-radius: 10px;
color:#540000;
text-shadow:1px 1px 0 #44a8d0;
}


</style>

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

<li>

<a class="about" href="http://conda3ianllkhir.blogspot.com/">
<span>تويتر</span>
</a>
</li>

<li>
<a class="services" href="http://conda3ianllkhir.blogspot.com/2012/09/blogger-widget.html">
<span>الخلاصة</span>
</a>

</li>

<li>
<a class="portfolio" href="http://conda3ianllkhir.blogspot.com/2010/06/blog-post.html">
<span>يوتيوب</span>
</a>
</li>

<li>
<a class="contact" href="http://conda3ianllkhir.blogspot.com/">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://conda3ianllkhir.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

لاتنسى تغير الروابط الزرقاء.

الشكل الثاني

انسخ الكود التالي

<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/AVvXsEjUs8OiGFnH7PQlog47UjQCh8e_avtwwJ0MzegcevQPV3wRR_cE6YT1JBQBlbsJT3R8bzNS9R4h4S505n5ndFFjoWVD1gYH3AMXXAR77OK8JvVch6Eelw10KZBqlSXAzR1r7Y44Vd-64EfE/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://conda3ianllkhir.blogspot.com/">
<span>الفيس بوك</span>
</a>
</li>

<li>

<a class="about" href="http://conda3ianllkhir.blogspot.com/">
<span>تويتر</span>
</a>
</li>

<li>
<a class="services" href="http://conda3ianllkhir.blogspot.com/2012/09/blogger-widget.html">
<span>جوجل بلس</span>
</a>

</li>

<li>
<a class="portfolio" href="http://conda3ianllkhir.blogspot.com/2010/06/blog-post.html">
<span>الخلاصة</span>
</a>
</li>

<li>
<a class="contact" href="http://conda3ianllkhir.blogspot.com/">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://conda3ianllkhir.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

 لا تنسى تغير الروابط الزرقاء.

كيفية اضافة كود اداة  أيقونات المواقع الاجتماعية بشكل جميل وثابته