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

الكاتب بتاريخ عدد التعليقات : 0
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد على المدونة الدرس موجود على الويب ولكن بقلة والذين ينشرون هذه الدروس لا تعمل وليس لها داعي اليوم اتيت لكم بالاضافة الاكيدة التي سوف تعمل لديكم انشاء الله طبعا قائمة المترو موجودة في قوالب قليلة جدا من قوالب بلوجر مثل قالب الهام التدوين وقالب عرب تك واشياء كهذه اذا لنبدأ بالشرح
طريقة التركيب
نبحث عن ]]></b:skin>
ونضع الكود التالي فوقه
/*------Metro th3geekweb3--------*/
#metro-wrapper{width:100%;display:none;background:url(http://3.bp.blogspot.com/-oep_h8RWVQ8/U9zUndIcjqI/AAAAAAAAE2Q/tOkraqYFgVw/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(http://3.bp.blogspot.com/-RHDTf_GFIhM/Uf_QD2Gx1FI/AAAAAAAAAyk/OyPbS61f95k/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(http://3.bp.blogspot.com/-Hf-n-G7V1GQ/Uf_QGQSmELI/AAAAAAAAAzY/-9gf2SN8RQg/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(http://2.bp.blogspot.com/-goqtRb5IgF4/Uf_QBuwv-lI/AAAAAAAAAx0/nvXG9SZJdis/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(http://1.bp.blogspot.com/-V3DXG_ZaalQ/VAzkD2DwWtI/AAAAAAAAFnU/9aTnRaUDgQ0/s1600/az.png) no-repeat 50% 50%;
border:4px solid #00bb00;
}
.th3metro #ps{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background: #3E72BF url(http://cdn.top4top.net/i_545c95e00f1.png) no-repeat 50% 50%;
  border: 4px solid #e04f5f;
}
.th3metro #xbox{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background: #3BB71C url(http://cdn.top4top.net/i_0682a872af1.png) no-repeat 50% 50%;
border: 4px solid #1BC51B;
}
.th3metro #pc{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#83c3ff url(http://3.bp.blogspot.com/-ZaTNvLzVF6s/Uf_QGu8HePI/AAAAAAAAAzM/dULoTReeD9g/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(http://cdn.top4top.net/i_2a095cb30a1.png) no-repeat 50% 50%;
  border: 4px solid #C6D53F;
}
.th3metro #fb{
display: inline-block;
line-height: 0;
text-indent: -9999em;
background:#0a57c0 url(http://1.bp.blogspot.com/-8rUy_nuZbuc/Uf_QC7HAruI/AAAAAAAAAyI/GfGpapSu4KQ/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(http://1.bp.blogspot.com/-Q-o9tNPGPrQ/Uf_QDTZOEQI/AAAAAAAAAyU/Q137brzOG2g/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(http://4.bp.blogspot.com/-wuINYY7gXe8/Uf_QCE8sFWI/AAAAAAAAAx8/JhZl9w6dllA/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(http://3.bp.blogspot.com/-9IJX9o8JvxU/Uf_QCdOeQyI/AAAAAAAAAyQ/IFAKHWgeal4/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: right;
padding: 8px 18px;
background: #7B7F81;
}

ثم نبحث عن </head>
ونضع الكود التالي فوقه
<script type='text/javascript'>
$(function() {
$(&quot;.tabs-1&quot;).mtabs();                              
});
</script>
<script type='text/javascript'>
      $(document).ready(function(){
        $(&quot;.metro_btn&quot;).click(function(){
          $(&quot;#metro-wrapper&quot;).slideToggle(&quot;slow&quot;);
            });
        });
    </script>
نضيف الكود التالي اسفل ال <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='http://th3geekweb3.blogspot.com/p/blog-page_99.html'><li class='small' id='vb' title='سجل الزوار'>                  Forum                </li></a><a href='http://th3geekweb3.blogspot.com/search/label/حصريات'><li class='small' id='blog' title='حصريات'>                  Blog                </li></a></ul></div><div class='th3metro'><ul><a href='http://th3geekweb3.blogspot.com/search/label/مسابقات'><li class='small' id='Android' title='مسابقات'>                  Android                </li></a><a href='http://th3geekweb3.blogspot.com/p/live-broadcast.html'><li class='small' id='ps' title='البث المباشر'>                  ps                </li></a><a href='http://th3geekweb3.blogspot.com/p/about-th3geekweb3.html'><li class='big' id='xbox' title='عن مهووسين الويب'>                  xbox                </li></a></ul></div><div class='th3metro'><ul><a href='http://th3geekweb3.blogspot.com/search/label/%D9%88%D9%8A%D9%86%D8%AF%D9%88%D8%B2'><li class='big' id='pc' title='الحاسوب'>                  pc                </li></a><a href='http://th3geekweb3.blogspot.com/2015/05/ads.html'><li class='big' id='psp' title='اعلان مطور'>                  psp                </li></a></ul></div><div class='th3metro'><ul><a href='https://www.facebook.com/th3geekweb3'><li class='small' id='fb' title='فيسبوك'>                  fb                </li></a><a href='https://plus.google.com/+OMRANALHARIRIgeek'><li class='small' id='g' title='غوغل'>                  g                </li></a>  <a href='http://th3geekweb3.blogspot.com'><li class='small' id='blogger' title='بلوجر'>                  blogger                </li></a><a href='http://th3geekweb3.blogspot.com/p/24.html'><li class='small' id='contact' title='اتصل بنا'>                  contact                </li></a></ul></div></div></div>


اضف الكود التالي في المكان الذي تريد ضهور زر القائمة فيه مثلا في القائمة العلوية او شئ كهذا

<aclass='metro_btn'href='#'><imgsrc='http://4.bp.blogspot.com/-LJ3FuoI_NNQ/U9wgXA0rnRI/AAAAAAAAE1o/-rCvORwpB-4/s1600/down.png'type='واجهة الميترو'/></a>


وانتهى الدرس واي استفسار ضعه في تعليق

0 تعليق على موضوع " إضافة قائمة المترو (ويندوز 8) الاحترافية لمدونات بلوجر "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء