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

 

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




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


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 12-19-2012, 05:49 PM   #1
العماد
مدون نشيط
 
الصورة الرمزية العماد
 
تاريخ التسجيل: Aug 2012
الدولة: بَيـَـِِنَِ أَلمَِـِـَِيََِ وأَمِلَِـِـَِيََِ !!
المشاركات: 100
افتراضي كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : العماد




كيفية أنشاء Windows 8 وجهة المترو في بلوجر



السلام عليكم ورحمه الله وبركاتة، أخواني وأخواتي بمناسبة العام الجديد نقـدم لكم اضافة حصري جدًا في كنوز مدونتي، هل مللت من قائمة التنقل موقعك ويب الخاص بك؟ هل تريد تغيير القائمة في موقعك إلى قائمة جديده كليّا مثل واجهة النظام ويندوز8 ؟ القائمة هي واحدة من العناصر الأساسية لموقعك لأنه ماتكمل اناقة موقعك من دونها، هذه القائمة سهل الاستعمال. مع أسلوب أنيق وتفاصيل راقية التي تجذب شخص مثل نحلة إلى العسل. لتوفير ما يبحث عنه الأشخاص ، وقد انشأنا هذه القائمة بسيطة جدا بحيث تحتاج إلى تقنية CSS فقط بدون أي سكربتات التي تزيد من حجم مدونتك بشكل كبير. وقد سوف تجد من المميزات مالم تكن تتوقعه.

عيش التجربة

متطلبات التركيب:

قبل تركيب القائمة يجب أن يكون عرض مدونتك مناسبا للقائمة، على الأقل أن يكون أكبر من 850 بكسل. يجب أن يتوفر قالب مدونتك على قائمة أدوات تحت الهيدر مباشرة .
كيفية إنشاء ويندوز 8 وجهة المترو في بلوجر؟

الخطوات التالي هي مثالية بالنسبة للمبتدئين الذين لديهم أقل عن معرفة لغة HTML. الإرشادات التالية هي واضحة للغاية بحيث يمكن لأي شخص بسهولة تطبيقها. اتبع التعليمات التالية بشكل صحيح.

الخطوة الأولي: إضافة الجزء الأول CSS:
انتقل إلى لوحة التحكم توجه إلى صفحة >> القالب > ثم> تحرير HTML .
قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. اشر علامة توسيع قوالب .
الآن في البحث عن ]]></b:skin> ثم قبله مباشرة ألصق الكود الآتي:

كود بلغة HTML:
/*===MBL METRO UI Menu==*/

body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
ثم قم بحفظ القالب ، الآن دمجنا جزء CSS في قالب دعونا نرى كيفية استخدامها.

الخطوة الثانية: الجزء الثاني HTML:
الآن أنه يعتمد كليا على الشخص الذي يريد وضع هذه القائمة. المكان المثالي كم قولناها تحت الرأس المدونة.
في قائمة تحكم مدونتك توجه إلى تخطيط و أضف أدات HTML/Javascript و ألصق فيها الكود التالي:


كود بلغة HTML:
<!-- mblmetromenu -->
<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
    
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
    
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
    
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
      
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
      
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://konozblog.blogspot.com" class="gradient">
<img src="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" />
<span class="light-text">konozblog</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu -->
هذا كل شيء. وقد تم دمج وجهة نظام ويندوز 8 تبدو وكأنها قائمة التنقل في موقع الويب الخاص بك.
تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS والخ.

اتمنى ان تكون نالت اعجبكم «•¨•» وإن شاء الله فى القريب العاجل هناك بعض المفاجآت الجديدة.فاتبعوني وتأكدوا أن كل من مرّ وأصبح من متابعي مدونتي , سأسارع وأصبح من متابعي مدونته. وفي انتظار ردودكم الطيبه وارائكم واستفسارتكم. والسلام عليكم ورحمه الله وبركاتة

المصدر: http://konozblog.blogspot.com/2012/1...TION-MENU.html

كاتب : العماد / مؤسس مدونة كنوز مدونتي

الدعم العربي

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

مركز رفع موسوعة العربية
قديم 12-19-2012, 06:32 PM   #2
3li
مدون مميز
 
الصورة الرمزية 3li
 
تاريخ التسجيل: Dec 2012
الدولة: PaLeStinE
المشاركات: 343
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : 3li




وعليكم السلام

ما شاء الله , قمة الروعه أخي العماد

تم اضافتها الى المفضلة وان شاء الله سيتم تركيبها

