إضافة ازرار المواقع الاجتماعية الخشبية الى بلوجر

أثناء تصفحي للإنترنت والبحث عن مواضيع اطرحها لكم اعزائي وجدت في إحدى المواقع ازرار المواقع الاجتماعية بشكل خشبي ففكرت في ان اححضر لكم طريقة تركيبها في الموقع او المدونة نبدأ بالشرح المصور: من لوحة تحكم بلوجر نضغط على التخطيط

ثم اضافة اداة

ثم نختار HTML/JAFA SCRIPT

ثم تأخذ الكود الموجود في الأسفل وتضعه في الأداة وتحفظ الترتيب

<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://lh5.googleusercontent.com/-JUTjfoEynb0/UK0kCV2GfrI/AAAAAAAAEAY/ovkZlVCDcdY/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://www.ahmedalqaisi.blogspot.com/">
<span>الفيس بوك</span>
</a>
</li>

<li>

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

<li>
<a class="services" href="http://www.ahmedalqaisi.blogspot.com/">
<span>الخلاصة</span>
</a>

</li>

<li>
<a class="portfolio" href="http://www.ahmedalqaisi.blogspot.com/">
<span>يوتيوب</span>
</a>
</li>

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

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

ملاحظة استبدل رابط مدونتي برابط مدونتك او صفحاتك على الفيسبوك ويوتيوب وتويتر والنتيجة

إضافة ازرار المواقع الاجتماعية الخشبية الى بلوجر

4/ 5

Oleh Ahmed alqaisi

Ahmed alqaisi تمّ النشر بـ 5:05 ص أضف تعليق

الخميس، 26 مارس 2015