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

 
قديم 08-11-2012, 02:04 AM   #1
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
Thumbs up إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : admin




السلام عليكم
بعد طلب الأخ ياسين بتعريب قائمة
Stylish Apple Mac Style Drop Down Menu With Search Box Preview!

أتمنى أن أكون وفقت في ذلك

مثال للمعاينة : مدونة تجريبية

صورة للقائمة :



اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن ]]></b:skin>، أضف قبلها مباشرة :

كود PHP:
#imenu {
    
background: -moz-linear-gradient(center top #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
    
bordermedium none;
    
border-radius4px 4px 4px 4px;
    
box-shadow1px 1px 3px rgba(0000.2), 1px 1px 3px rgba(0000.2inset;
    
color#FFFFFF;
    
margin-bottom15px;
    
margin-right0;
    
overflowvisible;
    
text-decorationnone;
    
text-shadow: -1px -1px 0 rgba(0000.15);
}
#halfnav {
    
floatleft;
}
#halfnav ul, #halfnav ul li {
    
displayinline;
    list-
stylenone outside none;
    
margin0;
    
padding0;
}
#halfnav ul li a {
    
background: -moz-linear-gradient(center top #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
    
border1px solid #666666;
    
border-radius4px 4px 4px 4px;
    
color#FFFFFF;
    
displayinline-block;
    
font-familyTahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size16px;
    
line-height20px;
    
margin5px;
    
padding5px;
    
text-decorationnone;
    
text-shadow-1px 1px rgba(0000.28);
}
#halfnav ul li a:hover {
    
backgroundnone repeat scroll 0 0 #444444;
    
border1px solid #222222;
}
#halfnav .current-menu-item a {
    
border1px solid #000000;
}
#nav {
    
positionrelative;
    
z-index2000;
}
#nav .parent > a, #nav .parent > a:hover {
    
background-imageurl("../images/arrow.png");
    
background-positionleft center;
    
background-repeatno-repeat;
}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover {
    
background-imageurl("../images/arrow-left.png");
    
background-positionleft center;
    
background-repeatno-repeat;
}
#nav ul, #nav ul li {
    
displayinline;
    list-
stylenone outside none;
    
margin0;
    
padding0;
}
#nav ul li a {
    
border-left1px solid #777777;
    
color#FFFFFF;
    
displayinline-block;
    
font-familyTahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size14px;
    
line-height36px;
    
margin-right: -4px;
    
padding0 15px;
    
text-decorationnone;
    
text-shadow1px 1px 1px #333333;
}
#nav ul li a:hover {
    
backgroundnone repeat scroll 0 0 #444444;
}
#nav .current-menu-item a {
    
color#CCCCCC;
}
#nav .current-menu-item .sub-menu a {
    
color#FFFFFF;
    
text-shadow1px 1px 1px #333333;
}
#nav .menu > li:first-child a:hover {
    
border-radius0 0 0 0;
}
#nav .menu .sub-menu li a:hover {
    
border-radius0 0 0 0;
}
#nav ul li {
    
positionrelative;
}
#nav li ul {
    
displaynone;
    
right7px;
    
positionabsolute;
    
top27px;
}
#nav li ul a {
    
backgroundnone repeat scroll 0 0 #555555;
}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
right0;
    
margin: -37px 0 11px 180px;
}
#nav ul li:hover ul {
    
displayinline-block;
}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul {
    
margin-top:9px;
    
margin-right:-10px;
    
displaynone;
}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
displayblock;
}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a {
    
border1px solid #777777;
    
margin: -1px 0 0 -11px;
}
#nav ul li:hover ul li a {
    
padding0 14px;
    
width150px;
}
#nav ul ul li:hover ul li a {
    
background-color#888888;
    
padding0 14px;
    
width150px;
}
#nav ul ul ul li:hover ul li a {
    
background-color#AAAAAA;
    
padding0 14px;
    
width150px;
}
#nav .children {
    
z-index4000;
}
#home {
    
border-left1px solid #777777;
    
floatright;
    
height36px;
    
margin-right4px;
    
margin-left15px;
}
#home a:hover {
    
opacity0.5;
}
#nohome {
    
floatright;
    
height35px;
    
margin-right5px;
    
margin-left4px;
}
.
searchform {
    
backgroundnone repeat scroll 0 0 #FFFFFF;
    
border-radius15px 15px 15px 15px;
    
box-shadow0 0 1px #222222 inset;
    
floatleft;
    
height20px;
    
margin7px 20px 5px 10px;
    
padding0;
    
width160px;
}
.
center .searchform {
    
floatnone;
}
#morefoot .searchform {
    
floatright;
}
.
searchform .{
    
bordermedium none;
    
color#333333;
    
font-size12px;
    
height14px;
    
margin3px 15px 2px 20px;
    
overflowhidden;
    
width130px;
}
#magnify {
    
floatright;
    
margin2px 0 0 5px;
    
positionabsolute;
}
#magnify {
}
.
searchform .s:focus {
    
bordermedium none;
    
outline0 none;
}
.
searchform .searchsubmit {
    
displaynone;
}
.
row {
    
margin0 auto;
    
max-width980px;
    
min-width727px;
    
width100%;
}
.
row .row {
    
min-width0;
}

.
column, .columns {
    
floatright;
    
margin-right4.4%;
    
min-height1px;
    
positionrelative;
}
.
column:first-child, .columns:first-child {
    
margin-right0;
}
[class*=
"column"] + [class*="column"]:last-child {
    
floatleft;
}

