اضافة قائمة ميترو 8 او (واجهة الميترو) لمدونات بلوجر حصريا


السلام عليكم ورحمة الله وبركاته اليوم اضع لكم طريقة اضافة قائمة منسدلة لواجهة ميترو 8 مميزه تعطي جمالية وشكلها الجذاب للموقع بالحقيقه هي اضافة مرغوبة عند الكثير نأتي الان لطريقة اضافتها وهي بسيطة جدا فقط اتبع الخطوات التاليه


1- معاينة الواجهة مباشرتاً  اضغط هنا هذه في قالب متطورون الذي نشرته منذ مدة

الان طريقة التركيب 


  1. ندخل لوحة التحكم ونذهب الى تحرير ثم قالب ثم HTML 
  2. نبحث عن   ]]></b:skin> ونضيف الكود التالي فوقها 
/*------Metro--------*/
#metro-wrapper{width:100%;display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1Jqd3EEYiyvD-xGHKjX4DPAaeXJZgMQm-I_xHp_GYevT3pLSOR4LMbkleOtMZT58jy_Px-yJaCGVdfW-UAEj_vAhmcmmcT9kO1OaOTbPm9wtlhbpUzEGSmrjUrEodA3xPlRm1i9-ohc/s1600/ar1web-1.jpg);overflow:hidden;margin:0 auto;padding:0;}
#metro{width:1080px;margin:0 auto;}
.th3metro{width:270px;float:right;direction:rtl;overflow:hidden}
.th3metro ul{margin:0;list-style:none;}
.th3metro ul li{margin:4px;}
.th3metro ul li:hover{border:4px solid #73b8ff;}
.th3metro .big{float:right;width:250px;height:120px;padding:0;}
.th3metro .small{float:right;width:117px;height:120px;padding:0;}
.th3metro ul li span{text-align:right;color:#fff}
.th3metro #home{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#2a92e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPjubAS55nYCvAn4lRe0efZkmja9RqEpWDNo8_Zt24204cLznMFCEYnAdX642PJPw-yVJXOKlj7Ts9XJjrS7Z97BHxdR0_EQ_SSMK9sATnYMOpauWU3yKOmR6f1Q7RY8nsYkiRTkBdAZKQ/s1600/home.png) no-repeat 50% 50%;
border:4px solid #2a92e2;
}
.th3metro #vb{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#db552d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE6uSxQNpfJmjbSFemgn7V9dkWaTXIw7Kd2ctKZxevw66PTf54HSSz4vQJgdx5iprVA4o0d23dNOYSKvIGxOCzpvDQS6deSumV6y3Tic8QgW0C79qRUqaaDrMCEmh5cCrkYqvsxbj471KC/s1600/vb.png) no-repeat 50% 50%;
border:4px solid #db552d;
}
.th3metro #blog{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#00b1f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieuddKQYQjwo1Hr9gh6v-ks0KvqUFp_VXvwghugHu9r0hIVt2sNreBjlUePgEhpbcJCjv1TQkDUZHzRYdm6nyNbAmsxsahlUM2DyhBh3WTydRp4zPxLeXV9xhpTctJ08n0rfqoz5JVQ2aK/s1600/blog.png) no-repeat 50% 50%;
border:4px solid #00b1f0;
}
.th3metro #Android{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#00bb00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWwHD7cyXs5-Em1EWatIi33cGAXkZs5WItrSItRQONg93o6WReKlJOjZ9NZC3M9ZqXZS5bx7ZZSCU_cXCjWZNBmNTq-k2GBRQjBqNHK5rkb4mh1Cr0LdPW-_fwiDBbKM_xpFP3wLdO6Uex/s1600/Android.png) no-repeat 50% 50%;
border:4px solid #00bb00;
}
.th3metro #ps{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background: #3E72BF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3Dj5VXPXsMqErsiZXJehwMaZYdyrVTfv1t7Bq0HhHkZW5cNnna8Kes1W9hc57e1a3czPbszUKgMNtBwx365OGbXSLu5OndeJXzutm1vmoM4qUxWmFdbgDdcFEsHJgyYwVe0J8LwKZ7I6/s1600/ps.png) no-repeat 50% 50%;
border: 4px solid #3E7CBF;
}
.th3metro #xbox{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background: #3BB71C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nY-oACzkoPNOtB72n146X38ULmKPNIN-8dvG9qCJmQA0OMRzUYZcxSTrrbEZbS-N4VpuoMFVrGIEmTm9G92r0BQs2ubT8qWqj3NFUk1IYTD8-aVbEFwkilxBZfQSWpZOeFwBAauSmjx-/s1600/XBox+360.png) no-repeat 50% 50%;
border: 4px solid #1BC51B;
}
.th3metro #pc{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#83c3ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfkDT7DLrgF9ViyLTCZtoPUdGHI_8AlS9V-Wk9C-qL38l6WT_OZIjQjHxSMVG4quopHeW6zSQiGD4I7AjTIC2CKelvdi0hFx3LYGhMIu4up9poBUIKdSMey9qsPEQ9MnWeXLRVYwnkEyM/s1600/windows.png) no-repeat 50% 50%;
border:4px solid #83c3ff;
}
.th3metro #psp{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#c6d53f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH_SdqsQuuU_3aVo7PxrLPhuH-jkzHR0_wezV-xrLZt1AUynuogO6Phiwig0c7f_mQInkt02Y7pm6x4aiqZEWeZHSfpA3jozskLiKfi2yhubedt_5vXZedTzPNyRdJEexhcxEmKtL9evs/s1600/psp+icon.png) no-repeat 50% 50%;
border:4px solid #c6d53f;
}
.th3metro #fb{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#0a57c0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIkTksnhieUNTc5SppqiXJh5bcACbPIwFiRJ5fXKE7YwmeCerjZXk6gJ5IFQBfkdXO9sTinKvpemoWA87fdo69FPvjnY4N4MsG3ORNJFbZtXtSC0hHPCcySt16Rd_VRXyWsUb0656FHy0/s1600/fb.png) no-repeat 50% 50%;
border:4px solid #0a57c0;
}
.th3metro #g{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#b71c45 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPxr93co-vinzafRUJsS5TrqKmH6qOmuKSBx_K9n7ukSy6zI6gAMBV6qg89Gor52QVecdyLFJ-sgI3bu7_xZsk04HAnl4wKT0sqUWffZrX6fM7Is_g8_0Iu5NCI3agfo1606S2waXEAGX/s1600/g.png) no-repeat 50% 50%;
border:4px solid #b71c45;
}
.th3metro #blogger{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#db552d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fIkgNkx265jbB-GoqX1PS4F8h5ZWZbdZ0f6YxSApkZSZAcJRIuFWHRV1o7U_MfzW0GawxQl37vgPpgr_493tBdlUaPyqTYyDbVsyxyVgV1cWqYeexdyZzvWDkMlEAIRnaLGfEkszLgxN/s1600/blogger.png) no-repeat 50% 50%;
border:4px solid #db552d;
}
.th3metro #contact{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#009bad url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZX_ZFgX9slVnRPg7LgdPuBROa0eTj-eFcRqjZlEHLEE6REUOHu6-bCj3549Q-pmUgFFxiPjaez-kWfzbCacHFlNPNZRVPZJetUEInYy0ePx7hSPBXHp-t9-atzn_v-lulzV6eyneQmmq/s1600/contact.png) no-repeat 50% 50%;
border:4px solid #009bad;
}
.th3metro #home:hover,.th3metro #vb:hover,.th3metro #contact:hover,.th3metro #ps:hover{border:4px solid #73b8ff;}
.th3metro #fb:hover,.th3metro #blogger:hover,.th3metro #g:hover,.th3metro #blog:hover{border:4px solid #73b8ff;}
.th3metro #Android:hover,.th3metro #xbox:hover,.th3metro #windows:hover,.th3metro #psp:hover{border:4px solid #73b8ff;}
.metro_btn img {
float: left;
padding: 15px 15px;
background: #1C9FE0;
}
2- نضيف الكود التالي فوق الـ </head>

