في حال وجدت موضوع تالف يمكنك التعليق عليه بأنه تالف و سيتم إصلاحه في أقرب وقت ^_^



بسم الله الرحمن الرحيم
الحمد لله خالق الأولين والآخرين وغافرذُنوب المُذنبين ومهلك الطغاة والجبارين الحمد لله أولاً وآخرا مبتدءاً ومنتهيا الحمد لله فى كل مكان وعلى أى حال وفى كل الأزمان والصلاة والسلام على النذير البشير صلى الله عليه وسلم .. أما بعد .، في بعض الأحيان نتخذ قرارات من دون إعطاء الفكرة الثانية، وهذا يقودنا الى مشكلة واننا نأسف على ما قمنا به وترغب في التراجع عن ما قمت به في عجلة من امرنا. المدون يوفر جميع المستخدمين لاستيراد وتصدير أو لحذف بشكل دائم على بلوق . افترض أنك حذف بلوق وثانية في وقت لاحق كنت ادرك ان بلوق حذف يحتوي على بعض المعلومات المهمة داخل الوظائف والحاجيات. كيفية التراجع عن ما قمت به أو كيفية استعادة المدونة الخاص بك والحصول على إعادته؟ لحسن الحظ توفر Google استعادة 90 يوما الخيار. 
يمكن استعادة بلوق حذف في غضون 90 يوما وبعد ذلك يتم إزالتها إلى الأبد من حساب Blogger الخاص بك. وسيكون اليوم آخر مشاركة كيفية استعادة بلوق الخاص بك قبل أن يتم تجاوز ثلاثة أشهر الحد مؤقت.

1 - كيفية حذف المدونة؟
  • انتقل إلى لوحة التحكم الرئيسية .
  • انقر فوق إعدادات رابط تحت المدونة المختار .
  • بينما في الأساسية صفحة سترى خيار من أدوات المدونة. تعطيك هذه الأداة ثلاث خيارات. يمكنك استيراد سواء، وتصدير أو حذف المدونة .
  • أولا اختيار بلوق تصدير خيار بحيث يمكنك الاحتفاظ بنسخة احتياطية من المدونة الخاص بك طارئ كنت في حاجة لها. تحديد موقع وحفظ ملف XML .
  • بعد أن كنت قد صدرت بلوق الآن يمكنك اختيار لـ حذف المدونة .


سوف يطلب منك مرة أخرى إذا كنت ترغب في حذف المدونة وجعل أكد اذا كنت ترغب في تصدير المدونة الخاص بك قبل حذف.
القيام تصدير المدونة الخاص بك إذا لم تكن قد فعلت.

اختر حذف هذه المدونة، ويتم تنفيذ كل ما عليك!


2 - استعادة حذف المدونة:

الآن عندما قمت بحذف المدونة الخاص بك. قد تكون دفعته الفكر الثانية، وقرر استرداد / استعادة المدونة الخاص بك. لا تقلق يمكننا أن نفعل ذلك بالتأكيد إذا لم تكن قد تجاوزت حد ال 90 يوما. قم بما يلي:
  1. انتقل إلى لوحة التحكم الرئيسية الخاص .
  2. أقل من المدونة الخاص بك جميع وسوف تجد الرابط الذي يقول "أظهر جميع". يخفي المدونة على بلوق حذف في لوحة المعلومات من أجل الظهور لهم يكفي النقر على "عرض لكل ".
  3. ثم هل سيكون قادرا على رؤية بلوق الخاص بك حذف .
   
    4. فوق الحذف هذا المدونة .
   

   5. سوف يتم استعادة المدونة الخاص بك في ثوان! :)

أشياء يجب القيام به في حين حذف المدونة

يتعين عليك أن تفعل هذا بشكل رئيسي لHTML / جافا سكريبت الحاجيات. لأن هذه الحاجيات تحتوي على رموز مهمة.
2) تصدير كل ما تبذلونه من الوظائف.
إذا في حال لم تقم استعادة المدونة الخاص بك في غضون 90 يوما ثم سيتم حذفه بشكل دائم ولذلك فمن الأفضل أن تحافظ على النسخ الاحتياطي في القرص الصلب. يمكنك بعد ذلك استيراد المدونة الخاص بك كلما كنت ترغب في استخدام نفس الأسلوب على النحو المبين أعلاه.
نأمل أن يكون هذا القليل من المساعدة هو أمر مفيد بالنسبة لمعظم من أنت. سعيد اليوم! :>


