تعرف على اهم اكواد جديدة الخاصة بمنصة بلوجر 2020

تعرف على اهم اكواد جديدة الخاصة بمنصة بلوجر 2020

 اكواد الخاصة بمنصة بلوجر الجديد 2020 - اكواد التحكم في عرض و اخفاء أداة معينة على صفحة معينة هذه اكواد تستخدم لعرض أو عدم ظهوره في صفحة معينة. على سبيل المثال ، في الصفحة الرئيسية او صفحة البحث او ارشيف الخ، نريد عرض الشريط الجانبي "sidebar" ولكن عندما يفتح الزائر صفحة المقالة ، لا يتم عرض الشريط الجانبي. حسنًا ، لتعيين الشريط الجانبي يظهر ولا يظهر عليك استخدام اكواد بلوجر يطلق عليها باللغة انجليزية "Blogger Conditional".
اكواد  جديد الخاصة بمنصة بلوجر الجديد 2020

و تتمثل اهمية هذه الاكواد انها تحسن من سرعة تحميل المدونة الخاص بنا. حيث هناك بعض اضافات نريد عرضها على صفحات معية فقط وهذا يتطلب هذه الاكواد الخاص بمنصة بلوجر.
اضافة عرض المزيد ( infinte scroll ) لمدونات بلوجر

اضافة عرض المزيد ( infinte scroll ) لمدونات بلوجر

مرحبا بكم مجددا في تدوينة جديدة حول خاصية جديدة، بصراحة هذه الاضافة حصرية  وتنال اعجاب كل من شاهذها، فهي تجعل الزائر يتصفح تدويناتك بكل سهولة وسريعة مقارنة بترقيم صفحات. في مايلي طريقة اضافة عرض المزيد ( Load More ) لمدونات بلوجر، هذه اضافة ستجعل المشاركات تحمل بشكل تلقائي و بضغطة زر، بدون اعادة تحميل الصفحة مرة تانية.


إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2

إضافة صندوق دردشة واتساب لمدونات بلوجر اصدار 2

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

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

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

اولا التوجه إلي بلوجر > المظهر  > تعديل HTML
اضف كود CSS التالي مباشرة فوق الوسم  ]]></b:skin> أو </style>

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;right:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

بالنسبة إلى HTML ، يمكنك وضعه في التخطيط> إضافة أداة > HTML / Javascript ، في الواقع يمكن وضعه في أي مكان ، إذا قمت بتحرير HTML ، فيمكنك وضعه أعلى رمز Javascript في الخطوة التالية.

<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>مرحباً</h3>
<p>انقر فوق أحد ممثلينا أدناه للدردشة عبر تطبيق WhatsApp أو مراسلتنا على البريد الإلكتروني علي user@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>الدعم</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>20281977094280</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>المبيعات</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>20222222222</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>أتصل بنا علي <b>202123456789</b> من <i>0:00 إلي 24:00</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>مرحبا! ماذا يمكنني أن أفعل لك؟
</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='اكتب ردا' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>إرسال</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>كيف أستطيع مساعدتك؟</a>

الكود المميز باللون الأحمر هو الرمز الذي يجب تغييره وفقًا لبيانات الاتصال.
بالنسبة لأرقام whatsapp ، لا تستخدم علامة الجمع + ، رموز البلد فقط مثل 20.

ضع Javascript أسفل اليمين أعلى الكود </body>

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.imintweb.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

قم بحفظ القالب
يرجى ملاحظة أن خط هذه الأداة سوف يتبع تلقائيا الخط الافتراضي للقالب الذي تستخدمه. تأكد من تثبيت الخطوط الخاصة وأيضًا مكاتب CSS الخارجية مثل Awesome Fonts وأيضًا jQuery.
إذا لم تكن قد استخدمت Font Awesome أو jQuery ، فيمكنك إضافة الروابط التالية أعلى الوسم. </head> عادةً ما يستخدم أحدث إصدار من القالب Font Awesome (Icons) و jQuery.

إضافة سكريبت جدول المحتويات تلقائيا لمدونة بلوجر

إضافة سكريبت جدول المحتويات تلقائيا لمدونة بلوجر

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

إضافة سكريب جدول المحتويات تلقائيا لمدونة بلوجر

مميزات  جدول المحتويات مدونة بلوجر

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

سكربت عداد فيروس كورونا على مدونات بلوجر

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

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

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

اضافة صندوق اشتراك في القائمة البريدية

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

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

معاينة صندوق اشتراك في القائمة البريدية 


اضافة < صندوق اشتراك في القائمة بريدية >  :

1. افتح لوحة تحكم بلوجر ثم حدد المدونة التي تريد تركيب عليها الاضافة. اذا كنت تملك اكثر من واحدة.
2. اختر من القائمة الجانبية >> المضهر >> ثم تعديل HTML.
4. ابحث باستعمال "ctrl+f" على وسم </head>
<style type='text/css'>
/* Subscribe Box */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:&#39;&#39;;position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}.rainbow::after{content:&#39;&#39;;position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}.subscribe-wrapper p{margin:0;font-size:14px}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}.subscribe-css-button:hover{background:#34495e}
</style>
5. الان قم بحفط المظهر . ثم توجه الى التخطيط من خلال القائمة الجانبية للوحة تحكم بلوجر.

6. ثم اختر اضافة >> إضافة أداة >> حدد HTML/JavaScript ثم اضف الكود التالي في الصندوق.
<div class="container">
<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>اشتراك في قائمة البريدية</h2>
<p>كن من اعضاء و اصدقاء الموقع لتتوصل بكل الجديد عبر البريد الكتروني الخاص بك.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=tharabic' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
  <input name="uri" type="hidden" value="tharabic" ></input>
<input name="loc" type="hidden" value="en_US" ></input>
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="اكتب البريد الكتروني الخاص بك..."></input>
<input class="subscribe-css-button" title="" type="submit" value="اشتراك" ></input>
</form>
</div>
</div></div></div>
</div>
الان غير tharabic  بالاسم الموقع الخاص بك على feedburner. اذا لم تحصل عليه قم بزيارة الموقع التالي وانشئ اسم خاص بك : https://feedburner.google.com/fb/a/myfeeds
الان بعد التعديل قم بحفظ و مبروك عليك و اذا واجهة اي مشكلة في التركيب يمكنك طرحها في التعليقات وانا ساكون سعيد بمساعدتك و الى درس اخر. مع السلامة.
اضافة دردشة الواتساب لمدونات بلوجر

اضافة دردشة الواتساب لمدونات بلوجر

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

اضافة دردشة الواتشاب لمدونات بلوجر

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

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

1. توجه الى لوحة تحكم بلوجر
2. حدد المدونة اذا كانت لذيك اكتر من واحدة.
3.توجه الى التخطيط
4. حدد مكان للاضافة ثم انقر على إضافة أداة
5. اختر اذاة HTML/JavaScript
6. ثم قم بنسخ الكود التالي مع تغيير الروابط في الصندوق وقم بحفظ.
<style>
/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#00e676,#00e676);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'tajawal',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{width:19%;color:#555;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:20px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
</style>
<div class='hide' id='whatsapp-chat'>
<div class='header-chat'>
<div class='head-home'><h3>مرحبا !</h3>
<p>انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى pro.arabic.net@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'/><div id='get-nama'/></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>مساعدة</span>
<span class='chat-nama'>خدمة العملاء 1</span>
</div><span class='my-number'>+212617935191</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>مساعدة</span>
<span class='chat-nama'>خدمة العملاء 2</span>
</div><span class='my-number'>+212617935191</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>اتصل بي من خلال الرقم  <b>+212617935191</b> متاح <i>12:00hs الى 00:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>مرحبا ! كيف اساعدك &#1567;</span></div>
<div class='blanter-msg'><textarea id='chat-input' maxlength='120' placeholder='اكتب رسالتك هنا' row='1'/>
<a href='javascript:void;' id='send-it'>ارسال</a></div></div>
<div id='get-number'/><a class='close-chat' href='javascript:void'>&#215;</a>
</div>
  <a class='blantershow-chat' href='javascript:void' title='غرفة دردشة'><i class='fa fa-whatsapp'/>كيف اساعدك &#1567;</a>

الان قم بالتوجه الى القالب ثم تعديل HTML و اضف الكود التالي فوق </body> :

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.tharabic.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

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

  • غير الرقم +212617935191 بالرقم الخاص بك.
  • غير 12:00hs الى 00:00 حسب رغبتك و الوقت الدي تريد الاجابة عن الاسئلة 
إضافة تابعونا على مواقع التواصل الاجتماعي لمدونة بلوجر

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

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

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

الاضافة تتكون من جزئيين الجزاء الأول هو ملف CSS هو ملف تنسيق الاضافة بحيث يحتوي على تنسيق الألوان وترتيب الشكل.

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

