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

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

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

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

أول خطوه هي التوجه إلى المدونة المقصودة, بعدها نضغط على المظهر لدخول إلى صفحة قالب المدونة تم نضغط على "تحرير HTML"
Action-Backup-Template-bloggre

ستفتح لناء صفحة الاكواد الخاصة في القالب, الآن نحدد على الكل باستخدام "Ctrl + A" تم ننسخ الاكواد باستخدام "Ctrl + C".
Action-Backup-Template-bloggre

ألان نتوجه إلى جهاز الكمبيوتر تم نعمل على إنشاء مستند نصي.
Action-Backup-Template-bloggre

نفتح المستند النصي تم نلصق الاكود باستخدام "Ctrl + V" ونحفظ الملف, في بعض الأحيان يتم إرسال خطا اضغط على موافق.
Action-Backup-Template-bloggre

نكون هنا قد قمنا بحفظ القالب بشكل كامل مع أدوات التخطيط, في حالة كنت تريد استرجاع القالب وأدوات التخطيط تقم بفتح المستند النصي وتحديد جميع الاكواد باستخدام " Ctrl + A " تم ننسخها باستخدام " Ctrl + C" تم نتوجه إلى المدونة المظهر تم نضغط تحرير " تحرير HTML " ونقوم بتحديد جميع الاكواد باستخدام " Ctrl + A " ونمسحها ونلصق أكود المستند النصي بدلها باستخدام " Ctrl + V " تم نقوم بحفظ القالب, ومبروك عليك استعادة القالب.
Action-Backup-Template-bloggre

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

نسخ احتياطية لقالب بلوجر (الطريقة الافتراضية)

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

1- نتوجه إلى المدونة تم نضغط على المظهر من ألقائمه الجانبية سيتم فتح لوحة التحكم القالب نضغط على " نسخ احتياطي / استعادة " ألموجودة في الأعلى على اليمين.
Action-Backup-Template-bloggre

2- ألان نضغط على " تنزيل المظهر" لعمل نسخه احتياطية سيتم تنزيل نسخه إلى جهاز الكمبيوتر الخاص بك.
Action-Backup-Template-bloggre

3- طريقة استعادة القالب بعد عمل نسخه احتياطية وحفظها في جهاز الكمبيوتر الخاص بك نضغط على " نسخ احتياطي / استعادة " تم نضغط على "اختيار ملفّ"مثل ما في الصوره سيتم فتح نافدة قم بتحديد ملف القالب وضغط "موافق" تم اضغط على "تحميل" مثل ما في الصوره , في حالة ظهر لك صندوق التحقق يجب التحقق من انك لست روبوت قبل الضغط على "تحميل" . 

Action-Backup-Template-bloggre

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

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

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

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

شرح تركيب أزرار المشاركة في مواقع التواصل الاجتماعي. 

في البداية يجب تضمين خط الإيقونات خط font-awesome, وأيضاً تضمين الجي كويري jquery  تأكد من وجودهم في مدونتك, أد كان غير موجودين أضفهم, تابع الخطوات التالية.
أفضل طريقة لمعرفة وجود خط الإيقونات وملف الجي كويري هو تركيب الإضافة وتجربتها على مدونتك أد لم تشتغل قم بإضافتهم.

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