المصدر: http://www.konouzblog.com/2012/02/blog-post_6673.html#ixzz2Uzoc3mqP


بمناسبة رمضان المبارك أقدم لكم القالب الذي بحث عنه الكثيرون و هو قالب متميز قمتُ بتصميمه على أساس أن يكون قالبا حصريا للمدونة دون غيرها ، لكن بعد كثرة الطلبات على هذا القالب قررت أن أمنحه للجميع بعد ضبطه و تحسينه قليلا .

الفهرس
  1. مواصفات القالب و مميزاته .
  2. تركيب القالب و تنظيمه .
  3. خدع التنسيق للتحكم الجيد في القالب .

مواصفات القالب و مميزاته .

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

صور للقالب : الصفحة الرئيسية | صفحة التدوينة | صفحة عرض التصنيفات | البنية الداخلية للقالب

مواصفات القالب :
  1. هيدر مقسم إلى قسمين متقايسين في العرض ، قسم يحتوي على لوغو المدونة ، و القسم الآخر على مساحة إعلانية من قياس 60×468 .
  2. قائمة أفقية جميلة ، تحتوي على أزرار مصممة بتقنية الـCSS فقط ، و بالجانب مربع البحث الداخلي .
  3. مقطع خاص يظهر في الرئيسية فقط يصلح للكلمات في المناسبات كـ( رمضان مبارك سعيد ) | الصورة .
  4. تصطف التدوينات مثنى مثنى بحيث تظهر أحذث تدوينة كبيرة و بارزة ، و هذا أكثر ما يميز القالب .
  5. قائمة جانبية عادية ، تحتوي على أداة ' التدوينات الشائعة ' المتميزة بتأثيرات الجي كويري - واجهة المستخدم .
  6. يتكون الفوتر من ثلاث أعمدة متقايسة في العرض و الإرتفاع ، تصلح لبعض الأدوات الترويجية كصندوق الفيسبوك أو تويتر .
  7. الصور الخاصة بتصميم القالب تم تحويلها إلى بيانات Data URI ، للتخفيف من عدد طلبات الـhttp و تسريع تحميل المدونة .
  8. يوجد في أسفل كل تدوينة صندوق للتعريف بالكاتب ، يصلح للمدونات الجماعية ، سنرى طريقة تعديله في الجزء التالي .
  9. يوجد أسفل كل تدوينة زر ( طباعة المقال ) الخاص بخدمة Print Friendy & PDF ، و أربع أزرار للمواقع الإجتماعية الأكثر شهرة في العالم : غوغر بلس ، فيسبوك ، تويتر ، و الخدمة الصاعدة ثبث .
  10. يوجد أسفل كل تدوينة مساحة إعلانية أخرى من قياس 60×468 .
  11. يوجد أسفل المساحة الإعلانية السابقة إضافة مقالات ذات صلة بتنسيق CSS جميل .

تركيب القالب و تنظيمه .

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


تخصيص اللوغو :
اللوغو كمعظم القوالب يتم التحكم فيه عن طريق أداة ' رأس الصفحة ' ، و للحصول على لوغو متناسب مع عروض الهيدر فإنه يجب إعطاع اللوغو القياس 128×470 .

التعريف بالكاتب :
  1. توجه إلى اللوحة الرئيسية ← تصميم ← تحرير HTML  في الواجهة القديمة أو  اللوحة الرئيسية ← قالب ← تحرير HTML في الواجهة الجديدة .
  2. قم بتوسيع قوالب عناصر واجهة المستخدم .
  3. إبحث عن <div id='author'> ( إستخدم أداة البحث Ctrl + F ) .
ستجد ما يلي :