.
row .three {
    
width21.679%;
}
.
row .nine {
    
width73.9%;
}
.
row .ten {
    
width82.6%;
}
.
row .twelve {
    
width100%;


الآن اذهب إلى التخطيط (عناصر الصفحة) وأضف أداة HTML/JavaScript والصق الكود التالي وعدل ما يناسبك :

كود PHP:
<div class="container">
        <
div class="row">
            <
div class="twelve columns" id="imenu">
            <
div id="nav" class="nine columns">
             <
div id="home"><a href="http://www.bloggerexp.com"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/home.png" alt="home" /></a></div>                           
     <
ul id="nav_menu">
        <
li><a href="http://www.bloggerexp.com">بلوجر</a>
             <
ul>
                 <
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=5'>قوالب بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=7'>تعريب قوالب بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=10'>إضافات بلوجر</a></li>
<
li><a href='http://www.bloggerexp.com/forumdisplay.php?f=11'>دروس بلوجر</a></li>
             </
ul>
         </
li>
         <
li><a href="http://www.bloggerexp.com/">معهد خبراء بلوجر</a>
             <
ul>
                 <
li><a href="http://www.bloggerexp.com/forumdisplay.php?f=4">قوالب بلوجر</a></li>
                 <
li><a href="http://www.bloggerexp.com/forumdisplay.php?f=9">الدعم الفني</a></li>
             </
ul>
         </
li>
         <
li><a href="http://www.bloggerexp.com">من نحن ؟</a></li>
         <
li><a href="http://www.bloggerexp.com/sendmessage.php">راسلنا</a></li>

    </
ul>               </div>
                            <
div class="three columns">

 <
form method="get" class="searchform" action="http://marvblues.com/">
     <
div id="magnify"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/magnify.png" alt="magnify" /></div>
     <
div><input name="s" class="s" value="بحث" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text" /></div>
     <
div><input class="searchsubmit" value="" type="submit" /></div>
 </
form>            </div>
                     </
div>
     </
div>
 </
div

غير مسجل لا أسامح بنقل الإضافة دون ذكر المصدر.

غير مسجل إذا أعجبتك الإضافة لا تبخل علينا بالنقر على زر أعجبني للفيسبوك أسفله.

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 08-11-2012, 02:13 AM   #2
mostafa alwin
موقوف
 
تاريخ التسجيل: May 2012
الدولة: العراق
المشاركات: 202
إرسال رسالة عبر Yahoo إلى mostafa alwin إرسال رسالة عبر Skype إلى mostafa alwin
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : mostafa alwin




اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن ( ?????????) ، أضف قبلها مباشرة :
الرجاء تصحيح هذا السطر
شكرا لك على هذا الموضوع المميز يا مبدع

الدعم العربي

mostafa alwin غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 03:04 AM   #3
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة mostafa alwin مشاهدة المشاركة
اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن ( ?????????) ، أضف قبلها مباشرة :
الرجاء تصحيح هذا السطر
شكرا لك على هذا الموضوع المميز يا مبدع

مشكور على الملاحظة
تم التصحيح

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 03:19 AM   #4
overboy
مدون نشيط
 
الصورة الرمزية overboy
 
تاريخ التسجيل: Jun 2012
المشاركات: 224
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : overboy




إضافة في القمة ...تسلم على الموضوع
ننتظر منك كل جديد بحول الله
__________________
مدونة عرب كافي ... مدونة لكل مطور جديد
- تبحث عن دروس إتش أم أل
- تبحث عن أكواد و هاكات للمدونات .... كل هذا وأكثر
[url]http://cafe-arb.blogspot.com[/url}
من مواضيع overboy

الدعم العربي

overboy غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2012, 03:30 AM   #5
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة overboy مشاهدة المشاركة
إضافة في القمة ...تسلم على الموضوع
ننتظر منك كل جديد بحول الله
إن شاء الله سيكون الجديد الوقت ضيق نوعا ما
شكرا على المرور

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 08-13-2012, 12:21 AM   #6
yacine
مدون جديد
 
تاريخ التسجيل: Jul 2012
المشاركات: 17
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : yacine




و الله مشكور

الدعم العربي

yacine غير متواجد حالياً   رد مع اقتباس
قديم 08-13-2012, 01:25 AM   #7
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة yacine مشاهدة المشاركة
و الله مشكور
العفو وشكرا على المرور

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
apple mac style, أفقية, blogger, بلوجر, إضافة, قائمة روابط


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح إضافة روابط التدوينات أسفل كل موضوع بلوجر admin إضافات وأدوات بلوجر 11 12-04-2013 05:18 PM
حصري على خبراء بلوجر إضافة قائمة روابط جانبية منسدلة خالد الاحمري إضافات وأدوات بلوجر 5 02-13-2013 01:00 PM
قالب E Style المدفوع لكم الآن مجانا abdoumara قوالب بلوجر أجنبية 0 01-14-2013 02:38 PM
كيف اضع قائمة أفقية في اعلى الصفحة دون مشاكل ساجد عابد طلبات الدعم الفني 4 12-02-2012 03:13 PM
قائمة أفقية احترافية لكثرة الطلب عليها Nassro إضافات وأدوات بلوجر 2 11-11-2012 05:16 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 03:27 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)