بلوجر:حصريا قالب Lycoris النسخة الثالثة

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

معاينة حية للقالب:

إضغط هنــــــــــــــــــــــــــا

مميزات القالب:

1. تصميم فلات بسيط


2. قائمة علوية مميزة وتابثة


3. قائمة منزلقة من الاعلى أكثر من رائعة


4. خاصية الموضوع العشوائي "فاجئني"


5. خاصية مواضيع ذات صلة


6. دمج تعليقات الفيس بوك مع تعليقات بلوجر


7. تعريف الكاتب


8. تمييز الكاتب في التعليقات


9. قالب متجاوب Responsive


10. ويحتوي على المزيد من المميزات اترككم تكتشفونها بأنفسكم

حان وقت التحميل:

إضغط هنـــــــــــــــــــــــــــــــــــــــا

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

اسم الموضوع :حصريا قالب Lycoris النسخة الثالثة قسم : قوالب بلوجر المصدر : عين العرب

بلوجر:قالب بلوجر Lycoris النسخة الأولى والتانية

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

صورة من النسخة الأولى:

معاينة

صورة من النسخة التانية:

معاينة

كلا القالبين يتشابهان لكن النسخة الاولى بيضاء والنسخة التانية سوداء لكن شكلهما مميز للغاية ويصلحان للعديد من المجالاات سواءا التقنية او الشخصية او الثقافية

من مميزات القالبين:

1. قوالب مميزة دات خاصية عرض مميزة


2. قوالب Responsive وهي خاصية مميزة في القوالب


3. قوالب خفيفة ودات خصائص متطورة


4. مجهزان بالعديد من الإضافات المميزة


5. القوالب تدعم اغلب المتصفحات المستعملة


6. كلاهما يحتوي على قائمة تابثة مميزة


7. أزرار المشاركة والإعجاب في أمكنة متعددة من كلا القالبين

والمزيد اترككم تكتشفونه بأنفسكم

لتحميل القوالب تفضلوا هنا:

النسخة الاولى

النسخة التانية

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

اسم الموضوع :قالب بلوجر Lycoris النسخة الأولى والتانية قسم : قوالب بلوجر المصدر : عين العرب

خاصية الرجوع لأعلى الصفحة لمدونات بلوجر بشكلين

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

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

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

ساتركك تكتشف تأثير كل واحد بنفسك

لتركيب خاصية الصعود لأعلى الصفحة قم بعمل الخطوات التالية :

أولا إضافة مكتبة الخطوط المميزة وستفيدك في أشياء اخرى إن شاء الله

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>  

ضعها فوق وسم </head>

تانيا قم بنسخ الكود التالي :

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
} 

ثم ضعه فوق وسم ]]></b:skin>

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

الشكل الاول

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
 $(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
 </script> 

الشكل التاني

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
 $(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
 </script> 

بعد ان تختار الشكل ضعه مباشرة فوق وسم </body>

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

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

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

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

توجد ثلاثة أشكال للإضافة يمكنك ان تختار الشكل الذي تريد ويناسب مدونتك

الشكل الاول:

الشكل التاني:

الشكل الثالث:

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

1. شكل مميز وجداب والوان جميلة


2. مؤقت لكم تبقى للصلاة القادمة كي تجهز نفسك للذهب للمسجد


3. ما إن يحين وقت الآدان حتى تسمع المؤدن يؤدن للصلاة حتى لو غفلت عن الوقت يتم تذكيرك

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

بعد ذالك إتبع الشرح الموجود في الصورة التالية :

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

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

بلوجر:قالب بلوجر مميز وخفيف التصفح

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

صورة من القالب :

كما ترون في الصورة القالب مميز ويحتوي على :

1. قائمة جانبية تابثة بأقسام المدونة وشعار المدونة فوق


2. قائمة في الأعلى هي الأخرى تابثة


3. أزرار إبداء الإعجاب في القائمة العلوية


4. فوتر بقائمتين عريضتين لوضع الإضافات الكبييرة الحجم


5. مواضيع دات صلة أسفل الموضوع

حان الآن وقت التحميل

ما يجب تغييره في القالب هو الأسماء التي في القوائم فقط لا غير :

<li class='item101'><a class='item' href='#'><i class='fa fa-link fa-1x'/> مواقع مفيدة</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-heart fa-1x'/> عالم الأدسنس</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-cog fa-1x'/> شروحات بلوجر</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-picture-o fa-1x'/> قوالب بلوجر معربة</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-magic fa-1x'/> إضافات بلوجر معربة</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-desktop fa-1x'/> كل ما يخص الكمبيوتر</a></li>

<li class='item101'><a class='item' href='#'><i class='fa fa-money fa-1x'/> طرق الربح من الانترنت</a></li>

وأيضا تغيير :

<li><a href='/'>الرئيسية</a></li>

<li><a href='/'>تابثة</a></li>

<li><a href='/'>تابثة</a></li>

<li><a href='/'>تابثة</a></li>

<li><a href='/'>تابثة</a></li>

<li><a href='/'>تابثة</a></li>

<li><a href='/'>تابثة</a></li>

غيره الأسماء بما يناسب مع وضع رابط يخص كل اسم

هذا كل شيئ اتمنى ان يعجبكم القالب واتمنى عدم عدف حقوق التعريب كي لا تقع لك مشاكل في القالب ^_^ بالتوفيق للجميع

اسم الموضوع :قالب بلوجر مميز وخفيف التصفح قسم : قوالب بلوجر المصدر : عين العرب

أخبر زوارك ما تريد بهذه الإضافة المميزة

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

أخبر زوارك ما تريد بهذه الإضافة المميزة

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

هذه الإضافة أفضل حل لفعل ذالك وإخبار زوارك بما تريد من مميزات الإضافة :

-ضاهرة وتابثة للزائر لكنها غير مزعجة ^_^

-شكل أنيق وألوان هادئة

-كتابة متحركة لشد إنتباه الزائر لقرائة ما كتبت

ماذا تريد أكثر من هذا وتركيبها سهل للغاية فقط إتبع الخطوات التالية :

أدخل للتخطيط ثم أظف أداة HTML/JavaScript ثم ضع فيه الكود التالي :

<style type="text/css">div.notice-banner{_position:absolute;position:fixed;text-align:center;z-index:99000}div.notice-banner-inner{-moz-transform:rotate(-45deg);-moz-transform-origin:50% 0;-ms-transform:rotate(-45deg);-ms-transform-origin:50% 0;-o-transform:rotate(-45deg);-o-transform-origin:50% 0;-webkit-transform:rotate(-45deg);-webkit-transform-origin:50% 0;_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;color:#fff;font-family:'trebuchet ms',verdana,arial,sans-serif;font-size:16px;height:30px;left:-190px;opacity:0.9;padding:10px;text-align:center;top:110px;transform:rotate(-45deg);transform-origin:50% 0;width:600px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;}.notice-banner-text{-moz-border-radius:8px;-webkit-border-radius:8px;background-color:#fff;border:1px solid #aaa;border-radius:8px;height:28px;margin-right:15px;padding-left:10px;padding-right:10px;width:290px}</style><div class="notice-banner notice-banner-inner"><center><div class='notice-banner-text'><marquee onmouseover="this.stop();" onmouseout="this.start();" style="line-height:28px;color:#000;">أكتب رسالتك هنا</marquee></div></center></div>

ما يمكن تغييره في الكود واضخ وهو الرسالة التي تريد إضهارها في الإضافة

يمكنك كتابة أي رسالة ويمكن للرسالة ان تحتوي على رابط موقع او موضوع المهم غيره بما يناسبك

هذا كل شيئ اتمنى ان تعجبكم الاداة لا تنسوا مشاركة الموضوع وشكرا

بلوجر:قالب بلوجر خفيف وأنيق مع سلايد شو مميز ذاتي التشغيل

قالب بلوجر خفيف وأنيق مع سلايد شو مميز ذاتي التشغيل لا داعي لتعديل صور السلايد شو فهو يشتغل بشكل تلقائي والقالب خفيف

القالب يصلح لعدة مجالات ويتميز بطريقة عرض مميزة للمواضيع

من مميزات القالب :

• قالب خفيف وأنيق


• سلايد شو ذاتي التشغيل


• فوتر بأبع اماكن لوضع ما شئت من الإضافات


• سيدبار يضهر فقط عند الدخول للموضوع

نأتي الآن للمعاينة والتحميل

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

الدعم الفني

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

اسم الموضوع :قالب بلوجر خفيف وأنيق مع سلايد شو مميز ذاتي التشغيل قسم : قوالب بلوجر المصدر : عين العرب

6 خطوط جديدة مميزة لمدونات بلوجر

اسم الموضوع :6 خطوط جديدة مميزة لمدونات بلوجر قسم : إضافات بلوجر المصدر : عين العرب

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

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

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

لتركيب الخطوط كل ما عليك فعله هو التالي :

أولا قم بتحرير قالب مدونتك وابحث عن الوسم التالي <head>

ثم أسفله ضع كود الخط الذي تريد من بين الخطوط التالية :

<link href='http://ift.tt/1kbO7jf' rel='stylesheet' type='text/css'/>

<link href='http://ift.tt/1dDCP20' rel='stylesheet' type='text/css'/>

<link href='http://ift.tt/1ljRqZg' rel='stylesheet' type='text/css'/>

<link href='http://ift.tt/1kbO8DV' rel='stylesheet' type='text/css'/>

<link href='http://ift.tt/1ljRpUV' rel='stylesheet' type='text/css'/>

<link href='http://ift.tt/1ljRpEH' rel='stylesheet' type='text/css'/>

تانيا بعد ان أضفت الخط الذي قمت باختياره عليك الآن بتغيير اسماء الخطوط المستعملة في القالب باسم الخط الجديد الذي قمت بإضافته وأسماء الخطوط المقترحة هي كالتالي :

'Amiri'

'Droid Arabic Kufi'

'Droid Arabic Naskh'

'Lateef', serif;

'Scheherazade'

'Thabit'

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

ولفعل ذالك بشكل أسرع أنصح باستعمال برنامج Notepad فهو مميز ويوفر عليك عناء البحث الطويل فقط قم بنسخ كود القالب بالكامل ثم ضعه في برنامج Notepad ثم إضغط على Ctrl+F لكي تفتح لك نافذة البحث انت إختر خيار Remplacer أنظر للصورة الموضحة

إضغط على الصورة لتكبيرها

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

يمكنك تحميل البرنامج من هنــــــــــــــــــــــــــــــــــــــــا

بالنسبة لطريقة معرفة الخط المستعمل في المدونة لكي تبحث عنه فقط ابحث عن كلمة font أو font-family واي خط تجد امامه فهو الخط المستعمل في مدونتك وقد تجد عدة خطوط المهم أكثرها شيوعا هي Arial-Tahoma-Oswald-Georgia

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

إضافة أزرار التصويت المميزة أسفل المواضيع

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

إخواني الكرام كيف حالكم اتمنى ان تكونوا بألف خير

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

والآن حان وقت شرح الطريقة فقط إتبع معي الخطوات التالية :

أولا قم بالدخول للموقع التالي هنـــــــــــــــــــــــــــــــــا

بعد ذلك قم بملأ البيانات بما يجب كما في الصورة التالية :

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

بعدها إنزل مباشرة إلى Settings ستجد الأشكال المتوفرة فهناك عشرات الأشكال تذكر إسم الشكل الذي تريد بعدها إنزل حتى تصل إلى Like Button code generator حيث سيتم تجهيز الإضافة مع إتاحة ومنع بعض الخصائص لكنك لن تغير إلا في القليل منها كما في الصورة التالية :

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

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

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

لضهور الإضافة فوق المواضيع ضعها فوق الوسم <data:post.body/> بعد إيجاده ولضهورها أسفل المواضيع ضعها أسفله

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

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

بالنسبة للإختيارات المعلمة بـ1 و 2

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

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

قم بالضغط على Verify لكي يضهر لك كما في الصورة التالية :

كما في الصورة اولا عليك إختيار HTML meta tag بعدها قم بنسخ الكود المعلم باللون الاحمر ثم ضعه في قالبك أسفل وسم <head> ثم قم بالحفظ وآخر خطوة هي ان تضغط على Verify وهكذا تكون قد إنتهيت من تجهيز الإضافة بالكامل

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

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

طريقة فتح الروابط الخارجية في نافذة جديدة

اسم الموضوع :طريقة فتح الروابط الخارجية في نافذة جديدة قسم : إضافات بلوجر المصدر : عين العرب

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

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

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

لتطبيق هذه الطريقة على مدونتك قم بتحرير القالب ثم إبحث عن الوسم التالي </body>

ثم فوقه ضع الكود التالي

<script src='http://ift.tt/uyExtg' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

jQuery('a').each(function() {

// Let's make external links open in a new window.

var href = jQuery(this).attr('href');

if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {

jQuery(this).attr("target", "_blank");

}

});

//]]>

</script>

إن رأيت انه لم يشتغل فقط ازل هذا الجزء

<script src='http://ift.tt/uyExtg' type='text/javascript'/>

وهو الخاص بمكتبة الجيكويري وتكراره يؤتر على الإضافات التي تشتغل به

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

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

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

إضافات ترفيهية لمحبي الحيوانات الأليفة

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

إخواني الكرام كيف حالكم أتمنى ان تكونوا بألف خير

في هذا الموضوع سنطرح لكم إضافات ترفيهية لمحبي الحيوانات الأليفة ^_^

صورة من بعض الإضافات

كل هذه الإضافات مجموعة في موضع واحد وهو التالي :

هنــــــــــــــــــــــــــــــــــــــــــا

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

ثم ضعه في اداة جديدة وتكون إنهيت من إضافة الهامستر لمددونتك ولا تنسى إطعامه ^_^

أتمنى ان تروقكم هذه الإضافات الترفيهية نلتقي في موضوع آخر بإذن الله إلى ذالك الحين

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

آخر المواضيع بشكل متحرك وجداب إضافة جديدة

اسم الموضوع :آخر المواضيع بشكل متحرك وجداب إضافة جديدة قسم : إضافات بلوجر المصدر : عين العرب

كيف الحال إخواني الكرام اليوم إن شاء الله سيتم طرح إضافة مميزة

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

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

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

كل ما عليك هو إضافة أداة جديدة ثم ضع في الكود التالي :

<style>

.gfg-root {

width: 100%;

height : auto;

position : relative;

overflow : hidden;

margin: 0 auto;

text-align : center;

font-size: 12px;

border: 1px solid #DBDBDB;

}

.gfg-title {

font-size: 16px;

font-weight : bold;

color : #6B6B6B;

background:#F3F3F3;

background-repeat: repeat;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

padding: 5px;

text-shadow: 0px 2px #fff;

}

.gfg-entry {

background-color: #FFFFFF;

width : 100%;

height : 9.2em;

position : relative;

overflow : hidden;

text-align : right;

margin-top : 3px;

}

.gf-title a {

text-transform: capitalize;

color: #0000ff;

font-size: 14px;

}

.gfg-subtitle {

display: none;

}

.gfg-list {

position : relative;

overflow : hidden;

text-align : right;

}

.gfg-listentry {

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

padding-left : 15px;

padding-right : 5px;

}

.gfg-listentry-odd {

background-color : #F3F3F3;

border-bottom : 1px dotted #CCCCCC;

padding: 5px;

}

.gfg-listentry-even {

background-color : #F3F3F3;

border-bottom : 1px dotted #CCCCCC;

padding: 5px;

}

.gfg-listentry-odd a{

color: #595959;

padding: 0 0px 0 10px;

}

.gfg-listentry-even a{

color: #242424;

padding: 0 0px 0 10px;

}

.gfg-listentry-highlight {

background: #FFFFFF;

}

.gfg-listentry-highlight:before {

position: absolute;

left: 0;

content: '\25BA ';

font-size: 14px;

color: #DBDBDB;

}

.gfg-listentry-highlight a {

color: #242424;

}

.gfg-root .gfg-entry .gf-result {

position : relative;

background-color: #ffffff;

width : auto;

height : 100%;

padding-right: 20px;

padding-left: 5px;

}

.gfg-root .gfg-entry .gf-result .gf-title {

font-size: 14px;

line-height : 1.2em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

margin-bottom : 2px;

margin-top: 5px;

}

.gfg-root .gfg-entry .gf-result .gf-snippet {

height : 3.8em;

color: #000000;

margin-top : 3px;

}

.clearFloat {

clear : both;}</style>

<script src="http://ift.tt/zYvreR" type="text/javascript"></script><script src="http://ift.tt/1shOv2d" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {var feeds = [{title:'List',url:'http://ift.tt/1iGesY5'},];

new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'آخر المواضيع', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");

google.setOnLoadCallback(showGadget);

</script>

<div id="feedGadget">تحميل</div>

بعد ان وضعت الكود قم بتغيير رابط مدونتي برابط مدونتك لكي تظهر آهر مواضيع مدونتك

هذا كل ما يخص هذه الإضافة اتمنى ان تعجبكم

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

ركن الدعم الفني

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

بلوجر:قالب JPstation البني المطور متوافق مع الجوال

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

اليوم أقدم لكم قالب JPstation المشهور لكن بنكهة بنية جميلة وتكوير مميز

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

صورة من القالب

للآسف لا توجد معاينة حية فقد كترث المدونات في حسابي ^_^

المهم الصورة كافية وبعد تركيبه سترى بنفسك سرعة القالب ومميزاته الرائعة

يمكنك التاكد بنفسك من توافق القالب مع مختلف أحجام الشاشات والهواتف عن طريق هذا الموقع

http://ift.tt/1bFiOM9

القالب ميال بعض الشيئ للمدونات الدينية بلونه البني والخلفية الإسلامية لقلة القوالب الإسلامية

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

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

اسم الموضوع :قالب JPstation البني المطور متوافق مع الجوال قسم : قوالب بلوجر المصدر : عين العرب

أظف أداة مواقيت الصلاة إلى مدونتك

اسم الموضوع :أظف أداة مواقيت الصلاة إلى مدونتك قسم : إضافات بلوجر المصدر : عين العرب

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

اليوم إن شاء الله سأضع لكم إضافة مميزة خاصة بمواقيت الصلاة لكي تضعها في مدونتك

الإظافة جمية ومميزة وانصح الجميع بتركيبها لانها دات فائدة كبيرة ^_^

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

لتركيب هذه الإضافة المميزة أدخل للموقع التالي :

هنــــــــــــــــــــــــــــــــــــــــا

ثم اتبع الخطوات التالية

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

طريقة وضع إعلانات بجانبي المدونة

اسم الموضوع :طريقة وضع إعلانات بجانبي المدونة قسم : إضافات بلوجر المصدر : عين العرب

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

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

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

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

<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>

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

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

صندوق الاكواد الإحترافي المطور

اسم الموضوع :صندوق الاكواد الإحترافي المطور قسم : إضافات بلوجر المصدر : عين العرب

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

وهو يتميز بسهولة إستخدامه وبشكله المميز وسهولة التعديل عليه

صورة من صندوق الاكواد

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

كل ما عليك فعله هو البحث في القالب عن الوسم التالي ]]></b:skin>

ثم فوقه ضع هذا الكود

.post blockquote{margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://ift.tt/1h2ALb1) no-repeat top center; font: bold 1em GESSTwoMediumRegular, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border: 5px dotted #127793;}

.post blockquote { max-height:200px; overflow: scroll }

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

الموجود في شريط المحرر ثم قم بالحفظ وسيضهر الكود في صندوق الأكواد

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

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

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

إداة إتصل بنا بشكل جديد منبثق من الأسفل

اسم الموضوع :إداة إتصل بنا بشكل جديد منبثق من الأسفل قسم : إضافات بلوجر المصدر : عين العرب

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

اليوم أتيكم اليوم بشكل جديد لأداة إتصل بنا منبثقة من الاسفل بشكل جميل

صورة من الشكل

هذا هو شكلها بعد الضغط على زر إتصل بنا وهكذا سيكون من الشهل للزوار التواصل معك بسرعة

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

ضعها في السيدبار او الفوتر

ثم بعد ذالك إبحث عن الوسم التالي ]]></b:skin>

ثم فوقه ضع هذا الكود

#ContactForm1 {display:none}

هذا الاخير لإخفاء اداة إتصل بنا من مدونتك لكنها تبقى موجودة فقط لا تضهر

بعد ذالك ياتي دور تركيب الشكل الجديد

كل اللي عليك هو إضافة أداة جديدة ثم ضع فيها هذا الكود

<style>

#form-evolutions { position:fixed; bottom: 0; left:20px; float:right; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #2A3E4C; padding:10px; display:none; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://ift.tt/1jnEBJE)no-repeat 10px center; color:#999; border:1px solid #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://ift.tt/1jnEBZS)no-repeat 10px center; color:#999; border:1px solid #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://ift.tt/1jnEzkX)no-repeat 10px 10px; color:#999; border:1px solid #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#2A3E4C; text-shadow: 1px 0 0 #999; border:1px solid #2A3E4C; } #ContactForm1_contact-form-submit:hover { background:#2A3E4C; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:38px; width:302px; background-image:url('http://ift.tt/1hP0UoH'); display:block; cursor:pointer; margin:auto; }

</style>

<script src="http://ift.tt/Qvgno7" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }

</script>

<div id="form-evolutions">

<div id="contact-faceblog">

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="الإسم" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="بريدك الإلكتروني" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="أرسل" />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<div id="contactbutton"></div>

</div>

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

لو حبيت مثلا تغيير مكانها فغير في الكود التالي

{ position:fixed; bottom: 0; left:20px; float:right; }

فوق=top

تحت=bottom

يمين=right

يسار=left

هذه اهم تعديلات ثم يمكنك تغيير الألوان فقط غير كون اللون بكود لون آخر

هذا كل شيئ اتمنى ان يعجبكم الشكل الجديد للإضافة

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

إضافة صرف العملات لمدونات بلوجر

اسم الموضوع :إضافة صرف العملات لمدونات بلوجر قسم : إضافات بلوجر المصدر : عين العرب

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

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

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

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

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

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

<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://ift.tt/1isIlK9" type="text/javascript"></script></div>

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

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

بلوجر:قالب عين العرب التقني والمميز

إخواني الكرام كيف حالكم أتمنى ان تكونوا بالف خير

اليوم إن شاء الله ساقدم لكم قالب تقني مميز يتميز بعدة خصائص فريدة وجديدة

من مميزات القالب :

-قالب متوافق مع الأجهزة الدكية

-قالب دو عرض على Gallery