جذابة وأنيقة ومرتبه

تحياتي الك

الدعم العربي

3li غير متواجد حالياً   رد مع اقتباس
قديم 12-19-2012, 06:45 PM   #3
مدونة سعيد
مدون جديد
 
تاريخ التسجيل: Jul 2012
المشاركات: 29
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : مدونة سعيد




قمة الروعه

الدعم العربي

مدونة سعيد غير متواجد حالياً   رد مع اقتباس
قديم 12-19-2012, 11:39 PM   #4
Mizow2012
مدون نشيط
 
الصورة الرمزية Mizow2012
 
تاريخ التسجيل: Nov 2012
الدولة: الرباط
المشاركات: 101
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : Mizow2012




اضافة رائعة يا بطل
الله يبارك فيك
بالتوفيق لك

الدعم العربي

Mizow2012 غير متواجد حالياً   رد مع اقتباس
قديم 12-20-2012, 10:12 AM   #5
Hamodeimad
مدون نشيط
 
تاريخ التسجيل: Sep 2012
الدولة: الاردن
المشاركات: 168
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : Hamodeimad




اضافة راااائعة جدا
__________________
محمد عماد مدون عربي من الاردن املك مدونة "محمد عماد" و مدونة "اربح" اتمنى منكم زيارة مدونتي

مدونة محمد عماد: http://www.m7md-imad.com/

مدونة اربح: http://erba7-blog.blogspot.com/
من مواضيع Hamodeimad

الدعم العربي

Hamodeimad غير متواجد حالياً   رد مع اقتباس
قديم 12-20-2012, 09:10 PM   #6
youba8000
مدون جديد
 
تاريخ التسجيل: Oct 2012
المشاركات: 21
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : youba8000




اضافة رائعة ...شكرا على الموضوع
http://www.histgeo-college.blogspot.com/
__________________
مدونتي المتواضعة
http://www.histgeo-college.blogspot.com/

الدعم العربي

youba8000 غير متواجد حالياً   رد مع اقتباس
قديم 12-20-2012, 11:56 PM   #7
العماد
مدون نشيط
 
الصورة الرمزية العماد
 
تاريخ التسجيل: Aug 2012
الدولة: بَيـَـِِنَِ أَلمَِـِـَِيََِ وأَمِلَِـِـَِيََِ !!
المشاركات: 100
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : العماد




يسلموووووو
اشكركم على مروركم الرائع لكم مني أجمل التحيات
وأتمنى لكم التوفيق
__________________
ضعْ لي أثرَ زيارتك لمدوّنتي عســـى أن أقوم بتتبع الأثر وزيارتك
فرأيك في مدونتي المتواضعة يهمّني " مدونة كنوز مدونتي "
http://konozblog.blogspot.com
من مواضيع العماد

الدعم العربي

العماد غير متواجد حالياً   رد مع اقتباس
قديم 12-22-2012, 07:00 PM   #8
Nemssef
مدون جديد
 
تاريخ التسجيل: Dec 2012
الدولة: المغرب
المشاركات: 86
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : Nemssef




رائعععععععععععععععععععععععععععع

الدعم العربي

Nemssef غير متواجد حالياً   رد مع اقتباس
قديم 12-22-2012, 07:00 PM   #9
Nemssef
مدون جديد
 
تاريخ التسجيل: Dec 2012
الدولة: المغرب
المشاركات: 86
افتراضي رد: كيفية أنشاء Windows 8 وجهة المترو في بلوجر

أنا : Nemssef




في منه الروعة

الدعم العربي

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

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

الكلمات الدلالية (Tags)
إضافات بلوجر


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

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

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

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
حصرياا اضافة المترو ويندوز 8 بلوجر مثل عالم العرب alam3arbcom إضافات وأدوات بلوجر 3 08-06-2013 01:40 AM
كيفية تصميم قالب بلوجر Aero طلبات الدعم الفني 14 06-01-2013 10:01 PM
أنشاء تطبيق لأجهزة الجيل الجديد لموقعك verdi إضافات وأدوات بلوجر 1 12-21-2012 11:51 PM
أستفسار عن عمل شىء مثل اختصار روابط او صفحة مرتبطة بالمدونة+أنشاء جدول احترافى ULMovies طلبات الدعم الفني 3 08-30-2012 10:41 PM
كيفية فتح مدونة بلوجر ال شاوي ياس دروس بلوجر 2 07-14-2012 09:29 PM





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

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 07:01 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)