أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

شرح تزيين شكل التسميات وإضافتهم على شكل ازرار بعمودين ببلوجر

السلام عليكم إخوتي الكرام

 أقدم لكم هذه الإضافة الأكثر من رائعة والتي من صنعي

 تزيين شكل التسميات ( Label ) وإضافتهم على شكل ازرار بعمودين

والصورة تتكلم


كما رأيتم الإضافة أكثر من جميلة كما انا مثل أزرار جوجل من ناحية الشكل

لمشاهدة حية


شرح الإضافة

قم بالبحث عبر تعديل القالب

على الكود  لتالي

]]></b:skin>

ضع قبله الكود التالي

#arabetutorial1 ul li{
color:#2D2C28;
float: right;
width: 45%;
}
#arabetutorial2 ul li{
color:#2D2C28;
float: left;
width: 45%;
}
#arabetutorial1 li{
margin-bottom:5px;
padding:5px;
}
#arabetutorial1 li a{
color: #777777;
font: 12px verdana;
height: 20px;
width:120px;
font-family:'DroidKufi-regular',Arial,Helvetica,Tahoma,sans-serif;
text-transform: uppercase;
transition: border-color .218s;
background:#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
text-align: center;
}
#arabetutorial1 li:hover{
background:#FCFEFE; 
color:#00D1FF;
padding:5px;
cursor:pointer;
}
#arabetutorial1 li a:hover{
color:#333;
font-size:12px;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}


ثم قم بإضافة الكود التالي وهو خاص بHtml

إذهب إلى تخطيط ثم إضافة اداة

إختر اداة HtmlJavaScript

وقم بلصق الكود التالي

<div id="arabetutorial1">
<ul>
                            
<li><a href="#">التسمية الأولى</a></li>
<li><a href="#">التسمية الثانية</a></li>
<li><a href="#">التسمية الثالثة</a></li>
<li><a href="#">التسمية الرابعة</a></li>
<li><a href="#">التسمية خامسة</a></li>
<li><a href="#">التسمية السادسة</a></li>
</ul>
            
</div>


التعديلات

ضع بدل التسمية الاولى حتى التسمية السادية بالتسميات التي لديك

أما علامة # ضع بدلها رابط كل تسمية

وطبعا لو أردت زيادة عدد التسميات ستكتفي بإضافة او نقص السطر التالي

<li><a href="#">التسمية</a></li>

أرجوا ان تنجح معكم وتنال إعجابكم

وأرجوا تعليقاتكم لانني تعبت حقا في عملها

والسلام عليكم ورحمة الله تعالى وبركاته

آخر مقالات المدونة

هناك 7 تعليقات:

  1. مشكوور أخى دروسك كلها جميلة ومفيدة

    ردحذف
  2. العفو أخي الكريم شكرا على التعليق :)

    ردحذف
  3. جزاك الله كل خير على هذا الابداع

    ردحذف
  4. ألف مشكور على تفاعلك الملاحظ بمدونتي (k)

    ردحذف
  5. العفو أخي الكريم وشكرا على تفاعلاتك بالمدونة

    ردحذف
  6. شكرا اخي على الاضافة جربتها على مدونتي http://tech-19.blogspot.com/

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن