حل مشكله الصوت الرسائل الصوتية في ماسنجر فيسبوك

كيفية إنشاء وضبط صفحة اتصل بنا على مدونة blogger يعتبر أهم شيئ من بين عناصر المدونة لكونها وسيلة الاتصال بين مدير المدونه والقراء أو أى جهه أخرى فالذي لا يجب على المدون التغاضي عنه هي معلومات الإتصال ، فهي تلعب دوراً هاماً في خلق إتصال بين مدير المدونة والقراء، فهم يمثلون دوراً هاما من خلال تصفحهم لمواضيع المدونه فى اكتشاف الأخطاء او طرح افكار واسئله من صميم اختصاص المدونه والذي بدوره يساعدك على التحسين والإرتقاء بموقعك والكتابه فيما يطلبه الزوار عبر التواصل معهم، فيجب ان يكون هناك إحتكاك بين المدون والزوار حتى يعلم حاجتهم وينتفع من نقدهم، كما أنها تفتح باب من الأفكار والتي تساعدك على الإبتكار وخلق مواضيع جديدة ،ويكون موقعك دائما في أوائل نتائج البحث.
 جوجل لم تغفل عن أمر هام كهذا، لذلك قامت بتوفير أداة نموذج الإتصال بنا حيث يمكن إضافتها في الشريط الجانبي للمدونة Sidebar أو على الفوتر Footer وهي متاحة في صفحة التخطيط من لوحة التحكم في بلوجر.
لكن معظم المدونين لا يرغبون بتلك الأداة ذات التصميم الرديئ فهناك من يرغب بالتعديل عليها لتتوافق مع تصميم موقعه وذلك بإضافة بعض أكواد CSS، والغالبيه يرغبون في صفحة منفردة  وذات تصميم مميزوهو الأصح والأفضل وهو ما سنشرحه في هذا الموضوع وهو شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر بطرق مختلفه.
سأتطرق فى هذا الشرح المدعوم بالصور فى وضع نموذج اتصل بنا أو Contact Us لمدونات بلوجر بأكثر من كود ،وكذلك استخدام احد المواقع ممن تقوم بتقديم هذه الخدمه مجانا.

أولا :صفحة اتصل بنا احترافية باللغة العربية

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

ثم

ثم

2- قم بتحميل كود CSS التالى:-
اكواد CSS
ثم قم بفتح قالب مدونتك وعن طريق البحث داخل القالب عبر الامر Ctrl+F ابحث عن الوسم التالى :

]]></b:skin>

ثم فوقه مباشرة ضع كود CSS الذى قمت بتحميله سابقا  كما بالصوره التاليه :

ثم اضغط على حفظ
3- بعد ذلك ستقوم بإنشاء صفحه جديده من خلال الصفحات ثم انشاء صفحه جديده

ثم قم بتسمية الصفحه contact us أو اتصل بنا ،ثم حول الصفحه الى خانة HTML واحذف الاكواد التى تظهر لك والصق احد الأكواد التاليه :-
تحميل الكود الأول
تحميل الكود الثانى
تحميل الكود الثالث
ويتم كما بالصوره التاليه :

ثم ستكون النتيجه كالتالى لأحدهما :-

وهكذا لأى كود .

ثانيا :صفحة اتصل بنا احترافية باللغة الإنجليزيه

1- قم بتفعيل أداة الاتصال كماشرحنا فى البند1 بالأعلى .
2- من خلال البحث فى القالب قم بالبحث عن الوسم الاتى :

]]></b:skin>

اعلاه ضع الكود التالى :

div#ContactForm1 { 
display: none !important; 
}

كما بالصوره التاليه :

وفائدة هذا الكود اخفاء أداة الاتصال التى فعلناها فى بلوجر من الظهور بالقالب.
3- قم بإنشاء صفحه جديده وقم بتسميتها contact us ،ثم حول الصفحه الى خانة HTML واحذف الاكواد التى تظهر لك والصق الكود التالى بها :

Code to add:<!-- Contact Form Code -->
<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}

</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>

<!-- End Contact Form Code -->

ثم حفظ ونشر
نموذج آخر

1.  قم بتفعيل خاصية اداة الاتصال - اذا كنت لم تفعلها من قبل - وذلك من التخطيط بلوحة تحكم مدونتك كما ذكرنا سابقا .
2. قم بحذف أى اكواد CSS قمت بوضعها داخل القالب وكذلك صفحة اتصل بنا وذلك لكى تضع النموذج الجديد.

3- اذا كنت قد وضعت كود اخفاء أداة الاتصال من واجهة المدونه - كما ذكرنا فى فى البند 2 سابقا - فلاتضع كود الاخفاء التالى ،واذا كنت لم تفعل فضع الكود التالى بعد أعلا الوسم

</head>

ثم احفظ القالب.

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

4- انشىء صفحه جديده وضع فيها الكود التالى :

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

وهذا نموذج آخر تستطيع تحميله من الرابط التالى ويتم وضعه كما شرحنا وهو باللغة الانجليزيه
  تحميل نموذج آخر

ثالثا:انشاء صفحة اتصل بنا عبر موقع JotForm مجانا

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

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

تعديل المقال