السلام عليكم ورحمة الله
عودة للتدوين مع قالب جديد تم تصميمه بتقنية html 5.css3 والقليل من jquery
مازال القالب قيد الاختبار والتعديل وساضيف بعض الخصائص لاحقا
اهم مايميز القالب الجديد انه سريع التصفح كما انه متوافق جدا مع الجوالات وكذلك المتصفحات الحديثة
قمت بتصميم القالب بناءا على ماتعلمته في عالم الويب كما اني استوحيت بعض الاضافات واللمسات من مصادر عديدة اهمها فريق كوردرب way2blogging

  ونرحب بارائكم وانتقاداتكم والسلام عليكم


 

تابع القراءة

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




للاستفادة من المحرر تفضل من هنا


للحصول على باك لينك تفضل من هنا


 دروس واضافات بلوجر مدونة تقارب


الربح من النت تفضل من هنا


.......................................................................................
فيما يلي الرد على تعليقات الاخ علي استثنائيا


اولا شكرا لك ولا افتقدتك العافية
لماذا لم تكن تريد التطرق لموضوع؟لا يا اخي تطرق لاي موضوع يعجبك ماعندي مشاكل


اولا راجع هذا الموضوع   تفضل من هنا


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


+ حتى في مدونة mybloggertricks لم يتم طرح كيفية عمل محرر html+ css انما صاحبها محمد خليل زاي قام بانشاء المحرر الذي هو عبارة عن صفحة html قام برفعها على استظافة  
hostgator  اما انا فقد تعبت في اعادة صياغة المشروع خاصة ان بلوجر لا يدعم انشاء صفحات مستقلة المهم اني اقتبست وذكرت الامر 
يمكنك ايضا عرض السورس وستفاجأ باني ادرجت ايضا في السورس اني اقتبست من هذه المدونة مع اني عملت عليه ولم اعمل نسخ لصق لا علينا
اذا استعصى عليك امر عرض السورس كود اسفل الموضوع رفعتلك  صورة توضيحية
انا نصحتك وكنت متوقع ان تصغي للنصح لا ان تقوم بطرح تعليق مشابه وقد اخطأت التصويب  انا لست ناسخ مواضيع ولا مترجم


اما عن قولك


في المرة القادمة(إن كانت هناك مرة قادمة)
فلن تكون هناك مرة قادمة هذا اكيد 


.........................................................................


وكما ذكرت انا متوقف عن التدوين ربما لفترة محدودة وربما انتهى الامر نهائيا لكن باب التعليقات يبقى مفتوح ومن اساء فقد اساء لنفسه وساقوم بحذف ماينبغي حذفه لكني لن ارد على اي تعليقات مستقبلا








في اما ن الله

تابع القراءة

السلام عليكم ورحمة الله

كنت قد وعدت بتقديم سلسلة لطرق الربح من النت ولم يكن موضوعي الاول  المقرر طرحه هو موقع wazub انما كنت ساطرح بعض برامج affiliate  لكن بعض الفرص لا تعوض والوقت المخصص لهذا العرض شارف على الانتهاء لذا قررت طرحه اولا

عند محاولتي عمل شرح لهذا البرنامج الربحي وجدت ان هناك من طرحه سابقا لذا نقلت الشرح لاختصار الوقت ولاني ببساطة لم اجد ما اظيفه لان الشرح للموقع الاصلي وقام البعض بترجمته فلا فائدة من التكرار

حسنا دون اطالة نبدأ

هل تريد راتب شهرى دائم مدى الحياة .؟؟؟؟

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

أتمنى منكم قراءة هذا الحوار لفهم آلية عمل الموقع:-
سؤال 1 : ما هو موقع Wazzub ؟
جواب : Wazzub هو موقع اجتماعي جديد مثل الفايسبوك وتويتر. موقعنا يستخدم بالضبط نفس التكنولوجيا مثل جوجل مع بعض الاضافات .

........................................................................................................
سؤال 2 : بماذا سأستفيذ منه ؟
جواب : موقع Wazzub موقع ربحي تستطيع من خلاله جني الكثير من المال ، أول
خطوة هي التسجيل لكي يزيد عدد المستخدمين فيه ومن ثم ستعرف كيف تبني
مستقبلك مع هذه الشبكة.سيتم دفع 50 % من جميع الأرباح على الأعضاء. و 50 % الأخرى تذهب إلى المساهمين الذين يستثمرون الكثير من المال لجعل WAZZUB يحدث. ويصبح ثورة المواقع

