السبت، 23 مارس 2019

حل مشكلة صور المواضيع عند نشرها على فيس بوك

حل مشكلة صور المواضيع عند نشرها على فيس بوك

حل مشكلة صور المواضيع عند نشرها على فيس بوك - يحدث هذا عند فشل محرك بحث الفيسبوك أخذ البيانات من الصفحة الحالية من موضوع مدونة بلوجر التي تم نشرها او مشاركتها على الفيسبوك وهذا أمر مزعج جدا لأنه احيانا تظهر الصور بقياس 90x90 بيكسل . لذلك درسنا اليوم على مدون محترف هو حل مشكلة صور المواضيع التي نقوم بنشرها او مشاركتها على فيس بوك و ذلك يتم بإضافة اكواد ميتا تاج الخاصة بالفيسبوك 


الشرح 



  1. اذهب إلى لوحة تحكم المدونة
  2. انقر على قالب
  3. الان انقر على تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه
<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='Description' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='CODE-App' property='fb:app_id'/>
<meta content='CODE-Admin' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>


الان قم بالبحث عن الوسم <body> و اضف الكود التالي تحته
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'CODE-App',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

التعديلات :


قم بإستبدال كلمة Description بوصف المدونة
قم بإستبدال كلمة CODE-App بـ اي دي التطبيق الخاص بالصفحة ستجدها مكررة مرتين
قم بإستبدال كلمة CODE-Admin بـ اي دي صفحتك الشخصية عن طريق اداة معرفة ID حسابات الفيس بوك

نصائح :


تأكد من الصور الخاصة بك التي تم تحميلها إلى المواضيع ان تكون أبعادها [ الطول و العرض ] لا تقل عن 600 × 315 بكسل، وإذا كانن أقل فإن الفيسبوك سيقوم بتغيير حجم الصور إلى 90x90 بكسل. فمن الأفضل استخدام صورة ذات أبعاد 1200 × 630 بكسل، 800 × 420 بكسل، و 600 × 315 بكسل.

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


قالب Sky Blog معرب

قالب Sky Blog معرب هو قالب بتصميم جميل و احترافي و يصلح للمدونات الاخبارية و المجلات كما إنه متوافق بنسبة 100% مع العديد من الاجهزة و هو سهل الإستعمال

قالب Sky Blog معرب - هو قالب بتصميم جميل و احترافي و يصلح للمدونات الاخبارية و المجلات كما إنه متوافق بنسبة 100% مع العديد من الاجهزة و هو سهل الإستعمال بحيث مصمم بطريقة احترافية ليناسب جميع الاذواق كما ان الوانه هادئة يمكنك معاينة و تحميل القالب عبر الازرار التالية



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


  1. يدعم جميع المتصفحات [ IE8+,Mozilla,Chrome,Safari ]
  2. صديق للسيو و محركات البحث
  3. اماكن للإعلانات جاهزة
  4. صندوق تعريف الكاتب
  5. سلايدر شو احترافي
  6. نظام تعليقات بلوجر
  7. مواضيع ذات صلة
  8. سريع في التصفح
  9. ازرار المشاركة
  10. متجاوب
       و المزيد ....


يوجد مع ملف التحميل ملف شرح التعديل على القالب اي سؤال او استفسار لا تترد بوضعه في تعليق 

الجمعة، 22 مارس 2019

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

اضافة صندوق الفيسبوك المنبثق بطريقة احترافية لجعل الزوار يعجبون بصفحتك على فيس بوك

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


شرح تركيب الإضافة


هنا يا صديقي تحتاج إلى اضافة الكود التالي في أداة
من لوحة تحكم المدونة > تخطيط > انقر على إضافة أداة HTML/JavaScript > ثم نسخ الكود التالي و لصقه بالادة ثم اضغط على حفظ

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;right:0;z-index:99999;}
#fb-boxclose {width:100%;height:100%;}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;right:37%;border-radius:3px;}
#fb-closebox {float:left;cursor:pointer;position:absolute;left:-1px;top:-2px;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/mudwnp&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

اهم الإعدادات


استبدل https://www.facebook.com/blog بعنوان صفحتك على فيس بوك
لإظهار الصندوق في كل مرة يتم فتح المدونة احذف هذا الكود$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
لضبط الوقت و تأخير ظهور الصندوق المنبثق استبدل هذه.delay(3000)

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

قالب New Minima Colored Redesign معرب و مطور

قالب New Minima Colored Redesign معرب و مطور - متوافق مع جميع الشاشات و الاجهزة سيو مدعم و يعد من افضل قوالب بلوجر

قالب New Minima Colored Redesign معرب و مطور - يعد من اسرع قوالب بلوجر و هو مثل قالب New Minima Colored معرب و لكنه اسرع لأنه تم حذف بعض الميزات من هذا القالب حتى يتم تحميل الصفحات بشكل اسرع و يمتاز القالب بتجاوبه مع جميع الشاشات و الوانه الهادئة يمكنك تحميل و معاينة القالب عبر الازرار التالية.



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

  1. متوافق مع جميع الشاشات
  2. إعلانات ادسنس متجاوبة
  3. أداة اختبار جوجل مدعم
  4. نظام تعليقات بلوجر
  5. مواضيع ذات صلة
  6. محرك بحث متطور
  7. ازرار المشاركة
  8. سهم الصعود إلى اعلى
  9. نموذج اتصل بنا
  10. التصميم عامودين
  11. تصميم فلات
  12. سيو مدعم 
  13. صندوق الإشتراك بالبريد الإلكتروني
        و المزيد

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

