طريقة اضافة قائمة لمدونتك احترافية بتقنية css

mohamed-alaa

الثلاثاء، 27 مايو 2014

اقرأ ايضا

اضف قائمة احترافية لمدونتك بتأثيرات احترافية حصريا علي حلول قائمة جديدة وجميلة للبلوجر blogger

اولا : اذهب الى لوحة تحكم مدونتك ثم اضغط على قالب ثم اضغط على تحرير HTML

وقم بالبحث عن

]]></b:skin>

ثم قبله مباشرة اضف هذا الكود

<#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{     /* The background sprite: */     
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuxekRryl0B_J6k1suaX3u1C3CfZPyZZpv2OULXXXPmo10DHvGq4OXU7cni3FxlBN1Sn05ZtgeJby0AmtVfuxnvgDMnuDFEf8YK0uqyvdeHLZKbZrwlC1dMudGm_nEF9IMRa0anBjP6M/s1600/navigation.jpg')
 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 5px 
#9ddff5;     -webkit-box-shadow:0 0 5px #9ddff5;     box-shadow:0 0 5px 
#9ddff5; } /* Green Button */  #navigationMenu .home {    
background-position:0 0;} #navigationMenu .home:hover {    
background-position:0 -39px;} #navigationMenu .home span{     
background-color:#7da315;     color:#3d4f0c;     text-shadow:1px 1px 0 
#99bf31; }  /* Blue Button */  #navigationMenu .about { 
background-position:-38px 0;} #navigationMenu .about:hover { 
background-position:-38px -39px;} #navigationMenu .about span{     
background-color:#1e8bb4;     color:#223a44;     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:#c86c1f;     color:#5a3517;     text-shadow:1px 1px 0 
#d28344; }  /* Yellow Button */  #navigationMenu .portfolio { 
background-position:-114px 0;} #navigationMenu .portfolio:hover{ 
background-position:-114px -39px;} #navigationMenu .portfolio span{     
background-color:#d0a525;     color:#604e18;     text-shadow:1px 1px 0 
#d8b54b; }  /* Purple Button */  #navigationMenu .contact { 
background-position:-152px 0;} #navigationMenu .contact:hover { 
background-position:-152px -39px;} #navigationMenu .contact span{     
background-color:#af1e83;     color:#460f35;     text-shadow:1px 1px 0 
#d244a6; }</a>

ثانيا : قم بالذهاب الى التخطيط ثم اضف اداة جديد (يجب ان تكون اعلى رسائل المدونة الالكترونية)

ثم اختر اداة

HTML/Javascript

واضف فيه هذا الكود

ثم استبدل YOUR URL برابط الخاص بك

بهذا انتهي الموضوع

الثلاثاء، 27 مايو 2014