......................................................................................................
سؤال 3 :بعد التسجيل ، ما هو المطلوب مني ، هل سأضغط على الإعلانات أم سأشتري شيئا ما ؟
جواب : كل ما عليك هو التسجيل فقط ، ولن يطلب منك لا الضغط على إعلانات ولا تنزيل برامج ولا شراء أي شيء.

.....................................................................................................
سؤال 4 : إدا كنت سأجني المال من هذه الشركة ، فما هي مداخيلها هي أصلا ؟ !
جواب : قبل أن أجيبك على هذا السؤال ، انت تعرف موقع الفيس بوك و تويتر و
محرك البحث الشهير جوجل وكلنا نستخدمهم هل دفعت لهم في يوم من الأيام ،
طبعا لا ،، ولكن لأنهم يضمون ملايين المستخدمين مثلي ومثلك أصبحوا يجنون من
ورائنا العديد من المال ،، ولكن دون أن يدفعوا لنا شيئا ، أما موقع wazzub
فهو مختلف تماما وستعرف كل شيء في حينه.
...................................................................................................
سؤال 5 : ادا كيف سأجني أنا المال من موقع Wazzub؟
جواب : كما قلت سابقا فموقع Wazzub سيكون موقع اجتماعي ينافس الفيس بوك و
المواقع الأخرى ، وكل ما يريده الآن هو جمع أكبر عدد من المستخدمين .
..................................................................................................
سؤال 6 : متى سيدفع لي موقع Wazzub ؟؟
جواب : الموقع سيفتح رسميا يوم 9 أبريل ،، لدى يجب على أي شخص أن يقوم
بالتسجيل حاليا ،، و جلب أكبر عدد من الأشخاص ليتسجلوا تحته ويكون شبكة
خاصة به ،، وعند فتح الموقع سيقوم بإرسال المبالغ الصغيرة على حسابات
البنوك الإلكترونية الخاصة بالمستخدمين في حين المبالغ تتم بواسطة شيكات او
تحويل بنكي .لابد ان يكون لديك 3 ريفيرال تحتك لتصبح مؤهلا لسحب اضافة
الأموال
..............................................................................................
و الآن إلى التسجيل بالصور و بالتفصيل :-

الموقع سيبدا الشطر الاول رسميا يوم 1/1/2012- وسينتهى يوم 1/4/2012 وفى هذه الاربع اشهر سيكون كل المشتركين شركاء فيه لهم ارباح شهرية يمكنكم التسجيل باي ايميل ولكن انصحكم بالتسجيل  جي ميلGmail 

1- للتسجيل تفضل من هنا

 2- بعد الضغط على رابط التسجيل ستفتح لك نافذة ، في أسفل النافذة ستجد استمارة التسجيل كالتالي :-

3- بعد ملأ الإستمارة و الضغط على كلمة Join ستشاهد هذه الرسالة
أي أن عملية التسجيل تمت بنجاح:-

  4- الآن إذهب إلى بريدك في جوجل وستجد أن الرسالة قد وصلت:-

الرسالة يمكن تجدها في السبام (( البريد المزعج )) ابحث عنها بعد ذلك الرسائل ستأتي بشكل عادي:-

5- بعد فتح الرسالة ستجد رابط  *******  إضغط عليه لتنشيط حسابك
هذه أهم خطوة شاهد الصورة:-

6- بعد الضغط على رابط ******* ، ستشاهد رسالة مفادها أنه قد تم تفعيل حسابك بنجاح مبروووووووووووووووك ، شاهد الصورة

 7- ستأتيك رسالة أخرى تحتوي على إميلك وكلمة المرور اللذان سجلت بهما:-

طبعا هذه صورة شخصية بي

8- الآن توجه إلى الموقع عن طريق هذا الرابط:-

http://signup.wazzub.info/login.php

9- ادخل الايميل والباسورد مبروووك ، أنت الآن داخل حسابك وستجد رابط الريفيرال الخاص بك لدعوة اصدقائك:-

 