1. توجه الى لوحة تحكم بلوجر 
2. حدد المدونة اذا كانت لذيك اكتر من واحدة.
3.توجه الى التخطيط 
4. حدد مكان للاضافة ثم انقر على إضافة أداة
5. اختر اذاة HTML/JavaScript
6. اكتب عنوان مناسب للاضافة . ( مثال تابعونا على مواقع تواصل اجتماعي )
7. ثم قم بنسخ الكود التالي مع تغيير الروابط في الصندوق وقم بحفظ.

<div class='social-to'>
<ul>
<li class='facebook'><a href='رابط الفيس بوك'><span class='social-name'><i class='fa fa-facebook'></i></span><span class='social-count'>+ 86 ألف</span><span class='social-type'>متابع</span></a></li>
<li class='twitter'><a href='رابط تويتر'><span class='social-name'><i class='fa fa-twitter'></i></span><span class='social-count'>+1.5k</span><span class='social-type'>متابع</span></a></li>
<li class='rss'><a href='رابط رس'><span class='social-name'><i class='fa fa-rss'></i></span><span class='social-count'>+25 ألف</span><span class='social-type'>مشترك</span></a></li>
<li class='googleplus'><a href='رابط جوجل بلس'><span class='social-name'><i class='fa fa-google-plus'></i></span><span class='social-count'>+ 78 ألف</span><span class='social-type'>متابع</span></a></li>
<li class='youtube'><a href='رابط قناتك'><span class='social-name'><i class='fa fa-youtube'></i></span><span class='social-count'>+11 ألف</span><span class='social-type'>مشترك</span></a></li>
<li class='instagram'><a href='رابط انستجرام'><span class='social-name'><i class='fa fa-instagram'></i></span><span class='social-count'>+2.7k</span><span class='social-type'>متابع</span></a></li></ul></div>
<style>
/* Social Media */
.social-to ul li.rss a{ background:#ffac35} .social-to ul li.googleplus a{ background:#DD4B39} .social-to ul li.twitter a{ background:#4cadf7} .social-to ul li.facebook a{ background:#416dcb} .social-to ul li.instagram a{ background:#4586bb} .social-to ul li.youtube a{ background:#e4312a} .social-to ul li .social-type{ float:left} .social-to ul li .social-name{ float:right; margin-left:8px} .social-to ul li a{ display:block; border-bottom:3px solid rgba(0,0,0,0.09); margin-bottom:8px; color:#fff; padding:10px 18px; font-size:18px; border-radius:4px;
</style>
شرح اضافة اكواد meta tag  لتقوية السيو

شرح اضافة اكواد meta tag لتقوية السيو

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

شرح اضافة اكواد meta tag لتقوية السيو لمدونات بلوجر 2017 باحترافية

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

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

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

اذهب الى لوحة التحكم >> القالب >> تحرير HTML
ابحث عن <head> ثم اضف الكود التالي اسفله
<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>الصفحة خطأ - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;https://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='مدونة المحترف العربي , تحميل افضل برامج الويندوز, تطبيقات والعاب اندرويد, افضل قوالب اضافات بلوجر, مواقع ربح من انترنت, كورسات لتعلم سيو بالعربي, نصائح التدوين, شروحات اعلانات جوجل ادسنس' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='5b462c097f1c6119b4b6' name='wot-verification'/>
<meta content='B6wREwotllmhANXWd8wPSOTLAdRVQiwPWVtGWo-pQaY' name='google-site-verification'/>
<meta content='Morocco' name='geo.placename'/>
<meta content='Ahmed El' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='#016fba' name='msapplication-navbutton-color'/>
<meta content='#016fba' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#016fba' name='theme-color'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<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:if>
</b:if>

<meta content='https://www.facebook.com/tharabic' property='article:author'/>
<meta content='https://www.facebook.com/tharabicc' property='article:publisher'/>
<meta content='#' property='fb:app_id'/>
<meta content='#' property='fb:admins'/>
<meta content='ar_AR' property='og:locale'/>
<meta content='ar_MA' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='ّ#' name='twitter:site'/>
<meta content='#' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//adservice.google.ca' rel='dns-prefetch'/>
<link href='//adservice.google.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//disqus.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//cdn.rawgit.com' rel='dns-prefetch'/>
<link href='//fontawesome.com' rel='dns-prefetch'/>
<link href='//www.sharethis.com' rel='dns-prefetch'/>
<link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>


ملاحضة :

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