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

1 - قم بالدخول إلى تبويب القالب

2- قم بتوسيع القالب الخاص بك

3 - أبحث عن هذا الكود

]]></b:skin>

4 - ثم ضع قبلها كود CSS هذا ( ملحوظة : هناك بعض القالب بها هذا الكود وهذا نتيجة ان صاحب القالب كان قد أضاف هذه الميزة به ولكن هناك بعض المطورين يقوموا بحذف الأدوات بدون حذف كامل لها مما يسبب أخطاء فى المدونة فيجب التأكد أولاً انه ليس بالمدونة عبر البحث عن أول صف من الكود التالى و إذا وجعته فلا داعى للأضافته مره أخرى و أنتقل للخطوة التالية )

/* Author Bio */
.postauthor {
background: #F5F5F5; border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden; padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right; margin-left: 1em;
}
.postauthor h3 {
color: #666; font-size: 1.2em;
margin-bottom: 5px; margin-top: 0;
}
.postauthor p {
color: #515151; font-size: 12px;
margin-bottom: 10px; margin-top: 0;
}
/* Author Bio End */

5 - أبحث عن هذا الكود <data:post.body/> وضع بعده هذا الكود ( إذا 

وجعت أتنين من هذا الكود أو أى عدد كان فالثانى هو المقصود ) أو

 بعد هذا الكود <div class='post-footer-line post-footer-line-1'> 

إذا لم يظهر بالشكل المناسب بعد الكود الأول

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postauthor'>
<img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
<h3>بقلم <a href='رابط حساب الكاتب'> اسم الكاتب </a></h3>
<p> فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if>

6 - لا تنسى تغيير ما باللون الأحمر ثم أضغط حفظ ومبروك الأضافة اذا احتجت مساعدة او واجتك مشاكل الرجاء وضع تعليق بلاسفل ليتم حلها 

تابع القراءه »

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

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

كيفية الإضافة:

توجه إلى لوحة التحكم في مدونتك > القالب > إضغط على تحرير html ثم أبحث عن الرمز </body>

ثم قم بإضافة الكود التالي فوق الرمز </body> مباشرةً.

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjSTZlnUary-aWuwaKIvRG-q4gSqd7x-AZWLT9DaIOaNY_yiAtON2tl0eTNtgfZrcEXlHBXWuliaIac3ngnHrBCTlhEXAwnaHupjN3fJvoV9KDkwblDN_vXXCcqORqBDGoyp1wl0kWis/w43-h11-no/www.madad2.com1.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">تحميل...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

أختر حفظ وتوجه الى مدونتك لمشاهدة النتائج.

يمكن تغيير الصورة المشار إليها بتبديل الرابط بروابط الصور التالية كما ترغب,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2rJPRdK3nNJz53IuB-gDACXEcaIcOReNE853fSrhX0OdmNZZgf9cLC-YALu9yUjTiuvBXru167bwomB3SA18Vzf8CFe-1kdyqELUi1nkqGyFFbbGFlPYPDhxEQweD2-IFrqVQG_dmW0/no/www.madad2.com.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjSTZlnUary-aWuwaKIvRG-q4gSqd7x-AZWLT9DaIOaNY_yiAtON2tl0eTNtgfZrcEXlHBXWuliaIac3ngnHrBCTlhEXAwnaHupjN3fJvoV9KDkwblDN_vXXCcqORqBDGoyp1wl0kWis/w43-h11-no/www.madad2.com1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x4qhNcxyXqNdO1nEoAmUE2gfnoIFX7iIEUCqkLnsb-TcMKEPhLB0iLp-1pUXc-b0wAPhRBhCNsiVNiZbFBmpAAOXhVmwOmhUs4t5aLE2kdNrYNXFOg0_C30XfXlc-soH5oDHWZRqMkg/w220-h19-no/loader+www.madad2.com.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1o7touJztmwfoNVuyV2r8_qSJKz-XTj34Rk652GUHQtGzwNZxQlgDzbymUdeif8TY0yq3lzFxJOyLPctHVqbilItDmt1bbthwkQF68DBuGP0ppRoNceMqD90u9WRR17cMTyIlI0dEiZc/s32-no/Loadding-www.madad2.com.gif

تابع القراءه »