(( ملاحظة هامة جدا ))
يجب دعوة مجموعة من الاصدقاء للتسجيل فى الموقع على الاقل 5 أصدقاء وكل شخص يقوم بدعوة 5 أصدقاء آخرين وهكذا حتى يزداد دخلنا الشهري بنسبة كبيرة وللتأكد من صحة كلامى ادخلوا على هذا الرابط :-
http://www.wazzub.com/calc/calculator.htm 
..................................................................................
الموقع سيبدا الشطر الاول رسميا يوم 1/1/2012
الفترة ماقبل بدا جني الارباح واللتي سيضهر فيها الموقع للوجود
تحقق منطقة الأعضاء العلامة التجارية الجديدة لمشاهدة دوونلين الخاص المتنامي. في WAZZUB، ونحن نسميها FACTOR $ (الدولار عامل).
1 أبريل 2012 هو يوم بدا وابتداء من هذا التاريخ يمكنك التمتع بارباحك من الشبكة والبدء في كسب المال.خطوة بخطوة سوف نضيف المزيد والمزيد من الوظائف التي تجعل WAZZUB الصفحة البيت المثالي :
محرك بحث قوي، وهو قسم الأخبار الشخصية، وأفضل الصفقات على الانترنت وميزات الترفيه مذهلة مثل أشرطة الفيديو وألعاب المهارة،.....
بناء على قوتكم انتم المستخدمين سوف نخلق موقعا متكاملا يجمع المحادثة الترفيه والربـــح والكثير
.........................................................................
من أين تاتي الشركة بالمال ؟
ليس عليك الدفع ، شراء أو بيع أي شيء،اذن ماهي ارباح WAZZUB ؟
دعونا ناخد جوجل كمثال : قوقل أكثر من 1 مليار مستخدم شهريا الذين يستخدمون خدماتها دون دفع ثمن ذلك.
جنت جوجل الربع الأخير 3 مليارات دولار فقط من الأرباح عن طريق عرض
الإعلانات. وهذا يعني انه يكسب في المتوسط ??1 دولار لكل مستخدم شهريا.
فالشركة تزداد ارباحها بازدياد عدد المسجلين بها وكدا مستعليها اي نحن
حتى ابريل مدة جد كافية لتكوين شبكة قوية من خمس مستويات
...........................................................................

هنا لمعرفة ارباحك في الشهر الواحد : متال اذا قمت باستدعاء 5 اشخاص
اذهب الى الموقع وضع 5 ثم 5 وانظر الارباح الهائلة للمستوى الخامس
http://www.wazzub.com/calc/calculator.htm
..................................................................................
متال اذا قمت باستدعاء 5 اشخاص
1st. Generation 5 x $1.00 = $5.00
2nd. Generation 25 x $1.00 = $25.00
3rd. Generation 125 x $1.00 = $125.00
4th. Generation 625 x $1.00 = $625.00
5th. Generation 3125 x $1.00 = $3,125.00
............................................................

الشركة تعطي فرصة للمسجلين لتكوين شبكتهم لانه بعد 9/4/2012 فستبدا الشركة
رسميا. و ستقوم فقط بالدفع للمسجلين قبل هذا التاريخ اي بعد الدفع ليست
هناك فرصة اخرى للربح منها . لابد ان يكون لديك 3 ريفيرال تحتك لتصبح مؤهلا
لسحب اضافة سحب المبالغ الصغيرة تتم بواسطة البنوك الالكترونية في حين
المبالغ تتم بواسطة شيكات او تحويل بنكي

.............................................................

ملاحظة 

هامة اشار اليها الموقع فقط الذين سجلو قبل تاريخ 9/4/2012 هم فقط من سيوف يحصلون على الارباح مدى الحياة كل حسب شبكته.
...............................................................

للتسجل


تفضل من هنا

تابع القراءة

السلام عليكم ورحمة الله متابعي المدونة وزوارها
منذ فترة ليست ببعيدة لمحت هذه القائمة وقد تم طرحها في مدونة عرب بلس نقلا عن مدرسة script-tutorial 
طبعا الموقع يعتبر مدرسة لمطوري الويب وهو غني عن التعريف





ما قمت انا بعمله هو تطويع القائمة لتناسب مدونات بلوجر



تحميل السورس معاينة





الان انتقل الى المحرر لتقوم بتجربتها مباشرة


محرر اكواد html



كود css  قم بطبعه مكان هنا كود css

/* navigation menu styles - main styles */
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;

    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:absolute;
    left:5px;
    font-size:11px;
    font-weight:bold;
    color:#fff;
}