<script src='http://code.jquery.com/jquery-1.10.2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".metro_btn").click(function(){
$("#metro-wrapper").slideToggle("slow");
});
});
</script>


3-نضيف الكود التالي اسفل ال <body>
<div id='metro-wrapper'>
<div id='metro'>
<div class='th3metro'>
<ul>
<a href='/'>
<li class='big' id='home' title='الرئيسية'>
Home
</li>
</a>
<a href='/'>
<li class='small' id='vb' title='المنتدى'>
Forum
</li>
</a>
<a href='#'>
<li class='small' id='blog' title='مقالات'>
Blog
</li>
</a>
</ul>
</div>
<div class='th3metro'>
<ul>
<a href='#'>
<li class='small' id='Android' title='العاب اندرويد'>
Android
</li>
</a>
<a href='#'>
<li class='small' id='ps' title='ألعاب البلايستيشن'>
ps
</li>
</a>
<a href='#'>
<li class='big' id='xbox' title='ألعاب إكس بوكس'>
xbox
</li>
</a>
</ul>
</div>
<div class='th3metro'>
<ul>
<a href='#'>
<li class='big' id='pc' title='ألعاب الحاسوب'>
pc
</li>
</a>
<a href='#'>
<li class='big' id='psp' title='العاب PSP'>
psp
</li>
</a>
</ul>
</div>
<div class='th3metro'>
<ul>
<a href='#'>
<li class='small' id='fb' title='فيسبوك'>
fb
</li>
</a>
<a href='#'>
<li class='small' id='g' title='غوغل'>
g
</li>
</a>
<a href='#'>
<li class='small' id='blogger' title='بلوجر'>
blogger
</li>
</a>
<a href='#'>
<li class='small' id='contact' title='اتصل بنا'>
contact
</li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id='metro-wrapper'>
<div id='metro'>
<div class='th3metro'>
<ul>
<li class='big' id='home' title='الرئيسية'><a href='#'>الرئيسية</a></li>
<li class='small' id='vb' title='المنتدى'><a href='#'>المنتدى</a></li>
<li class='small' id='blog' title='مقالات'><a href='#'>مقالات</a></li>
</ul>
</div>
<div class='th3metro'>
<ul>
<li class='small' id='Android' title='أندرويد'><a href='http://www.alinael.cm'>أندرويد</a></li>
<li class='small' id='security' title='الحماية'><a href='#'>الحماية</a></li>
<li class='big' id='video' title='حلقات'><a href='http://www.youtube.com/user/ali06877'>حلقات</a></li>
</ul>
</div>
<div class='th3metro'>
<ul>
<li class='big' id='windows' title='الويندوز'><a href='#'>الويندوز</a></li>
<li class='big' id='linux' title='اللينكس'><a href='http://www.alinael.com'>اللينكس</a></li>
</ul>
</div>
<div class='th3metro'>
<ul>
<li class='small' id='fb' title='فيسبوك'><a href='https://www.facebook.com/alina2l'>فيسبوك</a></li>
<li class='small' id='g' title='جوجل'><a href='https://plus.google.com/u/0/+علينائل/posts'>جوجل</a></li>
<li class='small' id='blogger' title='بلوجر'><a href='http://www.alinael.com/#'>بلوجر</a></li>
<li class='small' id='contact' title='تواصل معي'><a href='mailto:info@alinael.com'>تواصل معي</a></li>
</ul>
</div>
</div>
</div>