1- نبحث عن  class='post-footer ستجدها مكرره أختار الثانية تم أضف الكود التالي فوقها.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #3cf;
}
.social-btns .btn.twitter .fa {
  color: #3cf;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.link:before {
  background-color: #0073b2;
}
.social-btns .btn.link .fa {
  color: #0073b2;
}
.social-btns .btn.whats:before {
  background-color: #53d54d;
}
.social-btns .btn.whats .fa {
  color: #53d54d;
}
.social-btns .btn.skype:before {
  background-color: #00aff0;
}
.social-btns .btn.skype .fa {
  color: #00aff0;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
    background: #c5c5c5;
    height: 50px;
    padding: 24px 0px;
    margin: 20px auto;
    font-size: 0;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.social-btns .btn {
    display: inline-block;
    background-color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 28%;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
    opacity: 0.99;
}
.social-btns .btn:before {
  content: &#39;&#39;;
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 38px;
  vertical-align: middle;
}

</style>
<script>
//<![CDATA[
$(".social-btns .wa_btn").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>
<div class='social-btns'><a class='btn facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank'><i class='fa fa-facebook'/></a>
<a class='btn twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-twitter'/></a>
<a class='btn google' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target='_blank'><i class='fa fa-google'/></a>
<a class='btn link' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:blog.url' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='wa_btn wa_btn_m btn whats'  expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url'><i class='fa fa-whatsapp'/></a>
</div>

</b:if>

ألان قم بحفظ القالب وجرب الإضافة, في حالة لم تشتغل الإضافة, يجب عليك تضمين خط الإيقونات وسكربت الجي كويري تابع الخطوات التالية:
نبحث عن </head> ونضع الروابط التالية فوقها.
<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
 <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet prefetch'/>


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

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

Add-Contact-us-blogger

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

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


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

شرح التركيب 

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

استخراج كود أي بي المدونة

في البداية يجب استخراج كود ID الخاص بالمدونة حتى يتم استقبال الرسائل منها, لاستخراج الكود نتوجه إلى التخطيط تم في الأعلى في الرابط الموجود في شريط المتصفح  ID=4371357773824486577# احتفظ بالكود الذي بلون الأحمر سنستخدمه في الخطوة التالية.
Add-Contact-us-blogger

تركيب نموذج اتصل بناء في صفحة مستقلة في بلوجر 

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

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

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

<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/>
<script>
var blogId = '4371357773824486577';
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='جاري الارسال...';
var contactFormMessageSentMsg = 'تم ارسال رسالتك بنجاح.';
var contactFormMessageNotSentMsg = 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.';
var contactFormEmptyMessageMsg ='صندوق الرسالة لا يمكن أن يكون فارغا.';
var contactFormInvalidEmailMsg = 'ادخل بريد إلكتروني صحيح.'

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>

<style type="text/css">
.login-body{
    direction: rtl;
    background: #f93c64;
    display: -webkit-box;
    margin: 10px;
    border-radius: 5px;
font-family: Droid Arabic Kufi;

 }
.login-01{
  width:85%;
  margin:5% auto 3%;
}
form {
   padding: 0% 1%;
}
form li.first,li.second{
  border:none;
  list-style:none;
  margin-bottom:10px;
  width:100%;
}
.icon,.icon2  {
  height:55px;
  width:55px;
vertical-align: top;
  display: -webkit-inline-box;
  border-top-right-radius: 0.3em;
  -o-border-top-right-radius: 0.3em;
  -moz-border-top-right-radius: 0.3em;
  -webkit-border-top-right-radius: 0.3em;
  border-border-bottom-right-radius: 0.3em;
  -o-border-bottom-right-radius: 0.3em;
  -moz-border-bottom-right-radius: 0.3em;
  -webkit-border-bottom-right-radius: 0.3em;
}
.user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #f79d29;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #f79d29;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #f79d29;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #DB2048;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #DB2048;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #DB2048;
}
/*-----*/
input[type="text"],form textarea {
    width: 77%;
    padding: 1.13em 1em 1.13em 1em;
    color: #858282;
    font-size: 17px;
    outline: none;
    height: 16.2px;
    background: #fff;
    font-weight: 500;
    border: none;
    font-family: inherit;
    border-top-left-radius: 0.3em;
    -o-border-top-left-radius: 0.3em;
    -moz-border-top-left-radius: 0.3em;
    -webkit-border-top-left-radius: 0.3em;
    border-border-bottom-left-radius: 0.3em;
    -o-border-bottom-left-radius: 0.3em;
    -moz-border-bottom-left-radius: 0.3em;
    -webkit-border-bottom-left-radius: 0.3em;
  }
  .button{

  }
