اضافة نموذج اتصل بنا في صفحة منفصلة في بلوجر

اضافة نموذج اتصال "اتصل بنا" على بلوجر في صفحة منفصلة

السلام عليكم

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

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

لوحة تحكم بلوجر

1- الدخول على صفحات

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

2- انشاء صفحة جديدة

انشاء صفحة جديدة على بلوجر

3- قم باختيار وضعية HTML

اختيار وضعية HTML عند انشاء صفحة بلوجر

4- قم بلصق الكود التالي:

<script>
var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

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

الرقم التعريفي لمدونة بلوجر (ID)

6- قم بنشر الصفحة

نشر صفحة على بلوجر

انتهى

اضافة اطار برواز الصور في بلوجر

اضافة اطار للصور في مدونة بلوجر

طريقة اضافة اطار للصور في مواضيع المدونة الخاصة بك على بلوجر كالتالي:

1- قم بالدخول على لوحة التحكم الخاصة بمدونتك
2- قالب
3- تحرير HTML
4- ابحث عن الكود التالي:

]]></b:skin>

5- الصق الكود التالي فوقه مباشرة:

/*--Mybloggersworld.com--*/
.post img
{
     border:1px solid #e3e3e3;
     border-radius:10px;
     padding: 10px;
}

6- قم بحفظ القالب

*ملاحظة:
- لتغيير حجم خط الاطار قم بتغيير 1px إلى الحجم الذي ترغبه
- قم بتغيير solid إلى  dotted ليكون خط الاطار نقاط هكذا ...... و dashed ليكون خط الاطار هكذا ------
- قم بتغيير كود لون الاطار e3e3e3 إلى اي كود آخر باللون الذي تريد
- قم بحذف السطر الذي يحتوي border-radius اذا كنت لا ترغب بالمسافة البيضاء التي بين الصور والاطار، لكي يكون الاطار ملاصقا للصورة مباشرة.


انتهى

اضافة اعلانات جوجل ادسنس داخل مواضيع بلوجر للموبايل والجوال

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

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

اختيار نمط (ستايل) ادنسينس المناسب لقالب مدونتك على بلوجر

قم بتسجيل الدخول  إلى صفحة ادسنس، وثم: إعلاناتي > وحدة اعلانية جديدة ، كالتالي:

الآن قم باختيار اي اسم لهذا الإعلان، وثم حدد حجم الإعلان (انا افضل "حجم تلقائي متجاوبة") خصوصا للموبايل

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

طريقة اختيار (انشاء) نمط ألوان وحدة اعلانية في جوجل ادسنس

الآن، قم بالضغط على الحفظ والحصول على الشفرة:

ستفتح لك نافذة تحتوي على الكود، قم بنسخ الكود ومن ثم قم بالدخول على هذا الموقع:
اضغط هنا
بعد الدخول على الموقع، قم بلصق الكود داخل المربع الموجود، وقم بالضغط على Convert Ad Code

وقم بنسخ الكود الجديد.

الآن قم بوضع الكود في المكان الموضح هنا:

<br>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='toppostadmobile ' style='text-align:center;'>
ضع الكود الخاص بأدسنس الذي قمنا بإنشاء في الخطوة السابقة هنا
 </div>
</b:if>
 </br>

الآن قم بلصق هذا الكود داخل المفكرة او برنامج ثاني لكي نستخدمه في الخطوات التالية.

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

***ملاحظة: يجب عليك اختيار قالب الجوال واختيار مخصص كالتالي:

طريقة اختيار قالب مخصص للجوال في بلوجر

اضافة اعلانات جوجل ادسنس داخل الموضوع أسفل العنوان (الجوال/الموبايل):

1- قم بالدخول على لوحة تحكم بلوجر
2- اضغط على "قالب"
3- ثم تحرير HTML
4- قم بالضغط في اي مكان داخل مربع الكود الخاص بمدونتك وثم قم بالضغط على Ctrl + F وذلك لعمل بحث داخل الأكواد.
5- قم بالبحث عن هذا الكود:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