خدمة السكايب Skype ، هي من أشهر خدمات التواصل المعروفة في عالم الانترنت، وهي الان في ملكية شركة ميكروسوفت بعد أن قامت بشرائها بعد ان كانت شركة السكايب تمر بأزمة خانقة.

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

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

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

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

توليد ونسخ كود زر سكايب

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

إدخال معرف حساب السكايب :

أول الحقول المطلوبة هو خاص بمعرف حساب السكايب، قم بإدخال معرف حسابك في موقع السكايب. وهدا المعرف تحصل عليه عندما تقوم بتسجيل حساب في موقع السكايب، فلكل حساب معرف خاص به لا يتكرر. أما إدا لم تكن تتوفر على حساب فيمكنك إنشاء واحد في هده الصفحة Sign Up Now.

إختيار الوظيفة التي تريد أن يقوم بها الزر :

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

إختيار شكل ولون الزر :

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

نسخ ولصق الكود :

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

كيفية إضافة زر السكايب الى مدونة بلوجر :

للإضافة زر السكايب الى مدونة بلوجر، يرجى إتباع الخطوات التالية :

1. ادخل الى لوحة تحكم مدونتك
2. من القائمة الجانبية اظغط على   
3. توجه الى منطقة المربعات الجانبية التي تريد وضع الكود فيها و اضغط على   
4. بعد ظهور قائمة المربعات ، اختر   
5. و بعد ظهور النافدة، ضع الكود الخاص بزر السكايب داخل حقل النصوص الكبير والموجود داخلها.
6. ثم اظغط على 

تابع القراءه »

إخواني الكريام كيف الحال

اليوم بإذن الله ساضع لكم إضافة ليست بالمهمة لكن قد يرغب بها بعضكم وهي إضافة صرف العملات

وذالك لمعرفة سعر العملات العالمية مقارنة بسعر عملة دولتك

صورة من الإضافة

قد تصلح للمدونات التي تهتم بالربح او التجارة لغعطاء طابع مميز للمدونة

لتركيب الإضافة قم بإضافة اداة جديدة ثم ضع فيها هذا الكود

<div style="margin: 0px; padding: 0px; border: 2px solid rgb(136, 136, 136); width: 292px; background-color: rgb(255, 255, 255);" align="center"><noscript><div style="width: 100%; border-bottom: 1px solid rgb(136, 136, 136); margin: 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); background-color: rgb(204, 204, 204);" align="center"><a style="text-decoration: none; font-size: 10px; font-weight: bold; text-align: center; font-family: Arial; margin-bottom: 6px; color: rgb(0, 0, 0);" href="http://fx-rate.net/" class="VSlabel">Currency Calculator</a></div></noscript><script src="http://fx-rate.net/converter.php?layout=verticals&amount=1000&tcolor=000000&default_pair=USD/EUR" type="text/javascript"></script></div>

هذا كل شيئ أتمنى أن تعجب الإضافة من هو مهتم فيها ;) ميعادنا في موضوع آخر وإضافة جيدة

لذالك الحين بالتوفيق للجميع ودمتم في رعاية الله وحفظه

تابع القراءه »

كيف الحال أخواني أتمنى أن تكونوا في تمام الصحة والعافية

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

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

حسنا الآن الكود المستعمل في ضهور الإعلانات في جانبي المدونة

<div id='Chhibo-wrapper'>
<div style='background-color:#111111; color:#fff; float:left; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; left:0; z-index:999;'>
إعلان أدسنس
</div>
<div style='background-color:#111111; color:#fff; float:right; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; right:0; z-index:999;'>
إعلان أدسنس
</div></div>

ضعه فوق وسم </body>

الكود الحالي يضهر الإعلانات في كافة الصفحات

-الصفحة الرئيسية

-داخل المواضيع

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='Chhibo-wrapper'>
<div style='background-color:#111111; color:#fff; float:left; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; left:0; z-index:999;'>
إعلان أدسنس
</div>
<div style='background-color:#111111; color:#fff; float:right; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; right:0; z-index:999;'>
إعلان أدسنس
</div></div>
</b:if>

لإضهار الإعلانات داخل المواضيع وليس في الصفحة الرئيسية استعمل هذا الكود