form textarea {
  resize: none;
  height: 140px;
}
.login-01 input[type="button"]{
  font-size: 17px;
  font-weight: 300;
  color: #fff;
    font-family: inherit;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
  width: 25%;
  border: 2px solid #F79D29;
  float: left;
  background: #F79D29;
  border-radius: 0.3em;
  -o-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  margin-right:2.85em;
}
input[type="button"]:hover{
-webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
}
li.lost {
  margin-bottom: 21px;
}
/*---------------*/
.copy-right {
  text-align: center;
  margin: 2em 0;
}
.copy-right p {
 color: #fff;
 font-size: 1em;
 font-weight:400;
}
.copy-right p a {
 color:#fff;
}
.copy-right p a:hover {
 text-decoration: underline;
}
.login-body .contact-form-email-message{
    height: 106px;
}
.login-body .contact-form-error-message-with-border{
    background: #c73352;
}
.login-body .contact-form-success-message{
    background: #c73352;
}
.login-body .contact-form-error-message-with-border,.all-emil contact-form-success-message{
    color: #fff;
    padding: 3px 0px;
    border-radius: 4px;
    margin: 10px 0 0 0;
    clear: both;
}
.login-body .contact-form-error-message-with-border img,.all-emil contact-form-success-message img{
cursor: pointer;
    float: right;
    padding: 0px 3px 0px 0;
}
/*-----start-responsive-design------*/
@media (max-width:1440px){
  .login-01 input[type="button"]{
  margin-right:1.85em;
  }

}
@media (max-width:1366px){
  .login-01 input[type="button"]{
  margin-right: 1.6em;
  }
   
}
@media (max-width:1280px){
   .login-01 {
    width: 40%;
    margin:5% auto 5%;
  }
  body h1 {
  font-size: 2.7em;
}

}
@media (max-width:1024px){
  .login-01 {
  width: 45%;
}
 body h1 {
  font-size: 2.5em;
}

}
@media (max-width:768px){
  .login-01 {
  width: 63%;
}
 body h1 {
  font-size: 2.3em;
}
}
@media (max-width:640px){
  .login-01 {
  width: 73%;
  }
  body h1 {
  font-size: 2.1em;
}
}
@media (max-width:480px){
   .login-01 {
    width: 85%;
 }
  .copy-right p {
    font-size: 0.9em;
  }
input[type="text"], form textarea{
 height: 14.2px;
}
form textarea {
    height: 140px;
}
   input[type="text"], form textarea {
  width: 77%;
  padding: 1em 1em 1em 1em;

  }
  .icon, .icon2 {
  height: 48px;
  width: 48px;
  }
  .user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 12px #f79d29;
      background-size: 45%;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #f79d29;
    background-size: 45%;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #f79d29;
    background-size: 45%;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 9px #DB2048;
      background-size: 45%;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #DB2048;
   background-size: 45%;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #DB2048;
   background-size: 45%;
}
form li.first, li.second {
  margin-bottom: 5px;
  }

}
@media (max-width:600px){
.login-01 {
    width: 100%;
}
}
input[type="text"], form textarea {
    width: 65%;
}

  }


</style>
 <div class="login-body">

 <div class="login-01">
   <form name="contact-form">
    <ul>
    <li class="first">
     <a class=" icon user1"></a><input id="ContactForm1_contact-form-name" type="text"  name="name" class="text" value="" placeholder="الأسم">
     <div class="clear"></div>
    </li>
    <li class="first">
     <a  class=" icon email"></a><input id="ContactForm1_contact-form-email" type="text" name="email" class="text"  value="" placeholder="البريد الالكتروني">
     <div class="clear"></div>
    </li>
    <li class="second">
    <a class=" icon msg"></a><textarea id="ContactForm1_contact-form-email-message" value="Message" placeholder="محتوى الرسالة" name="email-message" ></textarea>
    <div class="clear"></div>
    </li>
   </ul>
   <input id="ContactForm1_contact-form-submit" type="button" onclick="sendEmailMsg()" value="إرسال">
   <div class="clear"></div>

<div style="max-width: 450px; text-align: center; width: 100%;margin: 3px auto;">
<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>
</div>
  </form>
  </div>
