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

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

    Social Items

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

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

Home / All Post

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

 شاهد ايضاً: بلوجر والسيو في 2019 ما الذي نحتاجه ؟

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

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


التركيب للأضافة والأكواد سهل جدا سوف يكون عليك أولا أن تبحث عن هذا الوسم  </head>  وتقوم بوضع الكود التالى فوقه ، وفى بعض القوالب سوف تجد الوسم بهذا الشكل  &lt;/head&gt;&lt;!--<head/>--&gt;  ضع الكود التالى فوقه ايضا.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<style>
/*<![CDATA[*/
.sticky-ads{display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;overflow:visible;text-align:center;bottom:-104px;left:0;width:100%;z-index:9999;height:100px;background-image:none;background-color:#fff;margin-bottom:0;padding-top:4px;box-shadow:0 0 5px 0 rgba(0,0,0,0.2);transition:all .4s ease-in-out}
.sticky-ads-close{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg==");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,0.2);border:none;border-radius:12px 0 0 0;cursor:pointer}
.sticky-ads-close:before{position:absolute;content:"";top:-20px;right:0;bottom:0;left:-20px}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
:active,:focus{outline:0}
/*]]>*/
</style>
</b:if>

الأن الكود الأخير سوف تقوم بوضع فوقه الوسم  </body>  فى أسفل القالب.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<div class='sticky-ads' id='sticky-ads'>

ضع الاعلان هنا

<button aria-label='Kapat' class='sticky-ads-close' onclick='document.getElementById(&apos;sticky-ads&apos;).style.display=&apos;none&apos;;'/>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ads');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

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

ولجعل أعلان أدسنس يظهر بحجم متجاوب على الهاتف سوف تقوم بأنشاء وحده اعلانية  جديده مثلا 300x250 ، بعد ذلك سوف تقوم بتغيير العرض 300 الى 100% الأرتفاع 250 الى 100 وبعد ذلك تقوم بوضع كود الأعلان فى القالب ، او يمكنك أنشاء وحدة اعلانية جديد بهذا الحجم مرة واحده.

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


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


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

داخل مربعها الصق الكود التالي ثم حفظ

 
<script LANGUAGE="JavaScript">
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net) //Disable select-text script (IE4+, NS6+)- By Andy Scott //Visit http://hashem-earn-from-internet.blogspot.com/ 
var message=""; 
function clickIE() {
if (document.all) {
(message);return false;
}
} function clickNS(e) { 
if (document.layers||(document.getElementById&&!document.all)) { 
if (e.which==2||e.which==3) { (message); return false;
} } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); 
document.onmousedown=clickNS;
} else { document.onmouseup=clickNS;
document.oncontextmenu=clickIE; 
} document.oncontextmenu=new Function("return false")
function disableselect(e) { return false } function reEnable() { return true } 
document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } //
//-->
</SCRIPT>

كود منع نسخ المحتوى ومنع التظليل ومنع كلك يمين


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

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

يعمل هذه الكود بكثير من المتصفحات حتى في ( ميكروسوفت و إدج)
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>
كرر الكود كلما اردت سطر اضافي.

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


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

من مميزات القالب :


  1. متجاوب مع مختلف الشاشات
  2. سريع التحميل
  3. متوافق مع الـ SEO
  4. احدث اكواد ميتا تاج
  5. سلايدر شو
  6. صفحة إتصل بنا
  7. صفحة الخطأ 404
  8. مساحات إعلانية
  9. الصعود إلى الأعلى

والعديد من المميزات الأخرى التي سأدعكم تكتشفونها



قالب مدونة أيمن تك احدث اصدار v4



تغيير لون الشريط الافتراضي الي لون اخر كما تريد ليناسب قالب مدونتك.
لمن لا يعرف شريط التمرير الجانبي هوا ما يسمي scrollbar
فـ هذا الشريط يكون بجانب المدونة في المتصفح
طريقة تغيير لون شريط التمرير
ابحث داخل القالب باستخدام Ctrl+F عن الوسم </head> ثم ضع الكود التالي فوقه

<style>
::-webkit-scrollbar{width:7px;height:7px;background:#fff;}
::-webkit-scrollbar-thumb{background:#E74C3C;}
</style>

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

تغير شريط تمرير الجانبي مثل مدونة كوليكا ويب


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

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

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


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


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : colica-web Cleaning Template
Designer URL  : https://colica-web.blogspot.com
year          : 2018
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html>


قالب تنظيف لمدونات بلوجر

الاشتراك في: الرسائل (Atom)

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