<b:if cond='data:post.author == &quot;عاشق النت&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='author'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLgSojNS6Bl7IyJoFbGVwfN88HzjeJbiOdiw7R28pIQfzkIEfwfLbxGhWnaZ0KqvjqUPtBT7VKqAeVDm0xi3B7wRQw178InS0B4QbKzADydB0hOoFgAmvJ6P7KJOwntuGtkNin_4bGoo/h120/me.jpg' style='padding: 3px;border: 1px solid #CCC;background: white;float: right;width: 90px;height: 90px;margin: 0 0 0 10px;'/>
<h2 style='margin: 5px 0;font-weight: 500;text-decoration: underline;'>بقلم عاشق النت</h2>
عاشق النت : إسم على مسمى &#1548; أعشق كل ما له علاقة بالويب و الإنترنت 
<div style='clear:both'/>
</div>
</b:if></b:if>

المعلومات التي تحتاج إلى تغييرها هي تلك الملونة بالأحمر ، إسم الكاتب في السطر الأول يجب أن يكون مطابقا للإسم في ملف تعريف بلوجر ، و إلى فإن أداة تعريف الكاتب لن تظهر .

في حالة ما إذا كانت المدونة جماعية ، فيمكن تكرار الكود السابق بنسخه و لصقه أسفل الأول و تعديل المعلومات ، بهذه الطريقة فإن الكاتب الذي قام بكتابة التدوينة هو من سيظهر تعريفه فقط .

أما إذا كنت تريد حذف هذه الأداة فيمكنك ببساطة حذف الكود السابق و ذلك لن يؤثر أبدا على تنسيق القالب .

الإعلان أسفل التدوينة :
قبل مغادرة صفحة تحرير HTML القالب ، إبحث عن <!-- Code Adsense --> و ضع مكانه كود الإعلان الخاص بك .


خدع التنسيق للتحكم الجيد في القالب .

أقدم لكم بعض التقنيات العجيبة التي ستذهلكم في القالب . يتوفر القالب على خصائص CSS تساعد الكاتب على تنسيق مواضيعه ، كإضافة الأزرار الملونة و الديناميكية ، و إضافة صندوق الأكواد  و غيرها .

الأزرار
هناك أربع أشكال من الأزرار الديناميكية ، الزر الأبيض و هو الزر العادي ، الزر الأحمر ، و الأزرق ، ثم البرتقالي .

طريقة إدخال الأزرار بسيطة للغاية ، فأثناء التدوين و بعد إنشاء رابط ما ، نُحول إلى الـHTML حيث ستجد أن رابطك عبارة عن عنصر <a> .

و لجعل مظهره مثل الزر نضيف سمة التعريف بالكلاس بالقيم التالية :

<a class="button" src="...">الزر الأبيض</a>    الزر الأبيض

<a class="blueButton" src="...">الزر الأزرق</a>   الزر الأزرق

<a class="redButton" src="...">الزر الأحمر</a>   الزر الأحمر

<a class="orangeButton" src="...">الزر البرتقالي<a>   الزر البتقالي

<a class="button down" src="...">زر التحميل<a>   زر التحميل

زر التحميل هو نفسه الزر الأبيض ، لكم مع إضافة القيمة down تزداد أيقونة التحميل في الزر ، و هذه التقنية لا تصلح مع الأزرار الأخرى .

صندوق الأكواد
يوفر صندوق الأكواد تنسيقا جميلا و مناسبا للأكواد من حيث الخط و الفراغات ، كما أنه يتناسب مع التنسيق العام للقالب .

فقبل كتابة الأكواد نُحول إلى HTML و نكتب ما يلي :

<div dir="ltr" class="codeBox"الأكواد هنا </div>

الصور في بداية التدوينات 
أنا شخصيا أحببت أن أحافظ على هذه الصور في جميع مقالاتي و لمن يريد عمل ذلك أيضا فإن قياس الصور هو 225×630 .

الصور هي الشيء الوحيد الذي يتم تنسيقه أوتوماتيكيا في صفحات عرض التدينات و ذلك إستنادا إلى كود جي كويري ، و هو لا يصلح على الفيديوهات .

هذا كل شيء عن القالب و أتمنى أن تستخدموه في ما يرضي الله سبحانه و تعالى ، و أكره أن يتم التلاعب بحقوق القالب .

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