<div style="visibility: collapse; opacity: 0;" ><a href='https://abduallah0.blogspot.com/'>مدونة عبدالله منقوش</a></div>
</div>


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

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

نتمناء منكم أيضاً تشجيعنا بتعليق, ولو صادفتك مشكله ضعها أيضاً في تعليق وسنقوم بحلها إن شاء الله.

دمج تعليقات جوجل بلس وتعليقات بلوجر

Added-by-Google-Plus-Plus-with-Blogger

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

ما أهمية لأضافه وكيف تستفيد منها:


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



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

ادهب الى المظهر تحريرHTML وابحث عن <b:include data='post' name='post'/> ضع الكود التالي تحته/ اسفله:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*بداية لتحويل العكسي*/
#gplus-comments-visibility {display:block;}
#comments{display:none;}
/*نهاية لتحويل العكسي*/


 .comments-icons {
    height: 50px;
    direction: rtl;
 }

.show-hide-comments{
width: 48%;
    float: right;
    display: block;
    margin: 0 0.1%;
    background: #cc3333;
    padding: 7px 0;
}
.show-hide-comments-b{
    width: 49%;
    float: left;
    display: block;
    margin: 0 0.1%;
    background: #f58220;
    padding: 7px 0;
}
  .comments-icons a span{
    font-size: 20px;
    color: #fff;
    margin: 0px 5px;
    line-height: 32px;
    font-family: cursive;
}
  .comments-icons a:hover{
    text-decoration: none;
    background: #444;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
 .comments-icons a img {vertical-align: middle;float: left;padding: 0px 10px;}</style>
<div class='comments-icons'>
<a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><span>تعليقات جوجل بلس</span><img class='gplus-icon' height='35' src='http://1.bp.blogspot.com/-i1zpfechOuY/VI763hqxlHI/AAAAAAAAAvs/dz4sWUQW-xU/s1600/google-plus-logo.png' width='35'/></a><a class='show-hide-comments-b' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><span>تعليقات بلوجر</span><img class='blogger-icon' height='35' src='http://3.bp.blogspot.com/-4N-YlJvoxdA/VI763udxlHI/AAAAAAAAAvw/0dY2Ys0zz2k/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>       
</b:if>

الان اضغط حفظ وقم بتجربة الاضافه اد لم تشتغل اضف الكود التالي فوق </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

طريقة التعديل

لتغير الظهور وجعل ظهور تعليقات البلوجر اولاً بدل جوجل بلاس ابحث عن لتحويل العكسي وستجد الاكواد بهذه الشكل

/*بداية لتحويل العكسي*/
#gplus-comments-visibility {display:block;}
#comments{display:none;}
/*نهاية لتحويل العكسي*/
قم بتحويل block الى none وقم بتحويل none الى block 

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

تفعيل وصف البحث العلامات الوصفية في بلوجر وحل المشاكل

Activate-the-description-of-the-blogger-search
قد تكلمنا سابقاً عن علامات الميتا تاج وتكلمنا انه ضرورية لمدونة بلوجر وعلمنا أنها تستخدم من قبل محرك البحث وإنها تعمل على تصدير مواضيع المدونة, جميع المدونات المتميزة تقريباً تعمل على تفعيل علامات الميتا تاج، التي تقع في رأس المدونة وهي غير مرئية من قبل زوار المدونة, وهي عبارة عن أوصاف يتم وضع فيه معلومات عن الصفحة مثل اسم الكاتب، التاريخ، الكلمة ألمفتحيه، وصف، العنوان، وأمور أخرى, ولقد تكلمنا عنها في موضوع شرح و اضافة علامات الميتا تاج.

ومع ذلك، نحن في هده الموضوع سنذكر واحداً لم نذكره من قبل وهي العلامات الوصفية في بلوجر المعروف بوصف البحث.

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

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


1- يمكنك من أضافه وصف واضح ودقيق عن الموضوع.
2- يزيد من فرص الحصول على المزيد من النقرات و الزيارات مدونتك.
3- يعمل على تصحيح أخطاء وصف البحث في نتائج البحت ومواقع التواصل الاجتماعي عن طريق استبدال الوصف التلقائي للموضوع بل وصف التي تم كتابته من قبلك.
4- كسب تقة محرك البحث وقد يزداد سرعة أرشفة مواضيع المدونة.


شرح تفعيل وصف البحث

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

Activate-the-description-of-the-blogger-search
اضغط على نعم او yes تم نكتب وصف قصير عن المدونة وانقر على "حفظ التغييرات  "


شرح استخدام وصف البحث

بعد كتابة الموضوع اضغط على "وصف البحث" الموجود في القائمة الجانبية على اليسار وبعد دالك اكتب الوصف التي تريده بدقه ووضوح
Activate-the-description-of-the-blogger-search
إلى هنا نكون قد انتهينا ومن الأفضل اختبار وصف البحث ما إذا كان يعمل أو لا من خلال الضغط على زر المؤس الايمن والظغط على فحص العنصر ستفتح لك صفحة فيها اكواد ابحث عن <meta content ستجد احدها تحتوي ما قمت بكتابته في وصف البحث اثنا كتابة الموضوع اد لم تجدها تابع طريقة اصلاحها
 انتقل إلى قالب> تحرير HTML وتضاف بعد/اسفل  <head> التعليمة البرمجية التالية:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

ملاحظات هامه

1-عليك الاهتمام بكتابة وصف متناسق وجميل ويحمل كلمات دلالية ولا تكتب كلمات دلالية بدون تنسيق واهتمام او كلمات ليس له علافه بل موضوع مثل على وصف مضر للمدونة
العاب,تحميل العاب,جديد العاب,العاب تلبيس,العاب مغمرات,العاب سيارات...الخ.

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

2-عليك الاهتمام بكتابة وصف لا يقل عن (35) كلمه.

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

تغيير شكل التعليقات إلى شكل احترافية في بلوجر

Change-the-form-of-comments-to-a-professional-form-in-Blogger

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

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

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

1-الذهاب الى القالب تحرير HTML
2- قم بالبحت عن ]]></b:skin>
3- ضع الكود التالي فوقه /اعلى 

