كوليكا ويب | هدفنا تطوير الويب العربي: دروس و شروحات

صفحات المدونة

    Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

و تقديم كل ماهو جديد و كل ما يخص بلوجر.


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

1 - التسويق عبر المنتديات.

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

2 - التسويق عبر مواقع التواصل الإجتماعي .

و هي واحدة من الطرق الأفضل و تنقسم إلى

طريقة مدفوعة و أخرى مجانية و هما :

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

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

3 - النشر بالمواقع .

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

أهم نصائح التسويق الالكتروني


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


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

كيف تسرع الأرشفة بعد إيقاف جلب مثل جوجل


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

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

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

يعمل هذه الكود بكثير من المتصفحات حتى في ( ميكروسوفت و إدج)
1- قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم  </body>  وضع فوقة/قبلة الكود التالي :


<script type='text/javascript'> //<![CDATA[ // Copy Text function nocopas(){var e=window.getSelection();pagelink="  اكتب هنا اسم موقعك او مدونتك   "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas); //]]> </script>

2- قم بحفظ القالب وجرب انسخ نص من مدونتك والصقه في مكان اخر


كيفية إضافة روابط المصدر تلقائياً


كما نعلم ، تقوم
تعليقات بلوجر عموما بفرز التعليقات الاقدم بالاعلى والتعليقات الجديدة في اسفل موضع التعليقات ، إذن ماذا لو تم عكس العملية ؟ وجعلنا التعليق الاحدث فوق التعليق الاقدم ! فكرة جميلة ❤

كيف ؟ .... الطريقة سهلة للغاية ، لا تقلق.☺

كيفية فرز تعليقات بلوجر

هنا استخدم علامات HTML المعكوسه لعكس فرز التعليقات كما قلنا الاحدث فوق الاقدم مثل نظام تعليقات facebook و Disqus.

اذهب ال أعدادات مدونتك في
Blogger 
، أنقر علي المظهر > أنقر عل زر تعديل وأبحث عن الكود التالي





<b:loop values='data:post.comments' var='comment'>



أستبدله بالكود التالي 




<b:loop reverse='1' values='data:post.comments'>




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


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


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

هذا هو الشكل المبسط للنموذج:


للتركيب قم بإضافة الكود التالي بعد وسم الفتح <body> مباشرة

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type="text/css">
body {
font-size: 20px;
background: #777 none repeat scroll 0 0;
color: #fff;
display: block;
line-height: 2em;
padding: 30px 0;
color: #fdd702;
}
h6 {
.erhomr {
font-size: 30px;
font-weight: bold;
margin: 0;
color: #fff;
padding: 0;} 
background-color: #444;
border: 1px solid #fff;
box-shadow: 0 0 2px #000;
text-align: center;
display: inline-block;
height: 40px;
line-height:40px;
padding: 0 20px;

<!-- بداية محتوى الصفحة -->

text-decoration: none;
transition: all 0.7s ease 0s;
.erhomr:hover {background-color: #000; color:#fff;}
}
</style><center> 
<h6>صفحة خطأ</h6>
<img src="https://lh3.googleusercontent.com/--qV_QKSmy-8/Vg2mqNE7-AI/AAAAAAAAFxM/znKnsbB1a-o/s210-Ic42/sad-smiley-face.png"/>
<p>الصفحة التي تبحث (ي) عنها غير موجوده</p><a class="erhomr" href="/">الرئيسية</a> 
<div class="cnmu-error-body">

<!-- نهاية محتوى الصفحة -->

</center></b:if> 

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

ثم استخدم الكود التالي فوق وسم الإغلاق </body> مباشرة

</div>
</b:if>


تنسيقات على الكود الأول
هذا اللون #777 هو خلفية الصفحة
هذا اللون #fdd702 هو لون كلمة صفحة خطأ
هذا اللون #444 هو لون زر الرئيسية
وهذا #000 لون الزر عند تمرير الماوس
الرابط الاحمر هو رابط الصورة 
الكلام العربي يمكنك تعديله
ان اردت اضافة جمل اضافية اضف هذا الكود واكتب ما تريد فيه
<p>هنا</p>
كرر الكود كلما اردت سطر اضافي.

إنشاء مظهر مستقل لصفحات الخطأ


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


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

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

بلوجر والسيو في 2019 ما الذي نحتاجه ؟


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

طريقة التركيب:
1- اذهب الى لوحة تحكم مدونتك وقم بانشاء صفحة جديده باسم " الفهرس " واضف بداخل الصفحة الكود التالي 

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/tarekhesham/Colica-web/master/sitemap-Colica-web.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
/*  CSS Full Sitemap colica-web*/
#bp_toc {background:#75CC8E<;color:#fff;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#ccc;width:250px;}
.toc-header-col2 {padding:10px;background-color:#ccc;width:75px;}
.toc-header-col3 {padding:10px;background-color:#ccc;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#fff;font-family:'Noto Sans Kufi Arabic', sans-serif!important;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>

2- قم بحفظ الصفحة و مبروك عليك الفهرس الاحترافي.

ملاحظة : الكود المحدد باللون الاحمر هو خاص بلون خلفية الفهرس ، يمكنك تغيره ان اردت.
يمكنك معرفة كود اللون الذي تريد من >> اكبر مكتبة الوان.

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


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

علامة شرطية للصفحة الرئيسية


الاصدار الجديد


<b:if cond='data:view.isHomepage'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.url == data:blog.homepageUrl'> … </b:if>

علامة شرطية لصفحات المواضيع


الاصدار الجديد


<b:if cond='data:view.isPost'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.pageType == "item"'> … </b:if>

علامة شرطية لصفحات ثابتة


الاصدار الجديد


<b:if cond='data:view.isPage'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.pageType == "static_page"'> … </b:if>

علامة الشرطية لصفحات الفهرس مثل التنقل بين المواضيع


الاصدار الجديد


<b:if cond='data:view.isMultipleItems'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.pageType == "index"'> … </b:if>

علامة شرطية لصفحات الارشيف


الاصدار الجديد


<b:if cond='data:view.isArchive'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.pageType == "archive"'> … </b:if>

علامة شرطية لصفحات الخطاء 404


الاصدار الجديد


<b:if cond='data:view.isError'> … </b:if>

الاصدار القديم


<b:if cond='data:blog.pageType == "error_page"'> … </b:if>

علامة شرطية لصفحات المعاينة



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

الاصدار الجديد

<b:if cond='data:view.isPreview'> … </b:if>

الاصدار القديم

<!-- لا يوجد -->


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

العلامات الشرطية الجديدة في بلوجر

تعريف التعليقات البرمجية:

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

طريقة الاستخدام


يوجد نوعين مهمين لدي مستخدمي بلوجر وهما : Css و Html

نبداء بتعليقات ال CSS 

/*اكتب هنا ما تريد*/
هذه نمط التعليقات الخاص باكواد الــCSS يمكنك أستخدامة في الاكواد فوق الوسم
]]></b:skin>

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


تعليقات
Html

<!--اكتب هنا ما تريد-->
نفس الامر في نمط التعليقات السابقة لكن هذه يمكنك أستخدامة في باقي اجزاء القالب .

التعليقات البرمجية للغة CSS و HTML

تابعنا عبر البريد الالكتروني