ما هو البيج اثورتي و لماذا هو افضل من البيج رانك

ما هو البيج اثورتي و لماذا هو افضل من البيج رانك

ما هو البيج اثورتي


الاعمال التجارية عبر الإنترنت و التسويق يعتمد بالحصول على الأدوات المناسبة و تنفيذ الخطوات المناسبة في محرك البحث الأمثل. و واحد من اعظم الطرق للتحقق من تقدم موقعك في نتائج البحث من خلال معرفة البيج اثورتي - Page Authority.


- البيج اثورتي Page Authority هو عبارة عن مصطلح يستخدم لوصف سيو Seo من احتمال أن صفحة معينة من موقعك او مدونتك سيتم العثور عليها في محرك البحث. و يستند البيج اثورتي على مقياس لوغاريتمي من 0-100 و يتعامل مع اهمية المعلومات و الروابط مع بعضها البعض داخل صفحات الموقع او المدونة. كلما كان البيج اثورتي الخاص بك عالي كلما كانت فرص ظهور موقعك في محركات البحث افضل, و هنا سوف يتم وضع صفحتك في الصفحة الاولى في اعلى نتائج البحث في جوجل.


كيف يمكنني تحسين البيج اثورتي؟


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


المحتوى الجديد و الكلمات الرئيسية


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


و قد قال احد خبراء سيو Seo في وقت سابق, إن المحتوى هو الآساس و الملك. و إن محركات البحث تميل إلى المواقع ذات المحتوى الجديد و الجيد و التي تكون على الشكل التالي :

- جديدة و مثيرة للاهتمام
- يتم تحديثها باستمرار
- سهلة و ممتعة للقراءة
- ذات صلة و مفيدة
- المواقع ذات التخصص الواحد



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


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


يتم تحديثها باستمرار: هنا نقصد انه يجب ان يتم تحديث و كتابة المواضيع كل فترة من الوقت و هنا يمكننا عمل جدول خاص بنا لكتابة المواضيع مثلا كل يومين موضوع او كل 3 ايام موضوع ... إلخ و ليس نكتب اليوم موضوع و بعد 3 اسابيع موضوع او نكتب 5 مواضيع في نفس اليوم هذا كله خاطيء لذلك يجب عليك تخصيص جدول منظم و تحدد عدد المواضيع التي سوف تكتبها في الاسبوع  ;( .


سهلة و ممتعة للقراءة: هنا قصدنا في حشو الكلمات الرئيسية الخاصة بنا عند كتابة لمقال جديد لا يجب علينا حشو الكلمات الرئيسية مثل لنفترض في مقالنا تكلمنا على قوالب بلوجر يجب ان تكون المقدمة او الملخص مفيد و مفهوم من السهل قرائته و ليس عبارة عن كلمات غير مفهومة مثل لنفترض هذا ملخص " قالب New Minima Colored معرب يعد من افضل قوالب بلوجر لوجود الكثير من مميزات قوالب بلوجر 2015 و في مدون محترف نقدم افضل قوالب بلوجر " هذا ما قصدنا بحشو الكلمات و هو تكرار الكلمة داخل الفقرة اكثر من مرة و هذا كله خاطيء و قد تعاقب من جوجل يمكن تكرار الكلمة المستهدفة ولكن في اكثر من فقرة.


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


وصلات او راوبط إلى صفحات موقعك


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

الصور


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


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

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

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

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


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

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

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


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

  1. نتوجه إلى لوحة تحكم بلوجر
  2. ننقر على قالب
  3. ثم ننقر على تحرير HTML
تحديث : إن لم يعمل النموذج لا تقم بمسح الاكواد في هذه الخطوة

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



نبحث عن الوسم </head> و اضف الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>



ايضاابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:right;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e3e3e3;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-right:5px;}

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

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

و اخيرا انتقل إلى وضع HTML و قم بوضع الكود التالي

اضافة نموذج اتصال مدون محترف الاحترافي في صفحة ثابتة
<form name="contact-form">
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-user"></i> الإسم </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-bars"></i> الرسالة <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br />
<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>
<br />
<style type="text/css">
#comments,#sidebar-wrapper,.banner,.banner2 {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;}
.post-inner {padding:15px 0;}
.post-body {margin:0 auto;width:70%;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
form i.fa.fa-user,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;}
form i.fa.fa-user {background:#7986cb;color:#fff;}
form i.fa.fa-envelope {background:#ffa726;color:#fff;}
form i.fa.fa-bars {background:#00897b;color:#fff;}
</style>

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

اضافة زر الصعود إلى أعلى على شكل صاروخ

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

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




شرح تركيب الزر


  1. ادخل على لوحة تحكم المدونة
  2. انتقل إلى تبويب القالب
  3. انقر على تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}


الخطوة الثانية ابحث عن الوسم </body> و اضف الكود التالي فوقه
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

الان قم بحفظ القالب و مبروك عليك الإضافة اي سؤال او استفسار لا تترد بوضع في تعليق
و لا تنسى دعمنا عبر ازرار المشاركة بنشرك للموضوع.


نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *