تعرف على اهم اكواد جديدة الخاصة بمنصة بلوجر 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'/>


ملاحضة :

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


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

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

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

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

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

خطوات انشاء صندوق دردشة واتساب

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

<script async data-id="8578" src="https://cdn.widgetwhats.com/script.min.js"></script>

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

شرح انشاء صندوق دردشة واتساب بالفيديو 

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

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

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


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

اولا نتوجه الى لوحة تحكم بلوجر من هنا
ثم اختر المظهر
ثم انقر على تعديل HTML
ابحث عن </head>  ( استعمل 'CTRL+F' للبحث ) ثم اضف الكود التالي اسفل </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan by arlinadesign modifie by tharabic */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#tharabic2019{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;left:0;right:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#tharabic2019 .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;right:0;left:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#tharabic2019 .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#tharabic2019 .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#tharabic2019 a.close-popup{background:#428bca;position:absolute;bottom:20px;left:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#tharabic2019 a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#tharabic2019 a.close-popup:active{opacity:.9}
.ketupat{position:absolute;right:0;left:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#tharabic2019 .puasa19{font-size:1rem}#tharabic2019 .puasa19 .ramadhan2019{font-size:1.5rem}#tharabic2019{min-height:260px;right:20px;left:20px}}
</style>
</b:if>

الان ابحث عن  </body> و اضف الكود التالي فوقه :
<b:if cond='data:view.isHomepage'>
<div id='tharabic2019'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>اغلاق</a>
<div class='puasa19'>
   <p>رمضان مبارك سعيد</p>
   <p><span class='ramadhan2019'>رمضان 1440 هجرية</span></p>
   <p>اسال الله ان يبلغنا رمضان ونحن في احسن حال</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#tharabic2019").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>
يمكنك التعديل على جملة تهنئة رمضان ، ثم قم بحفض القالب و مبروك عليك اضافة رمضان لمدونات بلوجر 2019، لاتنسى تشجيعنا بتعليقاتك و مشاركة التدوينة ليستفيد الجميع شكرا
اضافة ازرار معاينة و تحميل لمدونات بلوجر

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

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

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


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

1. اولا قم بنسخ شفرة CSS التالية ولصقها أو وضعها في 👈 القالب 👈 تعديلHTML  ابحث عن الرمز </ head> اضف الكود فوقها.
<style>.TIMbutton{padding:15px;margin:15px;width:100%;text-align:center}.TIMdownload{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background:linear-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}.TIMdownload:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.TIMdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px}.TIMdemo{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background:linear-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}.TIMdemo:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.TIMdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-left:10px}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}</style>
2. قم بحفض القالب،  لمعرفة كيفية استخدامها ، يرجى نسخ شفرة HTML التالية ولصقها في كل منشور في مدونتك التي تريد أن تقدم لها عرض تجريبي وتنزيل. تذكر ، في HTML لا يؤلف.
<div class="TIMbutton"> <a class="TIMdemo" href="#" target="_blank">معاينة</a> <a class="TIMdownload" href="#" target="_blank">تحميل</a></div>

3. إذا لم تظهر ايقونات الموجود على زر العرض المعاينة و التحميل  ، فيرجى نسخ الرمز التالي ولصقه أعلى الرمز </ head> أو </ body>.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
لمعرفت المزيد أكثر وضوحًا ، يرجى الاطلاع على الاضافة  أدناه.
صفحة اعادة توجيه بلوجر, زيادة ارباح ادسنس 2019, سكربت اختصار الروابط

صفحة اعادة توجيه بلوجر, زيادة ارباح ادسنس 2019, سكربت اختصار الروابط