/* top line - hover styles */
ul.navi:hover {
    height:100px;
}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(70px);
    -ms-transform: translatex(70px);
    -o-transform: translatex(70px);
    -webkit-transform: translatex(70px);
    transform: translatex(70px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(140px);
    -ms-transform: translatex(140px);
    -o-transform: translatex(140px);
    -webkit-transform: translatex(140px);
    transform: translatex(140px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(210px);
    -ms-transform: translatex(210px);
    -o-transform: translatex(210px);
    -webkit-transform: translatex(210px);
    transform: translatex(210px);
}
ul.navi:hover li#n5 {
    -moz-transform: translatex(280px);
    -ms-transform: translatex(280px);
    -o-transform: translatex(280px);
    -webkit-transform: translatex(280px);
    transform: translatex(280px);
}

/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;

    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;

    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}

/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;

    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(60px);
    -ms-transform: translatex(-70px) translatey(60px);
    -o-transform: translatex(-70px) translatey(60px);
    -webkit-transform: translatex(-70px) translatey(60px);
    transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
    -moz-transform: translatey(60px);
    -ms-transform: translatey(60px);
    -o-transform: translatey(60px);
    -webkit-transform: translatey(60px);
    transform: translatey(60px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(70px) translatey(60px);
    -ms-transform: translatex(70px) translatey(60px);
    -o-transform: translatex(70px) translatey(60px);
    -webkit-transform: translatex(70px) translatey(60px);
    transform: translatex(70px) translatey(60px);
}

وطبعا كود html   مكانه واضح

<div class="example">

    <!-- defining top menu elements -->
    <ul class="navi">
        <li id="n1"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu1</span></a>
            <!-- defining sub menu elements -->
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu11</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu12</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu13</span></a></li>
            </ul>
        </li>
        <li id="n2"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu2</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu21</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu22</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu23</span></a></li>
            </ul>
        </li>
        <li id="n3"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu3</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
            </ul>
        </li>
        <li id="n4"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu4</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
            </ul>
        </li>
        <li id="n5"><a href="http://th3experts.com/css3-animated-slide-menu/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Tutorial</span></a>
        </li>
    </ul>

    <div style="clear:both"></div>
</div>

ثم اضغط زر  استعرض وستظهر لك الاضافة في القسم الايمن من المحرر  قم بتمرير الماوس  لتشاهد تاثير الانزلاق  والانقسام  ثم العودة  السلسة  عند ازالة الماوس




قم بتغيير مايجب تغييره  لتلائم القائمة احتياجاتك   قبل تركيبها على مدونتك   واي استفسارات او مشاكل مع القائمة انا في الخدمة

 رابط الموضوع على مدونة عرب بلس

المصدر الاصلي

 

تابع القراءة

السلام عليكم ورحمة الله

اليوم تم انهاء مشروع المحرر وتمت تجربته والحمد لله لاتوجد اخطاء

المحرر مفيد لكل مطور او معرب ويسهل العمل كثيرا

ليس هذا فقط بل استخداماته عديدة انا شخصيا يساعدني في بناء وتطوير الاضافات  كما انه يستعرض بسرعة دون الحاجة لاعادة التحميل والحفظ في كل مرة

الان نعطي مثال تطبيقي لتتضح لك فكرة المحرر اونلاين

اولا قم بزيارة المحرر

تفضل من هنا