/*----------- التعاليق ----------*/
#comments {
background-color: #fff;
padding-top: 20px;
width: 98%;
}
.comments .continue a {
background: #0d86cc;
text-align: center;
padding: 10px 0;
display: none;
}
.comments .continue a {
line-height: 30px;
margin: 0;
padding: 20px 0 14px 10px;
font-size: 18px!important;
text-transform: uppercase;
font-weight: 400!important;
color: #444;
}
.comments .user a {
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
padding-right: 15px;
}
#comments .avatar-image-container img {
border: 1px solid #ddd;
margin: -1px -1px;
}
.comment-thread {
color: #111;
}
.comment-thread a {
color: #777;
}
.comment-thread ol {
margin: 0 0 20px;
}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a {
color: #000;
}
.comments .avatar-image-container {
overflow: visible;
}
.comments .avatar-image-container,.comments .avatar-image-container img {
width: 48px;
max-width: 40px;
height: 40px;
max-height: 48px;
background: #FFF;
float: right;
border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 10px 0 0;
}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-right: 60px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
background: #F6F6F6;
background-color: #F6F6F6;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 4px;
border-top: 5px solid #f34246;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 452px;
margin-right: 15px;
}
#comments h4 {
padding-bottom: 5px;
color: #3f3f3f;
font-size: 25px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 10px;
margin-top: 0px;
}
.comments .comments-content .comment {
width: 100%;
line-height: 1em;
font-size: 13px;
margin: 15px 0 0;
padding: 0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
color: #444;
}
.thread-chrome.thread-expanded .comment-content {
width: 435px;
line-height: 22px;
overflow: hidden;
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .datetime {
cursor: pointer;
float: left;
padding-top: 6px;
padding-left: 20px;
}
.comment-actions {
background: #f34246;
padding: 8px;
margin-right: 435px;
border-left: 0px;
border-bottom: 0px;
float: left;
margin-top: -20px;
}
.comment-actions a {
color: #fff;
gont-weight: bold;
text-decoration: none;
}
.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
background-image: url(http://3.bp.blogspot.com/-oXtMYI4_PL4/UbCYKeISeSI/AAAAAAAABWk/Zx8WKou8CkU/s1600/Verificon.png);
}
.icon.user {
background: url(http://4.bp.blogspot.com/-IWb4aHUGy9Y/UbCY5Le708I/AAAAAAAABWs/7quaLpItlhM/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .comment-replies {
margin-top: 0;
}
.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}
.comments .comment-thread.inline-thread {
padding-right: 0px;
}
.comments .comment-thread.inline-thread .comment {
width: auto;
}
.comments .comment-thread.inline-thread .comment:after {
content: "";
position: absolute;
top: 10px;
right: -20px;
border-top: 1px solid #d2d2d2;
width: 10px;
height: 0;
}
.comments .comment-thread.inline-thread .comment .comment-block {
border: 0;
background: transparent;
padding: 0;
}
.comments .comment-thread.inline-thread .comment-block {
margin-right: 48px;
}
.comments .comment-thread.inline-thread .user a {
font-size: 13px;
margin: 0px;
padding: 0px;
}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img {
width: 36px;
max-width: 36px;
height: 36px;
border: 0px;
max-height: 36px;
margin-right: 5px;
}
.comments .continue {
border-top: 0;
width: 100%;
}
#comment-editor {
width: 98%!important;
}
.comment-form {
width: 100%;
max-width: 100%;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}