-اماكن جاهزة لوضع الإعلانات

-خاصية lightbox لبعض الإضافات مثل إضافة الفيس بوك وجوجل + وأيضا لأداة إتصل بنا في الأسفل

صورة من القالب

مثال حي للقالب من هنــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــا

للحميل من هنـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــا

القالب من تعريبي فاتمنى منكم إحترام تعبي في التعريب وعدم حذف حقوق التعريب

وهكذا تشجعوننا لتقديم الجديد والأفضل دائما وشكرا

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

أو أي مشكل يواجهك ضعه هنا للعمل على حله معا

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

اسم الموضوع :قالب عين العرب التقني والمميز قسم : قوالب بلوجر المصدر : عين العرب

أداة إتصل بنا في صفحة مستقلة بشكل إحترافي

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

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

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

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

أولا صورة من الشكل الذي ستكون عليه الاداة في النهاية

شكل مميز وإحترافي وساشتغل به شخصيا ;) والآن سأشرح لكم طريقة إضافته لمدونتك وايضا وضعه في صفحة مستقلة أفضل من وضعه في السيدبار

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

ثم قي بتحرير قالب مدونتك وابحث عن الوسم التالي ]]></b:skin>

ثم فوقه ضع هذا الكود

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width:600px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#cccccc;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');

