[Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر
[Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة والسلام
السلام عليكم ورحمة الله وبركاته.
[Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر
مثال مباشر : هنا
طريقة التركيب :
- ادخل مدونتك
- ابحث عن ]]></b:skin>
- ضع هذا الكود فوقه مباشره او قبله :
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
#contact-links{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
text-align: right;
font: 12px 'Droid Arabic Kufi', serif;
direction: rtl;
}
#contact-links a{
color:#4C9FEB;
}
#contact-links a:hover{
color:#3D85C6;
}
a#o-7lol-dro{
background:url(https://jetara.googlecode.com/svn/trunk/icon-ios7-arrow-down-16.png);
background-repeat:no-repeat;
background-position:center left 5px;
padding-left:25px!important;
}
#menu-container{
background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),color-stop(#e9eaea),0));
background:-webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
-webkit-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear:both;
height:46px;
padding-top:1px;
}
#neat-menu{
float:right;
}
#neat-menu a{
text-decoration:none;
}
#neat-menu ul{
list-style:none;
margin:0;
padding:0;
}
#neat-menu > ul > li{
float:right;
padding-bottom:12px;
}
#neat-menu ul li a{
-webkit-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color:#D1D1D1;
border-image:none;
border-style:solid;
border-width:0 1px 0 0;
color:#333333;
display:block;
height:25px;
line-height:25px;
padding:11px 10px 10px;
text-shadow:0 1px 0 #FFFFFF;
}
#neat-menu > ul > li.active > a{
background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom:1px solid #2D81CC;
border-top:1px solid #4791D6;
-webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
-moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color:#FFFFFF;
margin:-1px 0 -1px -1px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a{
background:url(https://jetara.googlecode.com/svn/trunk/house-32.png);
border:0;
background-repeat:no-repeat;
background-position:center;
color:#FFFFFF;
margin:-1px 0 -1px -1px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
width:25px;
}
#neat-menu ul ul{
background:-webkit-gradient(linear,left top,left bottom,from(#F7F7F7),color-stop(#F4F4F4),0));
background:-webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:-moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:-o-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border:1px solid rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 1px 0 #FFFFFF inset;
-moz-box-shadow:0 1px 0 #FFFFFF inset;
box-shadow:0 1px 0 #FFFFFF inset;
height:0;
margin-top:1px;
opacity:0;
overflow:hidden;
width:240px;
padding:0;
position:absolute;
visibility:hidden;
z-index:1;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
#neat-menu ul li:hover ul{
margin-top:0\2;
height:auto;
opacity:1;
visibility:visible;
}
#neat-menu ul ul a{
border-left-width:0;
border-top:1px solid #D1D1D1;
-webkit-box-shadow:0 1px 0 #FFFFFF inset;
-moz-box-shadow:0 1px 0 #FFFFFF inset;
box-shadow:0 1px 0 #FFFFFF inset;
color:#444444;
height:24px;
line-height:24px;
padding:7px 12px;
text-shadow:0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top:1px solid #4791D6;
-webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
-moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color:#FFFFFF;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a{
border-top-width:0;
}
#menu-search{
margin:8px 10px 0 3px;
float:left;
}
#menu-search form{
background:url("data:image/gif;base64,R0lGODlhDAAMAMQRANXV1fPz897e3sbGxvX2+Nzc3NHR0dvb2+np6ebm5vT09OLi4sHBwba2trS0tMjIyLOzs////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABEALAAAAAAMAAwAAAVHYBQtT/MsYhoBUNsC6uKcAemg4uMkaTKnDYgqAmmkBhBE7ycSQB5KxANySCkMjmzLwVApCqXHgdEwDgkiBbk7TAXWbRXjEAIAOw==") no-repeat scroll 5% 50% transparent;
border:1px solid #CCCCCC;
-webkit-border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height:26px;
padding:0 25px;
position:relative;
width:130px;
}
#menu-search form:hover{
background-color:#F9F9F9;
}
#menu-search form input{
color:#999999;
height:26px;
text-shadow:0 1px 0 #FFFFFF;
background:none repeat scroll 0 0 transparent;
border:medium none;
float:right;
outline:medium none;
padding:0;
width:100%;
font: 10px 'Droid Arabic Kufi', serif;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder{
color:#C4C4C4;
}
- ثم ادخل التخطيط.
- واختر مكان مناسب وجيد , مثلا اسفل الهيدر او فوقه , او فوق صندوق المشاركات .
- اختر اداة HTML/JAVASCRIPT
- والصق بها هذا الكود مع استبدال الروابط والنصوص :
<div id='contact-links'>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'> </a></li>
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a href='#'>قائمة فردية</a></li>
<li><a href='#'>قائمة فردية</a></li>
</ul>
</nav>
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='ابحث ...' type='text' value=''/>
</form>
</div>
</div>
</div>
عنوان التدوينة:
[Blogger-Scholars] إضافة قائمة منسدلة كاملة احترافية لبلوجر
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي
عدد المشاهدات :
Zied Zaabi
زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب
* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
محول الأكوادعبر عن تعليقكاترك بصمتك