كلمة الفريق

في عصرنا يوجد مئات الآلاف من المدونين والمدونات ، البعض يعمل بشغف وحب والآخر يعمل بشكل إنتاجي للكسب فقط ! أما نحن .. نحب ونعشق وندوووب في دباديب التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط ، نتعلم بشكل مستمر نشارككم بكل جديد ، نحاول المساعدة نحب أصدقاءنا ، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

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



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


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

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


ندخل لوحة التحكم ونذهب الى تحرير ثم قالب ثم HTML 
نبحث عن   
]]>
ونضيف الكود التالي فوقها 

/*------Metro--------*/
#metro-wrapper{width:100%;display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX4Z_7zW_VEQOow0m2Qe35rnzidiyKwvm0lcvhFkWFStc6kS-UaTN2JJc0VNEDtwoMxyAPCpkjvJzPvJpeSLrfmkdnOyyYHvJiDdIs1ng9SjBjskAM7WKRWytoQ47ldDT2meI_6Cu9QTM/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/AVvXsEiA4iQWd7CdvqZEbHB7GmGHYhaEyJnEP9JdG5Nxh8L0hc1bTpeuYUW_sDxWdEfnciII37QCpbGlDi8aPBLb25FYrW02gDiNS2AkVYQvBHGNzT7QkNlUZbl5Kz-4chEV20P1lA_rZjpz51aW/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/AVvXsEhMf0jc3ozi09vSeDtdIxCuB8YWxsoNM1oprS4rwZiPebgGM-Bip8fLmHnK7Cgd7o5VC5mnqbjOh_SBBdCbS9BA-XnqwZAqxm-AXSS0JTCIGKdYoiZuDOMyt5bPlfE6XxFbnb7it44ihspD/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/AVvXsEi_MxLkbPHGiU6WZWkaszrcbzCaassDhx7cr-TkPCqu4-1vltd0vpKKpY8PFeVa3zxJS4MUU0JWdzenNCGXjKB-85Sbm2mxReW-jvslgNNtX0KWOXeJZyh3nxP05uPUwkfPKosTxd9PNbPh/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/AVvXsEgnDipEGNQyYj3w4Q__EZAnztH9hVNQtICp9Jg6cdgCPQCYqBG0vNk9DdyCot6cS4bU64fdPSaPI8Jska40EspdPdV0hJoF-yJIGYff-x-DYVffgo7b1EZBuWE70dE57wCHPvI0ilHmN6bZ/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/AVvXsEgNJi7SbcAAXlalKRXRiqyek44tKbtJsqbr7fOHTX96gALaTHAxmuRaPG5aMDN_eR-eO7klhTlwkvHAGaEwcT-8oO1BgrRTY2GqLldNkagFzKcMkcIftx5bL03D87ccLnIrSS7PRDf75WLk/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/AVvXsEgVyOXmZyvdRUqZud_qc8qNG4GicpPv_n_19uVaA3mjciG-WtLEmqJS_V87rq8AwavvTJ-d-D2IAlaOWJnqEuT8iT13krmK7K-p3X8FRtpI1-AqmpJzvBdHwplg8y0pm6mwiiwAsOJmmldw/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/AVvXsEjlFOS_-srUY90IAMdm0JtOYs__VoBnsju49nHHmTTuO-aDxpNbESy02m3TQDoFDKnkHXO5L2pRmZWNHkDwjxkJkux_JjMiA1rL8nM0wMmjK5BaFcLuMtngfCMTLtz_tlf1WxcIgCtj7-Tt/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/AVvXsEjJAvaUD1pks23_D5w-dxQlX186vqOA58eNm2lCn_9WjJUxVFnhrbBRDNuuX5AXpD774smxc4LCEqP46-0pLTsTnXFcamE1SkwnD_3ysknWS065-9bAnrpZ1-diAuodKbMfe9899_E8-jE/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/AVvXsEiuiUhf3qWVDSpb9WNCLBIjzzDzyFmCgfmP6FfyB14xUKj16G7a92iPaQe1LuhadeJwD8zRUsL-UuWMuqZ8rNK1H3sbMOTtBl5ECVN14BYRZeSqUtKKQvIPF2l49hX5EBD_bZSRAAp5Qdba/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/AVvXsEj3dhPCwUOPQKyW5rwtjJlnP2EfJI2ZLOw-OIlUajhkTNnjQPouKBbAMhhVP_EyaqSbaaRH8YhZvTccEObv97Ya5-ARJr0kyEVMs4dIhVAMCJTiGnM4sJh4To4BTxi3E8Q95l9_4K2xuBqN/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/AVvXsEie-YRFKzOI4BG8LinOOz3k0LE18N9-zQAghLnRwUp_tyEH1-WUdhsXQnOisVgOB7Jwo1m5vrfZOZz0bv1cgSOrOTg8UreGTGIu20BbCsVFL99P9UvzTZ3gzoavuBtOS5vHy46bFh8_bcya/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/AVvXsEi9_2Va3VtHvH3Ye2VVgtJKx_eUWq0qeltNdJu3Lob3RAPinBxynRAj3f3o1cYbuCqXYZyEI47z54Fz_LE8OGQnFfZlpqSMr96bPZmqYDj6huoocA2WDz6vXFr8GahN1suckribFA3ISLHH/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- نضيف الكود التالي فوق الـ



3-نضيف الكود التالي اسفل ال

  • Home
  • Forum
  • Blog
    • Android
    • ps
    • xbox
      • pc
      • psp
        • fb
        • g
        • blogger
        • contact


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

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

                   ثم اضف الكود التالي بداخلها

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



                  عنوان التدوينة: اضافة قائمة ميترو 8 او (واجهة الميترو) لمدونات بلوجر حصريا
                  تقييم : 10 من 10 مرتكز على 24 تقييم.
                  الكاتب / المدير ياسين إدريسي
                  عدد المشاهدات :
                  Hm

                  Ali Alhazin : من العراق, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة المطور العراقي الافضل لكم تعبر عما أهواه .

                  قالب عرب ويب . من تطوير Ali Alhazin