background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

box-shadow: 1px 1px 5px #ccc;

}

#contact_wrap h3{

color: #e8f3f9;

font-family:tahoma;

font-size: 20px;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding-left: 35px;

padding-right:35px;

padding-top: 12px;

padding-bottom: 12px;

text-align: center;

text-shadow: 2px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #333 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #333;

}

#ContactForm1_contact-form-name{

width:550px;

height:auto;font-family:tahoma, sans-serif;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(http://ift.tt/1jnEBJE)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width:550px;

height:auto;font-family:tahoma, sans-serif;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(http://ift.tt/1jnEBZS)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width:550px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:tahoma, sans-serif;

background: #f6f6f6 url(http://ift.tt/1gg4dIK)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

color: #FFF;

padding: 0;font-family:tahoma, sans-serif;text-align:center;

cursor:pointer;

margin: 25px 0 10px 0 0;

background-color:#005a8a;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#4c9bc9;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

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

الآن إنتهينا من تجهيز الشكل الجديد لأداة إتصل بنا حان وقت إضافتها لصفحة مستقلة

قم بإضافة صفحة مستقلة ثم غير المحرر من تأليف إلى HTML

وضع هذا الكود

<div dir="rtl" style="text-align: right;" trbidi="on">

<div id="contact_wrap">

<h3>

إتصل بنا</h3>

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="الإسم" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الإلكتروني" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="أرسل" />

<br />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<style type="text/css">

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

</style></div>

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

هذا كل شيئ اتمنى أن يعجبكم الشكل الجديد لاداة إتصل بنا

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