مميزاته

  • الشكل الجميل : يتميز هذا الصندوق بشكله الرائع و أزرار الإرسال التي تسحب تلقائيا بعد وضع مؤشر الكتابة في صندوق التعليق .
  • إمكانية الرد على تعليقات الاخرين و الإعجاب بها .
  • إدارة التعليقات : عبر التحكم فيها بمحوها أو حظر كاتبيها بل حتى تغيير نصها .
  • إمكانية التعليق بحسابات عديدة : Google , facebook , twitter , OpenId , Yahoo , و حتى الزائر فقط يستطيع التعليق بشرط وضع بريده الإلكتروني .
  • إمكانية ترتيب التعليقات : من الأقدم إلى الأحذث و العكس ، أو ترتيبها حسب عدد الإعجابات بها سواء من طرف المدير أو من طرف الزائر .
  • إمكانية إضافة مشرفين : و ذلك لمتابعة التعليقات و تنسيقها بدل منك .
  • نشر التعليقات  :إما على حسابك في الفيسبوك أو في تويتر أو هما معا في نفس الوقت .
  • إمكانية تحرير CSS : مما يسمح لك بتغيير شكل و ألوان الصندوق كما ترغب .
  • ميزات أخرى عديدة ....


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

    إذهب إلى الموقع الذي يقدم هذه الإضافة  DisQus.com

    إملأ الإستمارة بمعلوماتك ثم أنقر على continue.



    ستظهر لك صفحة تصميم > عناصر الصفحة لمدونتك ، ضع الإضافة الجديدة أسفل رسائل المدونة الإلكترونية كي تعمل .

    الان تكون قد ركبت الإضافة .

    لكن تعليقاتك القديمة كلها لا تظهر ، عليك إستعادتها .

    جلب التعليقات 

    إذهب إلى هذه الصفحة : http://disqus.com/dashboard

    من هنا تستطيع إدارة التعليقات أيضا

    هكذا تكون قد أعدت تعليقاتك كلها .

    تغيير إعدادات الصندوق

    تستطيع تعديل و تغيير إعدادات صندوق التعليقات الخاص بك من خلال Setting ثم appearance .



    • theme : تتوفر على شكلين لصندوق التعليقات هذا ، تستطيع إختيار الذي يعجبك ( التيم الأول أفظل )
    • Mobile Theme : إن كنت تريد إستعمال إعدادات التعليق الخاصة بالموبايل أيضا فأشر الزر .
    • Pagination : عدد التعليقات المسموح بها في كل موضوع ، إختر No pagination كي تبقى التعليقات غير محدودة .
    • Default Sort : و هو ترتيب التعليقات ، إختر الذي يعجبك إما الأقدم أولا أم الأحذث أولا . ( تبقى خاصية تغيير الترتيب متاحة للزائر رغم ذلك )
    • Comment Form Position : مكان صندوق التعليقات بالنسبة للتعليقات نفسها ، إن أردته أن يظهر قبل التعليقات إختر Top of thread و إن أردت أن يظهر في الأسفل فاختر Bottom of thread .
    • Avatar Pictures : صورة المعلق ، إن أردت إظهارها إختر Show avatar و إن أردت إخفائها إختر Do not show



    إضافة blogger photo zoom لتكبير الصور

    السلام عليكم و رحمة الله تعالى .
    كثير منكم يستعمل إضافة الفايرفوكس Facebook Photo Zoom ، و هي أدات تمكن من عرض الحجم الحقيقي للصورة بمجرد تمرير مؤشر الفأرة على الصورة المصغرة .
    و من هنا أتتني فكرة عمل هذه الإضافة التي تتيح نفس الإمكانية لمدونات بلوجر ، و ذلك بإدراج كود jQuery بسيط ، ربما يستطيع بعضكم تعديله أو تغييره إن شاء ذالك .


    مثال عن عمل الإضافة 

    هذه صورة مصغرة ، قم بوضع مؤشر الفأرة عليها و سترى في أعلى اليسار الصورة بالحجم الحقيقي ، جرب حتى على الصورة الزرقاء فوق .

    مميزات الإضافة

    لقد طرحت هذه الإضافة من قبل في هذه المقالة لكن ما كانت تقدمه كان ناقصا ، أما بالنسبة لهذه فهي تتميز عن سابقتها بما يلي :
    • فهي تعمل على الصور المدرجة في المواضيع فقط و ليس على جميع صور المدونة .
    • لا تعمل الإضافة على الصور التي تحمل روابط لصفحات أخرى ، فمثلا صورة تحتوي على Download ، من الغباء تكبيرها ، فليس الغرض عرضها .
    • في حالة إذا كانت الأبعاد الحقيقية للصورة أكبر من أبعاد الشاشة يتم تعديلها لتتناسب مع الشاشة
    • لا تزال الإضافة تعاني من بعض النواقص ، و أنا أحاول أن أجد الحلول لها ، و إن كان عند أي أحد منكم أي إقتراح أو تلميح فليتفظل مشكورا .

    طريقة تركيب الإضافة

    قد يرغب البعض في جعل الإضافة تعمل على مواضيع محددة ، و قد يرغب الاخر في تعميمها على جميع المواضيع .

    على مواضيع محددة :

    أثناء تحرير الموضوع إنتقل إلى جهت تحرير HTML و ضع الكود التالي في اخر الموضوع

    <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>
    <script>
         $(function(){
            $("a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)")
                .mouseover(
                    function(){
                        var source = $(this).attr("href");
                        $(".post-body").append("<img src="+source+" class='zd' />");
                        $(".zd").css({"position":"fixed","zIndex":"10","top":"5px","left":"5px","border":"1px solid orange","padding":"5px","background":"#fff","maxWidth":"900px","max-height":"600px"});
                    }
                )
                .mouseout(
                    function(){
                        $(".zd").remove()
                    }
                )
        })
        </script>

    لتعميم الإضافة على جميع المواضيع إذهب إلى تصميم > إضافة أداة > HTML/Javascript و ضع نفس الكود السابق

    مبدأ عمل الإضافة

    نلاحظ أن الصور في بلوجر دائما تحمل روابط ، عندما تضغط على تلك الصور يتفعل الرابط و ينتقل بك إلى صفحة تضهر فيها الصورة بأبعادها الحقيقية ، في الحالة العادية . و ما يميز روابط الصور هو الرمز الذي تنتهي به .
    دائما ما إن تنتقل إلى صفحة الصورة الحقيقية تجد الرابط ينتهي بإحدى الرموز التالية :
    • gif
    • png
    • jpeg
    • jpg
    • bmp
    •  ini
    • JPG
    في الواقع هذه الرموز هي إمتدادات لتلك الصور ، و لا يمكن أن تجد صورة على الويب ليس لها واحد من هذه الإمتدادات .

    عمل الإضافة يركز على البحث على الروابك التي تنتهي بتلك الإمتدادات و تحتوي على صورة 
    <a href="xxx.png"><img src="yyy.png" /></a>
    ينسخ الرابط href و يخلق عنصرا جديدا هو صورة بمصدر src يساوي القيمة href التي نسخها ، و يعطيها خصائص css تمكنها من الظهور بالشكل الذي ترى .
    و عند إزالة مؤشر الفأرة عن الصورة في الموضوع ، يقوم الكود بحذف الصورة التي خلقها .
    و هكذا . كود بسيط و فعال



    إضافة صندوق أزرار المفضلات الإجتماعية

    باسم الله الرحمان الرحيم و الحمد لله رب العالمين و السلام عليكم و رحمة الله تعالى .
    إليكم الأداة المثلى لأزرار المفضلات الإجتماعية ، إنه صندوق الأزرار الإجتماعية
    من إنتاجي .




    يتوفر هذا الصندوق على أزرار كل المواقع الإجتماعية الأكثر شهرة :
            فيسبوك - تويتر - غوغل بلس - ثبت - عجب - شير الذي يحتوي على جميع المواقع الإجتماعية في العالم .

    هكذا يبدو الصندوق في المواضيع ( بالحجم الحقيقي )
    مع هذه الأداة لست بحاجة لإدراج الأزرار في مواضيعك كل مرة ، و هي متوافقة مع جميع المتصفحات .

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

     قم بحفظ نسخة احتياطية من القالب الخاص بك قبل البدأ

    من لوح تحكم مدونتك توجه إلى صفحة تحرير Html. قم باضافه علامة صح علي خانة توسيع عناصر القالب و إبحث عن الكود : <data:post.body/> 

    ثم ضع بعده مباشرة الكود التالي :

    <!-- AddThis Button BEGIN -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <center>
        <div class="addthis_toolbox addthis_default_style " style="width:440px; height:64px; padding:4px; margin:20px 0 0 0; border:1px solid #ccc; border-radius:5px">
        <div style="width:53px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_google_plusone" g:plusone:size='tall'></a></div>
        <div style="width:60px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></div>
        <div style="width:64px; height:100px; float:left; margin: 0 5px 0 0;"><a class="addthis_button_tweet" tw:count="vertical"></a></div>
        <div style="width:48px; height:100px; float:left; margin: 0 5px 0 0;"><a><script src="http://thabbet.com/stframe/"></script></a></div>
        <div style="width:60px; height:100px; float:left; margin: -10px 10px 0 0;"><a><script type="text/javascript" src="http://ajb.ms/button/init?type=large"></script></a></div>
        <div style="width:55px; height:100px; float:left; margin: 0 10px 0 0;"><a class="addthis_counter"></a></div>  
        <div style="width:55px; height:100px; float:left; margin: 0 5px 0 0;"><img src="http://img102.herosh.com/2011/06/28/551240818.png" /></div>  
        <div style="clear:both"></div></div>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
    <script type="text/javascript">url = document.location.href</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4df3ad593893f85e"></script>
    </center>
    </b:if>
    <!-- AddThis Button END -->
    يمثل الرمز ccc رمز لون الإطار ، يمكنك تغييره إلى أي لون تريد .


    المصدر: http://www.3asq-net.com/2011/06/blog-post_7654.html#ixzz2JvffXeu7

    تغيير شكل أداة المتابعين في مدونة بلوجر

    بسم الله الرحمان الرحيم و السلام عليكم و رحمة الله تعالى و بركاته .
    أولا لنتعرف ماهي أداة المتابعين :
    هذه الأداة هي قائمة لعرض مستخدمي غوغل المشاركين و المتابعين للمدونة ، و هي تتيح لهم التعارف بينهم و بعض الأشياء الأخرى .


    و يبدو أنها تظهر بشكل وحيد غير قابل للتعديل ، حتى بعد تغيير الأنماط الإفتراضية للنموذج التي تظهر عند إضافة الأداة و لست أدري لماذا ؟؟؟؟؟؟

    على كل حال هناك البديل البديع

    توجه إلى  http://www.google.com/friendconnect/admin/tos

    ستظهر لك الصفحة التالية :

    ( إضغط على الصورة لتكبيرها )
    إضغط على الصورة لتكبيرها
     بعدها ستظهر لك الصفحة التالية :

    إضغط على الصورة لتكبيرها
    قم بتحديد المدونة التي تريد تطبيق عليها الأداة من بين المدونات التي تظهر في القائمة على اليسار كما في الصورة .
    ثم إضغط على Ajouter le gadget Members .

    ستظهر لك الصفحة التالية :

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

    و بعد الإنتهاء إضغط على زر  Générer le Code و ستحصل على كود الأداة المعدلة .

    أنسخه و إذهب إلى لوحة تحكم بلوجر > تصميم > إضافة أداة > HTML/Javascript .

    ضع الكود و إحفظ و هنيئا لقد حصلت على أدات المتابعين معدلة



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



    ما هو METRO UI Menu واجهة المترو؟ 

     إذا كانت لديك خبرة عن واجهة Microsoft Windows 8، أو مجموعة من هواتف ذكية جديدة تعمل بنظام Windows Phone 8، هذه القائمة UI METRO ليست شيئا جديدا بالنسبة لك. مستوحاة هذه القائمة من واجهة ويندوز 8. تمكن المدون Syed Faizan Ali  من تطوير واجهة المترو الموجوده في نظام الويندوز الثامن إلى منصة بلوجر وتثبيتها في القالب، إذا كان أي شخص لا يزال غير مصدق في ذلك، يمكن إجراء النظر لقطة شاشة التالية.

    كيف تبدوا القائمة المترو الظهور؟

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

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

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

    كيفية إنشاء ويندوز 8 وجهة المترو في بلوجر؟

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

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

    /*===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 و ألصق فيها الكود التالي:

    <!-- 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvb1Q5xBvN-lli2UbHqg1zXQUlEe5CIaPwgMHdcHHX7siOvJ9o_-B7xBEmWcZKv6L6NwUEMhClWOdNrPRVro7zk0EZPmNhPVHXlymCgyziV9vHwzjm6qqQRCLNFzoSQqqqm5faM9wEJ4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhntiekh_ZdyJJH0NJO3G7RbWMRzfkKVE0KYB7MIiPF3ZnzUhCVfb82YyWi-Ov05JsDx1GVu3OOdxAVBTiMrHQnpeNl1dWXi-Gpm25kvZjyzQbz0g7oR8Q-UZSPzPibRTL1YwN_WwNWy7w/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhela057eA60cqnXav88DIifY4b_1uFdS7UK9WirCMUmvUFg98GuJ_1m6C7OmBGkvhE_r1pTMr1-BJn5lCV8eCySUcHjdEgrsbJ6Ssk-LTD4V4fOh4qm6cnuuID35ggtj_YOoqtqwgY4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JU_iu1IyUA0pBLFX1g4wo-mk987MyNjTI4bINl7tbV9Q1jLRkVuqhRiJ5ftjQwFrLoGuZGTjheii5Koli31TpldFQT1we5Uo3YnI9UeBnp6LqsbkxuqVwYNTAVo_rMKo_UDngpkmcZs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju84E5dNoQyHI1Sb6ld-4jEphuEDlPpet7jm9BMIxZtzT-WSer9rG9paHP6RX4I15YpA4TJ6AJZhOqAFaOUQxzx8TAsi5KHOwmYyQfQCbmc8yYMPbtf8a5VVHCvcKrKx-KMHng6Fbl-5Y/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_w3SyMgX2_jEfOrLRwJHt2Bxynzgq29-0xQ7vgBZlnxumds_aZ1R14t5mzoZ30pgTbSCBnkzWROKUpmkOJbeM1xsZHyDlrlVzvi0hlIOVGMFzeWMYd-nY6aLtiZ1p-0r33hogQ8V1h4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhILfOccZywTfG_cQyLqW2RXVtzAWVOeME5OuUQOv1ve0fbdVfNqOWo-i2DAJTiXBfeJTXUDRhTk-ZzDW-jsXbQJGaTm-NrvR9fhOEf-KcVEZMZtJgBYmFIJtEa-Euxo9I2JVAExJ8mjEc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTF5SA1iQxtNuWnQL82KWMj8H2vhMu3TYwx3K2eJGNR7SLBE1sgK5BeXngdKrGJOF1zZa1lOKwT7B8b2erNzl6apOUnMDIz-SKkTiKVdbvVk6Cp19fqrkFBV_M2fXUodokesnZGPzAzIg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRnI-_KnqOajw0cnPuQyXIvhp0YYq8GQ0I_CUTc922M0kkx17AlhxUdHGsS3IeEkng-7vrQbo3AoMUoHEBHTqzEnBweQ5xZo-IWSSMRStssUx5Fn7HimLD5HakE1ey5yLwcaHCx7mjio/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9sZIYyAHUfFXyr515FPAv51C9qxZtTZ-Js9JLuCFLmUsAn5tULyegeknRTHqGHPNZaa3VJel29t86RnrG7oO23eQ2gbqXlMmotxHSelCcPye-GNQShCQ5evpJR2Ige-oTurJiVqyrSw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjds7kvoSr7AEEFSvYBUGA_iUAkdqamutGSur3wNWZq39siDW22sH8PW0rUD5jNXZdvI92lZyAiuZGp5irnd-4TZwN8eDfQwiA7tM5JupgF9QrViAbRer9MI6V4N4qEm-o_n_lEYCrPpAE/s1600/MBL.png" alt="" />
    <span class="light-text">konozblog</span>
    </a>
    </div>
            <!-- End MblMetroMenu -->
    </div>
    <!-- END mblmetromenu -->

    هذا كل شيء. وقد تم دمج وجهة نظام ويندوز 8 تبدو وكأنها قائمة التنقل في موقع الويب الخاص بك.

    تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS والخ.

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


    تابعنا على الفيسبوك

    Unordered List

    الموضوع

    نموذج الاتصال

    الاسم

    بريد إلكتروني *

    رسالة *

    القائمة البريدية

    اشترك ليصلك جديد حلقاتنا

    تبادل اعلاني

    فيديوهات مختارة

    يتم التشغيل بواسطة Blogger.

    المتابعون

    المشاركات الشائعة

    أحدث التدوينات

    الربح من الإنترنت