السلام عليكم متابعي مدونة المحترف العربي , اليوم ساقدم لكم صفحة اعادة توجيه بلوجر و حماية روابط بلوجر لزيادة ارباح ادسنس 2019، صفحة التي استعملها على مدونة المحترف العربي، من خلال تركيب سكربت اختصار الروابط ستزيد حتما من عدد مشاهذات موقعك او مدونتك ، وهكذا ترفع من ارباحك على جوجل ادسنس، هناك العديد من مدونون يستعملونها بدون اي مشكلة وهي طريقة الفعالة لزيادة ارباح جوجل ادسنس او ربح من شركات اعلانية غير ادسنس، تركيب هذه الصفحة لايتطلب سوى بعض اكواد "javascript"  ووضعها داخل قالب المدونة الخاص بك.

صفحة اعادة توجيه بلوجر, زيادة ارباح ادسنس 2019, سكربت اختصار الروابط

معاينة صفحة اعادة توجيه بلوجر, زيادة ارباح ادسنس 2019, سكربت اختصار الروابط :

طريقة انشاء صفحة اعادة توجيه بلوجر, زيادة ارباح ادسنس 2019, سكربت اختصار الروابط :

1. توجه الى لوحة تحكم بلوجر من هنا و اختر المدونة التي تريد اضافة اليها هذه الصفحة
2. توجه الى الصفحات المدونة ثم انشاء صفحة جديد قم بانشاء اي عنوان تريد للصفحة
3. اختر HTML ثم اضف الكود html الموجود في هذه الصفحة  : تحميل كود html
4. ثم قم بنشر الصفحة
الان توجه من جديد
5. اختر ◁ المظهر ثم ◁ انقر على ◁ تعديل HTML
6. ابحث عن </body> ثم اضف الكود التالي فوقه

<script type="text/javascript">
var setting = {
pageurl : "https://www.tharabic.com/p/blog-page.html",
pengecualianstatus : true,
pengecualian : "kafiil.com,facebook.com,youtube.com,twitter.com,javascript:;,mailto:",
hanyauntukstatus : false,
hanyauntuk : "tharabic.com",
path : "#link?from="
}; 
</script>
<script type="text/javascript" src='https://cdn.rawgit.com/proarabic/tharabic/1de4245e/safe-link-crypto.js'></script>
<script type="text/javascript" src='https://cdn.rawgit.com/proarabic/tharabic/ca14c0b5/change-url.js'></script>


قم بتعديلات التالية على الكود 

pageurl رابط الصفحة التي قمت بانشائها جديدة
pengecualian قائمة المواقع التي لا تريد اختصارها
 hanyauntuk : موقع مدونة الخاص بك

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

كيفية اضافة صندوق و زر الإشتراك قنوات يوتيوب إلى مدونة بلوجر 2019

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

كيفية اضافة صندوق و زر الإشتراك قنوات يوتيوب إلى مدونة بلوجر 2019

شرح طريقة اضافة هذا الصندوق :

1. توجه الى لوحة التحكم بلوجر
2. اختار تخطيط .
3. اضافة اداة Javascript/Html 5.
4. لسق كود الخاص بأداة :

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="xxxxxx_xxxxxxxxxx" data-layout="full" data-count="default">
</div>

لا تنسى استبدال معرف القناة  xxxxxx_xxxxxxxxxx  بالكود الخاص بقناتك يمكنك الحصول عليه من هذا الرابط
 ستجد الكود الخاص بك قرب باللغة انجليزية : YouTube User ID او باللغة عربية معرّف قناة youtube
و هكذا نكون انهينا هذا الدرس نتمنا ان ينال اعجابكم كما نتمنا ان تشاركوننا ب ارائكم باترك تعليق اسفل الموضوع موعدنا في الدرس القادم ان شاء الله و شكرا ادا اعجبك الموضوع يمكنك مشاركته مع اصدقائك بالضغط على احدا ايقونات تواصل اجتماعي
اضافة احدث المواضيع لمدونات بلوجر

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

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

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

طريقة اضافة احدث المواضيع لمدونات بلوجر : 

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

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

