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

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


 
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 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;
    
border: medium none;
    
border-radius: 4px 4px 4px 4px;
    
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
    
color: #FFFFFF;
    
margin-bottom: 15px;
    
margin-right: 0;
    
overflow: visible;
    
text-decoration: none;
    
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
}
#halfnav {
    
float: left;
}
#halfnav ul, #halfnav ul li {
    
display: inline;
    list-
style: none outside none;
    
margin: 0;
    
padding: 0;
}
#halfnav ul li a {
    
background: -moz-linear-gradient(center top , #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
    
border: 1px solid #666666;
    
border-radius: 4px 4px 4px 4px;
    
color: #FFFFFF;
    
display: inline-block;
    
font-family: Tahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size: 16px;
    
line-height: 20px;
    
margin: 5px;
    
padding: 5px;
    
text-decoration: none;
    
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.28);
}
#halfnav ul li a:hover {
    
background: none repeat scroll 0 0 #444444;
    
border: 1px solid #222222;
}
#halfnav .current-menu-item a {
    
border: 1px solid #000000;
}
#nav {
    
position: relative;
    
z-index: 2000;
}
#nav .parent > a, #nav .parent > a:hover {
    
background-image: url("../images/arrow.png");
    
background-position: left center;
    
background-repeat: no-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-image: url("../images/arrow-left.png");
    
background-position: left center;
    
background-repeat: no-repeat;
}
#nav ul, #nav ul li {
    
display: inline;
    list-
style: none outside none;
    
margin: 0;
    
padding: 0;
}
#nav ul li a {
    
border-left: 1px solid #777777;
    
color: #FFFFFF;
    
display: inline-block;
    
font-family: Tahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
    
font-size: 14px;
    
line-height: 36px;
    
margin-right: -4px;
    
padding: 0 15px;
    
text-decoration: none;
    
text-shadow: 1px 1px 1px #333333;
}
#nav ul li a:hover {
    
background: none repeat scroll 0 0 #444444;
}
#nav .current-menu-item a {
    
color: #CCCCCC;
}
#nav .current-menu-item .sub-menu a {
    
color: #FFFFFF;
    
text-shadow: 1px 1px 1px #333333;
}
#nav .menu > li:first-child a:hover {
    
border-radius: 0 0 0 0;
}
#nav .menu .sub-menu li a:hover {
    
border-radius: 0 0 0 0;
}
#nav ul li {
    
position: relative;
}
#nav li ul {
    
display: none;
    
right: 7px;
    
position: absolute;
    
top: 27px;
}
#nav li ul a {
    
background: none repeat scroll 0 0 #555555;
}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
right: 0;
    
margin: -37px 0 11px 180px;
}
#nav ul li:hover ul {
    
display: inline-block;
}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul {
    
margin-top:9px;
    
margin-right:-10px;
    
display: none;
}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
    
display: block;
}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a {
    
border: 1px solid #777777;
    
margin: -1px 0 0 -11px;
}
#nav ul li:hover ul li a {
    
padding: 0 14px;
    
width: 150px;
}
#nav ul ul li:hover ul li a {
    
background-color: #888888;
    
padding: 0 14px;
    
width: 150px;
}
#nav ul ul ul li:hover ul li a {
    
background-color: #AAAAAA;
    
padding: 0 14px;
    
width: 150px;
}
#nav .children {
    
z-index: 4000;
}
#home {
    
border-left: 1px solid #777777;
    
float: right;
    
height: 36px;
    
margin-right: 4px;
    
margin-left: 15px;
}
#home a:hover {
    
opacity: 0.5;
}
#nohome {
    
float: right;
    
height: 35px;
    
margin-right: 5px;
    
margin-left: 4px;
}
.
searchform {
    
background: none repeat scroll 0 0 #FFFFFF;
    
border-radius: 15px 15px 15px 15px;
    
box-shadow: 0 0 1px #222222 inset;
    
float: left;
    
height: 20px;
    
margin: 7px 20px 5px 10px;
    
padding: 0;
    
width: 160px;
}
.
center .searchform {
    
float: none;
}
#morefoot .searchform {
    
float: right;
}
.
searchform .s {
    
border: medium none;
    
color: #333333;
    
font-size: 12px;
    
height: 14px;
    
margin: 3px 15px 2px 20px;
    
overflow: hidden;
    
width: 130px;
}
#magnify {
    
float: right;
    
margin: 2px 0 0 5px;
    
position: absolute;
}
#magnify {
}
.
searchform .s:focus {
    
border: medium none;
    
outline: 0 none;
}
.
searchform .searchsubmit {
    
display: none;
}
.
row {
    
margin: 0 auto;
    
max-width: 980px;
    
min-width: 727px;
    
width: 100%;
}
.
row .row {
    
min-width: 0;
}

.
column, .columns {
    
float: right;
    
margin-right: 4.4%;
    
min-height: 1px;
    
position: relative;
}
.
column:first-child, .columns:first-child {
    
margin-right: 0;
}
[class*=
"column"] + [class*="column"]:last-child {
    
float: left;
}

.
row .three {
    
width: 21.679%;
}
.
row .nine {
    
width: 73.9%;
}
.
row .ten {
    
width: 82.6%;
}
.
row .twelve {
    
width: 100%;
} 

الآن اذهب إلى التخطيط (عناصر الصفحة) وأضف أداة 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 غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
 

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

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


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

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

BB code is متاحة
كود [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® Copyright ©2000 - 2026 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 11:48 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)