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

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

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

قبل البدء، لا تنسى أخذ نسخة إحتياطية من قالبك و الاحتفاظ بها في حاسوبك الخاص

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

خطوات الإضافة:

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

2.الآن قم بإضافة الكود CSS الموالي مباشرة فوق وسم ]]></b:skin> 

#related-posts { float : left; width : 600px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 11px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; padding-right:2px;} #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobJ8AnAf4Y-1ugg0Gv-TlBYhJGh_0RvqhHcz6ePy4Se7vBI04S4Hdf8NhXtNcmJ8h3dcLHMokiN3sQQdXJPKThm4HafBBxhJyYrH4hFzPBlz_WuSN696ODlAwuDMqKu8zYbKFP7IBEs0/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #000000; }

3.إضافة شفرة جافا سكريبت التالية فقط قبل </head>

<script src='http://yourjavascript.com/250120301911/related.js' type='text/javascript'/>

4. الآن قم بالبحث عن إحدى الأكواد التالية:

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

<'p class='post-footer-line post-footer-line-1>
5. وقم بإضافة التعليمة البرمجية التالية مباشرة بعده

<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'><img alt='Related Posts Widget for Blogger' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a> <br/> <br/> <h2 style='color: #fff; font: 20px droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'> مواضيع ذات صلة</h2> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

var maxresults=5  :عدد أصناف مماثلة لعرضه. يمكنك تغيير هذه القيمة مع الرقم الذي تريده.

#يمكنك تغيير عنوان القطعة عن طريق تغيير قيمة "مواضيع ذات صلة" ب "شاهد أيضا" على سبيل المثال أو أي عنوان أنت تريده

6.قم بحفظ النموذج الخاص بك.

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

إقرأ المزيد...

الخميس, فبراير 11, 2016 | بلوجر

طريقة إضافة نافذه منبثقة لتسجيل الإعجاب على الفيس بوك في بلوجر Like us on facebook

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

طريقة إضافة نافذه منبثقة لتسجيل الإعجاب على الفيس بوك في بلوجر

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

نأتي الآن إلى طريقة التركيب

#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;} #fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;} .fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;} #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;} #fblikepop #closeable{float:right;margin:7px 15px 0 0;} #fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;} #fblikepop #actionHolder{height:30px;overflow:hidden;} #fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;} #fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;} #fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;} #fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;} #fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}

 نقوم بوضع هذا الكود مباشرة قبل

]]></b:skin>

 طول النافذة  :  width:450px

 ارتفاع النافذة :  height:80px

 ثم نقوم باضافة هذا الكود مباشرة قبل </body>

<script type='text/javascript'> //<![CDATA[ KNFBFansPRO='مدونة عرب بلس' //]]> </script> <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1' type='text/javascript'/> <script src='https://my-tqarob.googlecode.com/svn/trunk/likebox2.js' type='text/javascript'/> <script language='javascript'> //<![CDATA[ $(document).ready(function(){ $().KNFBFansPRO({ timeout: 30, wait: 0, url: 'https://www.facebook.com/arabesplus', closeable: true }); }); //]]> </script> <div id='fbtpdiv'/>

ملاحظة

إستبدل العنوان عرب بلس بعنوان مدونتك و https://www.facebook.com/arabesplus برابط صفحتك الفيسبوك ثم قم بعملية الحفظ

أرجو أن تستفدوا من هذه الإضافة المميزة. أترككم في أمان الله و إلى اللقاء

إقرأ المزيد...

الثلاثاء, فبراير 09, 2016 | بلوجر | فيسبوك

أقوى و أحسن أكواد الميتا تاج 2016 لموقعك أو مدونتك meta Tag 2016

السلام عليكم ورحمة الله وبركاته و مرحبا بكم لتدوينة اليوم من مدونة عرب بلس

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

أقوى و أحسن أكواد الميتا تاج 2016 لموقعك أو مدونتك

طريقة وضعها في مدونتك:

-من لوحة تحكم مدونتك إذهب إلى قالب ثم تحرير HTML

-إضغط بمؤشرالفأرة مرة واحدة داخل القالب ثم إضغط على Ctrl+F

-ستضهر لك نافذة بحث، أكتب فيها <head> ثم إضغط على enter 

-إنسخ الكود التالي و ضعه مباشرة تحت <head>