<b:if cond='data:blog.pageType == "item"'>
<div id='Chhibo-wrapper'>
<div style='background-color:#111111; color:#fff; float:left; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; left:0; z-index:999;'>
إعلان أدسنس
</div>
<div style='background-color:#111111; color:#fff; float:right; margin:0 auto; padding:0 auto; border: 3px solid #54B8E8; position:fixed;top:0; right:0; z-index:999;'>
إعلان أدسنس
</div></div>
</b:if>

هذا كل شيئ اتمنى أن أكون وفقت في شرح الطريقة وأي سؤال لا تتردد في طرحه

بالتوفيق للجميع ودمتم في رعاية الله وحفظه

تابع القراءه »

بسم الله الرحمن الرحيم

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

شيء مهم جدا ، لأي موقع ناجح ، أن يكون هناك وسيلة للتواصل بين صاحب الموقع وزائريه.

تستطيع ان تضع بريدك الالكتروني في الموقع ليتم التواصل عبره ، لكن ذلك يتضمن الكثير من المساوئ ، منها كشف سرية بريدك الالكتروني للجميع ، وتعرضه لرسائل الدعايا المزعجة المعروفة بـ"السبام" spam.

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

الفرصة علي زوارك بالتواصل معك والإجابة علي إستفساراتهم

لنبدأ على بركة  الله 

الشرح سيتم علي 3 مواقع توفر هذه الخدمة 

foxyform

freedback

emailmeform

أولا موقع : foxyform

اضغط علي الصورة التالية  للدخول إلي الموقع

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

انسخ الكود

من لوحة التحكم قم بإنشاء صفحة جديدة

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

قم بترتيب الصفحات ثم إضغط  حفظ الترتيب  .

سيكون شكل الصفحة بهذا الشكل

ثانيا موقع : freed back

للدخول الي الموقع قم بالضغط علي الصورة التالية

بعد الدخول الي الموقع اضغط

ستفتح صفحة التسجيل  قم بالتسجيل في الموقع والتفعيل عبر الإيميل

بعد تفعيل حسابك  قم بالضغط عليLogin

 قم بتحديد الشكل المناسب ثم إضغط Continue

انسخ الكود الناتج , وطبق نفس الخطوات السابقة مع موقع Foxy Form

ثالثا موقع : emailmeform

- اضغط علي الصورة التالية للدخول إلي الموقع

نفس الخطوات التي تم تطبيقها مع موقع freed back قم بتطبيقها معموقعemailmeform

اضغط 

قم بالتسجيل في الموقع ثم اضغط Sing Up

قم بتفعيل الحساب من الإيميل

يمكنك إختيار الخيار الثاني لإنشاء تصميم بنفسك 

اختر 

اضغط Customize للتعديل 

قم بالتعديل علي النموذج  بالضغط علي الحقل ثم التعديل عليه من الناحية اليسري 

ثم اضغط 

اختر الخيار الأخير

اخترcode

انسخ الكود الناتج وقم بتطبيق الخطوات السابقة

أي سؤال أو إستفسار لا تتردد في طرحه اترك تعليقك في الاسفل 

تابع القراءه »

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

خطوات بسيطة جدا

أولاً ندخل لوحة التحكم وننتقل للقالب ومن ثمة نبحث عن كلمة   </head> 

وبعد ذلك نقوم بإضافة الكود الظهار ادناة فوق كلمة  </head>  مباشرة

<script type='text/javascript'>//<![CDATA[

(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

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

             

تابع القراءه »

بسم الله الرحمن الرحيم
اليوم ساتيكم بايقونات مواقع التواصل الاجتماعي احترافية بالنسبة للمصمم , وكما اقول ان الايقونات امر مهم جداً لكل مصميم يجب عليه الاخذ بالاعتبار ,  اليكم اليوم حزمة من ايقونات مواقع التواصل الاجتماعي 2014 .

اليكم مجموعة ايقونات psd 2014 اختر الملف الذي تريدة كما تظهر المعاينة في الصورة وقم بتحميلة فقط :

Social icons – freebie

Free Vector Polygon Social Media Icons by LunarPixel

Simple Flat Social Media Icons

60 Free Flat and Long Shadow Social Media Icons

Long Shadow Social Media Icons

Flat Icons EPS

Free Colorful Icons

Somacro Social Media Icons

Bean Social Icon Set

تابع القراءه »