الان قم بتعويض عبارة هنا كود  css     بهذا الكود وطبعا هو كود css


 

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQEkoPeJiRWg4JqKjFky-gwmQld_5rIAjLLJWBJeX3oYJfZ-C6wjp7KzKg3uCl8KJxV0tN9mdtSUpYpwgSXlfNm4hrCCnoGc3OJrIpRaIb4dq40mm94OJHCBBEqnf42XkE6EZQPEeqH0/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8hTKHSl3OI-OTqSwYzNx0m58YNE51_T6Eh-JMRs9uhtepfFGIDtiozivUDbNtnT1yW8pRiNDmndHzPPkfnmaBTp6-T4OtPpdSA-u_oUTMvpQc2cQx7Y2ldVMNTv7KavAv87_EWLsqS4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV5fwrJzXA53Gysc1WLxs4HMMgxQ2JMl0OSv0qJcOSdjdU23ZItsJo4HG7_-Pnz3YiDNy5jESwASyXNYmXTCfvMvDaOd8E2UIGSwTHAbmJtJk9W6UacCHCR11BXauRBIqSQAHD-gzUa8/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJSCtiiaPlcqMNioaQfQ-nwcOPqI68n0uSdYVCjMthIbjIb97OmDBzmjI5ROtyuTQEZM_Y6kcv7kamiG_rGZNNX_VoBxAKXLQmIUpzsF1D4upNDl4TUEWJVPzDzsnquOt5hqQq6vOWxc/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF0fE9UoeZwqFKY2baECnieUzea5h8bo3C4LjRRLfr5hl3wdQiWr4SaygMkKQkpyh-WSzX3RtnFKqbvYLhm2Zx2Loby0EnOeNpv_NzuH7-sM6_xaxf3v300N38cwDsv5JUzJsbPOhiI8/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc75V_6L6wKmixP-SSpj3S780UBaHS_0cAAlm513Oonznbv2MVUtUJah1NzGPrJTvCNbwJWr4pGxsJiye4ZNiCPX47o1GwtXJjq7ot3tO-LHC2-FHhL9QyIIZ0N1rNnnp-sKJNpFJ9o-A/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGsjpg02zMF0ruyWK-0O9eCAzRAsubwappRow7r8lNL8ohPBl5nBdz1bOBjewFKBVO4YYJX7RVd3SgQbOjWi3VahojOj0re-RAPgd6vSPPcWiWlozYVjncV5pDbNyKfpeohZV-6Al2qA/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFC1OkLlaN5HaHuCNuQ7gsjoU1pJwMuMb7AJYBJfQFuhG8D7nKAIGVwmOcxsmRW9OIKKSN5YOZyFKtXuy-cUryJRp_kHaT2OFb0_Jci0CIDIUpx0Nm4AmQ-X5ajj4eeqzgNUuOtO6vcM/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdBigRAWfMbY6g9D4NluIn0WQvMCK3n9gL_52RLyNs7ypWjbWTC1TPZ9ENUvHXJAH3giakkf0UfmuIvbrYVJVcP5c8bko-RQ8Ej-t_pdohgNi7CodJep9vP8anHAqAEogA4GIFZr2w8k/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQuA6sySxcBR6omZqeH5MJ5cjyuuQR1fWRO24Vtp8NLNOabmZrBjfIb_ooAKlC_JQqnSQNFNYzK4hONUDEVGp0Uzhw5O-ibZb1y8VcLny90PA_rkrvkvxD-HbGdVzvOBY5Ygwk3v8U7E/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcBPKucf6Nr-9WMLSUR2_BqU3wqQowCr-pQ0JbrPtRkuqtCEiklYl5YD78O13LJyZHASoi-jTiF5qCufVpXOKiBOqCuCTOB5-6KtVJAmPnPbltjqmU9ijgRpDl1fxhU5dJpUl74IvZVE/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJV6oBHYSVtiNF6yMp109RsLT_TZF3Te7HzBdPLnK4nNRjBboggZb5PI-7-m8otMnRAm54fkb4jAu1OlStLYvIedm57hoYiI1Jz33N4KDoa2RYB9C79HKw-oj0kIeA0vsHqmHowWPEic/s1600/youtube_32.png'); }

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

عوض ايضا عبارة   هنا كود html   بهذا الكود وهو كود html

  <div class="spinning_icons">
    <a href="الرابط" class="twitter" title="twitter">Twitter</a>
    <a href="الرابط" class="delicious" title="delicious">Delicious</a>
    <a href="الرابط" class="digg" title="digg">Digg</a>
    <a href="الرابط" class="dribbble" title="dribbble">Dribbble</a>
    <a href="الرابط" class="email" title="email">Email</a>
    <a href="الرابط" class="facebook" title="facebook">Facebook</a>
    <a href="الرابط" class="flickr" title="flickr">Flickr</a>
    <a href="الرابط" class="foursquare" title="foursquare">Foursquare</a>
    <a href="الرابط" class="linkedin" title="linkedin">Linkedin</a>
    <a href="الرابط" class="rss" title="rss">RSS</a>
    <a href="الرابط" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="الرابط" class="youtube" title="youtube">YouTube</a>
</div>

الان اضغط زر استعرض  واستمتع

             

بالتعديل على الاضافة كما يحلو لك  دون الحاجة للتعديل على قالبك

اظن الفكرة صارت واضحة الان تستطيع تصميم قوالب,اضافات,تعريب,تجربة اضافات قبل تركيبها على قالبك, وحتى عرض قوالب !والتعديل عليها بسهولة

اي استفسار انا في الخدمة ارجو ان يكون المحرر مفيد


شكرا لجميع متابعي المدونة على دعمهم 
وترقبو المشاريع القادمة ان شاء الله

تابع القراءة