مع تغيير مايلزم تغييره

والا اخير خطوة وهي اضافة كود الزر الخاص بعمل هذه الاداة واختيار الموقع المناسب له بحيث اذا كنت تريد اضافته بالنافبار مثلا مثل ما انا اضفته قالب متطورون قم بالتالي
 ابحث عن

 ثم اضف الكود التالي بداخلها
<a class='metro_btn' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkohNcbD1z0bwdbKx2cVvhBqkhFPA7XNhIEIYYOLAIGLK2B_4ffjGFfnQFBw2JiKVU0RQU1YQ4Br0w8TkV9lZBR63lcV36sQ4qwdRXtmpq6rUlGlXh6ZxM2FbO0JfRtXNdUKlRbRG_jS0t/s1600/btn.png' type='واجهة الميترو'/></a>

او اختر الموقع المناسب الذي تريده يمكنك تغير شكل الشعار عن طريق تغير رابط الصورة الى الايقونة التي تريد

انتهى الموضوع اتمنى انكم قد استفتدم منه يرجة منكم دعمنا بترك تعليق مشجع للمجهود اي استفسار لاتتردد 
نرجوا منكم عدم اهمل ذكر المصدر عند النقل تقديرا للمجهود وشكرا

عمر ناصر

عمر 17 عام الجنسية، مصمم و معرب قوالب بلوجر، مهووس ألعاب فيديو و ذو عدة مدونات، لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهى Xxx لكي أساعد كل شخص ولو شيء بسيط.

Article plus récent
Article plus ancien

2 تعليقات

  1. Hm15 novembre 2014 à 07:15

    شكرا جزيلا لك

    RépondreSupprimer
  2. admin24 novembre 2014 à 00:03

    عفوا اخي
    مدونتك جيده ومنسقه ولكن تحتاج الى تدوينات اكثر :)

    RépondreSupprimer

XXX © 2014-2018 . صمم بـ ♥ بواسطة XXX . مدعوم بواسطة بلوجر