أكتب إسم موقع أو شركة ..

الخميس، 2 يناير 2014

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

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

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

 تزيين شكل التسميات ( 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="#">السمة 1</a></li>
<li><a href="#">السمة 2</a></li>
<li><a href="#">السمة 3</a></li>
<li><a href="#">السمة 4</a></li>
<li><a href="#">السمة 5</a></li>
<li><a href="#">السمة 6</a></li>
</ul>
            
</div>


التعديلات

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

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

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

<li><a href="#">7</a></li>

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

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

والسلام عليكم ورحمة الله تعالى وبركاته
▩ مواضيع مقترحة :
هل إستفدت من هذا الموضوع ؟ من فضلك شاركه على :

ليست هناك تعليقات

جميع الحقوق محفوظة لــ: Azzoudz 2017-2013 ©