6- اضف تحته مباشرة، الكود الذي قمنا بإنشاءه مؤخرا. كالتالي:

اضافة اعلانات جوجل ادسنس داخل مواضيع بلوجر للموبايل والجوال

7- قم بحفظ النموذج

اضافة اعلانات جوجل ادسنس داخل الموضوع في آخر الموضوع (الجوال/الموبايل):

1- قم بالدخول على بلوجر
2- اضغط على "قالب"
3- ثم تحرير HTML
4- قم بالضغط في اي مكان داخل مربع الكود الخاص بمدونتك وثم قم بالضغط على Ctrl + F وذلك لعمل بحث داخل الأكواد.
5- قم بالبحث عن هذا الكود:

<div class='post-footer-line post-footer-line-1'>

6- اضف تحته مباشرة، الكود الذي قمنا بإنشاءه مؤخرا. كالتالي:

اضافة اعلانات جوجل ادسنس داخل مواضيع بلوجر للموبايل والجوال

7- قم بحفظ النموذج


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

اضافة زر مشاركة واتساب على بلوجر

اضافة زر مشاركة واتساب على بلوجر

بما أن آخر احصائية (بداية 2015) لعدد المستخدمين الفعالين في تطبيق واتس اب وصل إلى 700 مليون مشترك. فإن ذلك يُعد فرصة رائعة لمدوني بلوجر. وهذه الفرصة تتحقق بإضافة زر مشاركة تحت كل مواضيع المدونة. والميزة في هذا الزر انه لن يظهر إلا لمستخدمي الأجهزة الذكية (نظام ios ونظام android). وبهذا سوف تتيح لقراء مدونتك أن يشاركوا أي موضوع يعجبهم عن طريق الواتسب الخاص بهم بضغطة زر واحدة.

لقد قرأت الكثير من المواضيع التي تشرح طريقة اضافة زر (ايقونة) مشاركة الموضوع على واتس اب، ولكن للأسف لم يعمل أي منها عندما اردت اضافته لمدونتي.

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

اضافة ايقونة مشاركة واتساب على بلوجر

أولا: قم بتسجيل اكاونت لدى موقع: AddThis

رابط التسجيل المباشر: اضغط هنا

ثانيا: الآن وقد قمت بتسجيل اكاونت جديد، لنبدأ باختيار الكود المناسب لنا

بعد تسجيل الدخول قم بالدخول على Tools (الأدوات) كما في الصورة

شرح اضافة زر مشاركة واتس اب

ومن ثم قم بالدخول على Share (مشاركة) كما هو موضح:

شرح اضافة زر مشاركة واتس اب

الآن قم باختيار ازرار المشاركة التي في الصورة التالية: Sharing Buttons

الآن ستفتح لك صفحة، قم باتباع التعليمات التالية:

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


الآن تنزل إلى اسفل الصفحة لتجد بوكسين يحتويان على الأكواد المطلوبة:

لقد شارفنا على الإنتهاء.

الآن كل ما عليك هو ان تقوم بالدخول على مدونة بلوجر الخاصة بك
قالب > تحرير HTML

وتقوم بالحث عن الكود:

</body>

وتلصق الكود الأول في الصورة قبله كما هو موضح:

الآن الخطوة المهمة. يجب ان تقوم بلصق الكود الثاني كما هو موضح (ارجو التركيز جيدا)

قم بالبحث عن هذا الكود:

<div class='post-footer-line post-footer-line-2'>

وقم بلصق الكود في البوكس الثاني في نفس المكان الموضح في الصورة التالية:

لمشاهدة Demo اضغط هنا (من جهازك الجوال) لان هذه اليقونة لن تظهر الا على اجهزة الموبايل.
قم بالدخول عىل الرابط من جهازك الجوال، وانزل إلى اخر الموضوع، لتشاهد ايقونة مشاركة واتس اب.


انتهى

ولأي استفسار أو مشكلة، لا تتردد في بالتعليق والسؤال.