<b:include data='blog' name='all-head-content'/> <title> <data:blog.pageTitle/> </title> <!-- Begin Open Graph metadata --> <meta content='ar_AR' property='og:locale'/> <meta content='رابط المدونة' property='og:url'/> <meta content='اسم المدونة' property='og:site_name'/> <meta content='رابط صورة للمدونة او صورة شخصية' property='og:image'/> <!-- Still looking for a way to use the post snippet if there's no description --> <meta content='رقم التطبيق الفايسبوك' property='fb:app_id'/> <meta content='اسم الحساب أو المستخدم' property='fb:admins'/> <!-- End Open Graph metadata --> <meta content='وصف المدونة' name='description'/> <meta content='الكلمات المفتاحية للمدونة' name='keywords'/> <meta content='اسم الكاتب أ, المدونة' name='Author'/> <meta content='all' name='robots'/> <meta content='index, follow' name='robots'/> <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='Arabic' name='language'/> <meta content='algeria' name='country'/> <meta content='blogger' name='generator'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName + data:blog.title' name='Description'/> <meta expr:content='data:blog.pageName + data:blog.title' name='Keywords'/> </b:if> <b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/> |شرح موجز للمدونة </title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

-ثم قم بعملية الحفظ

أرجوا أن يكون الدرس قد نال إعجابكم، أستودعكم بتحية الله ألا و هي السلام

إقرأ المزيد...

الاثنين, فبراير 08, 2016 | بلوجر

إضافة نموذج "اتصل بنا" إلى موقعك الخاص أو مدونتك

أنشئ نموذج اتصل بنا HTML بكل بساطة ومجانا مع foxyform وألصقه على صفحة موقعك أو مدونتك.
لإنشاء نموذج الاتصال من "FoxyForm" مجانا، اتبع الخطوات التالية:

انشئ صفحة التواصل مع الزوار اتصل بنا

1. انتقل إلى العنوان التالي: foxyform
2. حدد الحقول التي تريد تضمينها في النموذج وقرر الإجبارية منها و غير الإجبارية

علبة إختيار الحقول التي تناسبك

3. تخصيص اللون، الخلفية، الخط ... لنموذج الاتصال الخاص بك ليتناسب مع تصميم موقعك أو مدونتك

إعدادات إختيار اللون، الخط و حجم الكتابة

4. أدخل عنوان بريد إلكتروني صالح لاستقبال البيانات المرسلة من النموذج

إدخال الإيمايل

5. الآن اضغط على الزر

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

كود الصفحة الخاص

6. الآن، ادخل إلى مدونتك، قم بإنشاء رسالة أو صفحة، انقر على "تحرير HTML" وإنسخ /ثم إلصق كود HTML "FoxyForm" في نص الرسالة كما في الصورة التالية

كيفية إدماج الكود داخل الصفحة الخاصة بك

إقرأ المزيد...

الأحد, فبراير 07, 2016 | بلوجر

تحميل قالب المحترف الأصلي و المحبوب لدى محركات البحث

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

تحميل قالب المحترف

للتحميل:

ملاحظة: هذا القالب محبوب لدى محركات البحث لذى أرجوا أن ينال إعجابكم

إقرأ المزيد...

الأحد, فبراير 07, 2016 | بلوجر

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

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

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

لتحميل القالب:

إقرأ المزيد...

الأحد, فبراير 07, 2016 | بلوجر

الدرس 01: كيفية التسجيل و إنشاء مدونة جديدة

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

أولا قبل إنشاء مدونة لابد أن نتعرف على نوع هذه الخدمة المسماة ببلوجر المقدمة من طرف جوجل.
بلوجر (Blogger) هو نظام نشر للمدونات الالكترونيه والذى تستخدمه شركه جوجل منذ 2003م .
وتكون المدونه بصيغه مثلا : arabesplus.blogspot.com
وهو ما يسمى بنطاق فرعى وتستخدم شركه جوجل نطاق فرعى يسمى : blogspot.com
وتستطيع انت ان تختار اى اسم لمدونتك يسبق هذا النطاق .
هذا تعريف بسيط لبلوجر Blogger والان نذهب إلى موضوع التدونيه وهو :
كيفية التسجيل و إنشاء مدونة جديدة

أما فيما يتعلق بالشرح، أترككم مع هذا الفيديو الذي تجدون فيه الشرح المفصل. فرجة ممتعة

إقرأ المزيد...

الأحد, فبراير 07, 2016 | بلوجر