اختر ادا html/javascript 
اضافة احدث المواضيع لمدونات بلوجر
الان قم بنسخ الكود التالي في سندوق html/javascript 
اضافة احدث المواضيع لمدونات بلوجر
الكود الخاص بالاضافة :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Recent Post tharabic.com */
.recent-galeri{padding:0;clear:both}
.recent-galeri:after{content:&quot;&quot;;display:table;clear:both}
.recent-galeri .gallerytem{display:block;float:right;position:relative;margin:0 auto 15px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
.recent-galeri .gallerytem:last-child{margin:0 auto}
.recent-galeri .gallerytem a{position:relative;float:right;margin:0;overflow:hidden;text-decoration:none;width:100%}
.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:right;font-size:15px;line-height:1.3em;position:absolute;bottom:15px;right:15px;left:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s}
.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#eccc68}
.recent-galeri a img{background:#fdfdfd;float:right;margin:auto;text-align:center;width:100%;transition:all .3s}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post
var galihd_thumbs_wid = 300; 
var galihd_thumbs_hei = 190; 
var galihd_title = true; 
function galihdgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-galeri">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png",s=n.replace("/s72-c/","/w"+galihd_thumbs_wid+"-h"+galihd_thumbs_hei+"-c/"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+galihd_thumbs_wid+'" height="'+galihd_thumbs_hei+'"/>',p=galihd_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script src="/feeds/posts/summary?max-results=4&amp;alt=json-in-script&amp;callback=galihdgrid"></script>
 </b:if>

تعديل على اضافة احدث المواضيع 

max-results=4 : تمتل عدد المواضيع يمكنك تغيير حسب العدد الدي تريده.
var galihd_thumbs_wid = 300; تمتل عرض الصورة.
var galihd_thumbs_hei = 190; تمتل طول الصورة.

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

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

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

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

طريقة اضافة مواضيع ذات صلة بلوجر

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

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

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

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

طريقة اضافة هذا النوع من اعلانات :

سلايد شو بلوجر احترافي و انيق 2019

سلايد شو بلوجر احترافي و انيق 2019

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

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

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

قم بالنقر على تحرير html للقالب.

ابحث عن </head> و اضف الكود التالي فوقه ( اعلاه ) .
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by naminakiky.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_namina{display:block;position:relative;float:left;overflow:hidden;height:410px}.featured_namina.first{width:44.7%;margin-right:1px}.featured_namina.second{width:25%;margin-right:1px}.featured_namina.third,.featured_namina.fourth{width:30%;height:205px}.featured_namina.third{margin-bottom:1px}.featured_namina a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_namina a:before{width:100%;height:100%;position:absolute;content:&#39;&#39;;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;left:15px;right:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_namiwrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_namina.first span{background:#679e37}.featured_namina.second span{background:#f8a724}.featured_namina.third span{background:#029ae4}.featured_namina.fourth span{background:#e53935}.featured_namina a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_namina a .blog_contents h3:hover{text-decoration:underline}.featured_namina.first a .blog_contents h3{font-size:22px}.featured_namina .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:768px){
.featured_namiwrap{max-height:initial}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_namina a .blog_contents{left:15px;right:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by naminakiky.com
function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>
ملاحضة : استبدل هذا الرابط https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ب  https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js في جالة ان وجدة الكود 1.7.1 
ادا لم تجد اي احد من هم قم باضافة الكود التالي فوق وسم </head>  :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
قم الان بحفض النمودج . حان الوقت الدي يجب تحديد مكان سلايد شو و دالك حسب اختيارك اما ان توضعه في اعلا او الاشفل هذا يعود لك ضعه بين 
الان قم بنسخ كود السلايد شو التالي في اي مكان تريده بشرط ان يكون اسفل <div class='content-wrapper'> :

<b:if cond='data:view.isHomepage'>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
و في الاخير قم بحفظ القالب و هنيئا لك ياصديقي, لا تنسى دعمنا بالتفاعل و ترك تعليقك لتشجيعنا على مزيد  من الدروس. شكرا
اضافة تقييم نجوم لمشاركات الشائعة

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

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

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

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

تركيب إضافة نجوم التقييم في المشاركات الشائعة :

اولاً يجب إضافة الكود التالي فوق الوسم </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

مُلاحظة: إذا كان الكود موجود في مدونتك لا تقوم بإضافته
ثانيًا: قُمّ بالدخول إلى لوحة تحكم بلوجر ثم اضغط على تبويب قالب، ثمّ تحرير HTML واضف الكود التالي فوق الوسم ]]></b:skin>

الشكل الاول :

/* Popular Post */

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثاني :


/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثالث

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{float:right;margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}


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

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

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

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

قائمة منسدلة لمدونات بلوجر احترافية CSS : معاينة من هنا

قائمة منسدلة احترافية لمدونات بلوجر
قائمة متجاوبة تحتاج تعديل الروابط و التسميات بكل سهولة و لاضافتها تابع التالي :
توجه الى 👈 لوحة تحكم بلوجر ثم 👈 قالب 👈 ثم تحرير html :
ابحث عن  <body>  ثم حدد مكان الدي تريد اضافت اليه القائمة اضف الكود التالي فوقه :
 <nav dir='rtl'>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
     <li><a class="homer" href="#"><i class="fa fa-home"></i> الرئيسية</a></li>
    
  <li><a  href="#"><i class="fa fa-user"></i> عنا</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> المدونة</a>
  <ul class="sub-menu">
   <li><a href="#">تسمية</a></li>
   <li><a href="#">تسمية</a>
    <ul>
    <li><a href="#">تسمية 1</a></li>
    <li><a href="#">تسمية 2</a></li>
 <li><a href="#">تسمية 3</a></li>
    <li><a href="#">تسمية 4</a></li>
 <li><a href="#">تسمية 5</a></li> 
    </ul>
   </li>
     <li><a href="#">تسمية 3</a>
    <ul>
    <li><a href="#">تسمية 1</a></li>
    <li><a href="#">تسمية 2</a></li>
 <li><a href="#">تسمية 3</a></li>
    <li><a href="#">تسمية 4</a></li>
 <li><a href="#">تسمية 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
    <li><a  href="#"><i class="fa fa-android"></i> اندرويد</a>
  <ul class="sub-menu">
   <li><a href="#">تطبيقات 1</a></li>
   <li><a href="#">العاب 2</a>
    <ul>
    <li><a href="#">اكشن 1</a></li>
    <li><a href="#">رياضة 2</a></li>
 <li><a href="#">طبخ 3</a></li>
    <li><a href="#">اللغة 4</a></li>
 <li><a href="#">تعلم 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> اتصال</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> الفهرس</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> اتفاقية</a></li>
  </ul>
  </nav>

الان بعد اضافة الكود السابق ابحث من جديد عن ]]></b:skin>  و اضف الكود css التالي فوقه :

nav{display:block;margin-top:100px;background:#374147}
.menu{display:block}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#9ca3da}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;right:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;right:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-right:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:normal;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#9ca3da;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{right:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{right:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-left-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.homer{background:#9ca3da}
@media (min-width:768px) and (max-width:979px){.mainWrap{width:768px}.menu ul{top:37px}.menu li a{font-size:12px}a.homer{background:#374147}}
@media (max-width:767px){.mainWrap{width:auto;padding:50px 20px}.menu{display:none}.responsive-menu{display:block;margin-top:100px}nav{margin:0;background:none}.menu li{display:block;margin:0}.menu li a{background:#fff;color:#797979}.menu li a:hover,.menu li:hover>a{background:#9ca3da;color:#fff}.menu ul{visibility:hidden;opacity:0;top:0;right:0;width:100%;transform:initial}.menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}.menu ul ul{right:0;transform:initial}.menu li>ul ul:hover{transform:initial}}

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

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