4- اضغط حفط

طريقة التعديل

تغير اللون الأحمر لشريط ولون زر رد ابحث عن #f34246 
هناك أتنين واحد لتغير لون الشريط و التأني لتغير لون زر رد

إضافة بنرات التبادل الإعلاني بمقاس 125 على 125

The-addition-of-advertising-exchange-banners-of-125-to-125
نقدم لكم أضافه من أهم الإضافات إضافة بنرات التبادل الإعلاني بمقاس 125 على 125, الإضافة جميله جداً تمكنك من عمل تبادل إعلاني مع مدونات أخر عن طريق بنر ومن خلال البنر يمكنك وضع بنر متحرك او تابت, الإضافة مهم لا تحتاج إلى شرح تابع معي طريقة أضافتها وطريقة التعديل عليها.




طريقة التركيب والتعديل


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

الأول : اذهب إلى  التخطيط
الثاني : إضافة أداة  HTML / JavaScri    
الثالث : ضع الكود التالي:

<div align="center">
<table style="margin: 0 auto;" bgcolor="#fff" border="0" cellpadding="2" cellspacing="6" width="250">
<tbody>
<tr>
 <td><center><a href="رابط" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="http://4.bp.blogspot.com/-jlr4qSfvx8M/VLPMweISMfI/AAAAAAAABLs/65zoyh93cHk/s1600/tt.gif" border="0" height="125" width="125" /></a></center></td>
 <td><center><a href="رابط" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="http://4.bp.blogspot.com/-jlr4qSfvx8M/VLPMweISMfI/AAAAAAAABLs/65zoyh93cHk/s1600/tt.gif" border="0" height="125" width="125" /></a></center></td> </tr>
 <tr> <td><center><a href="رابط" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="http://4.bp.blogspot.com/-jlr4qSfvx8M/VLPMweISMfI/AAAAAAAABLs/65zoyh93cHk/s1600/tt.gif" border="0" height="125" width="125" /></a></center></td>
 <td><center><a href="رابط" rel="nofollow" target="_blank"><img alt="AD DESCRIPTION" src="http://4.bp.blogspot.com/-jlr4qSfvx8M/VLPMweISMfI/AAAAAAAABLs/65zoyh93cHk/s1600/tt.gif" border="0" height="125" width="125" /></a></center></td>
 </tr> 
</tbody>
</table>
 </div>



طريقة التعديل

غير ما في ألون الازرق إلى رابط البنر
وغير ما في ألون الأحمر إلى رابط المدونة 

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

الاسم

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

رسالة *