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

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

    Social Items

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

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

Home / بلوجر

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

شرح اليوم على اضافة صفحة اعادة توجيه لمدونات بلوجر بخطوات بسيطة

شرح تركيب الاضافة 

اولا ابحث في القالب على </head>  وضع الكود التالي فوقه مباشرة 

<style type='text/css'>
/*<![CDATA[*/
.colica-web-redirect{font-style:normal;margin:0 auto;display:block;text-align:center}
.colica-web-redirect .file{font-size:27px;margin:16px auto}
.colica-web-redirect .box-redirect-quick{padding:22px;background:#552a86;margin:9px auto;width:80%;border-radius:5px;color:#fff;text-align:center;overflow:hidden;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}
.colica-web-redirect .box-redirect-quick i.fa-link{font-size:28px;background:#fff;padding:12px;color:#46315e;border-radius:50px;width:50px;height:50px;margin:13px auto}
.colica-web-redirect .box-redirect-quick .tools-quick{padding:8px}
.colica-web-redirect .box-redirect-quick .tools-quick input{padding:1em;border:1px solid #46315e;font-family:inherit;width:100%;margin:8px auto}
.colica-web-redirect .box-redirect-quick .tools-quick button{background:#fff;padding:10px 16px;border:0;font-family:inherit;cursor:pointer}
.colica-web-redirect .box-redirect-quick .result-redirect-url{text-align:center;border:0;margin:0 auto;margin-bottom:14px;width:76%;height:0;overflow:hidden;display:block;transition:all .4s ease-in-out}
.colica-web-redirect .box-redirect-quick .result-redirect-url.done{height:40px;transition:all .4s ease-in-out}
/*]]>*/
</style>


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

<script type='text/javascript'>
//<![CDATA[
// تفعيل اختصار روابط التلقائي
var autoshort = true; // false & true
//
var linkredirect = "https://live-free-colica-web.blogspot.com/p/redirect.html",  // رابط صفحة اعادة التوجيه
redirect_protected = "colica-web.com,youtube.com,facebook.com,google.com,twitter.com"; // الروابط المحمية من الاختصار
// تعديل الكتابات
var redirecttext = "جاري التوجيه";
var urltextinput ="ضع الرابط هنا";
var textgeturl = "الحصول على رابط التوجيه";
var waittext = "إنتظر قليلا";
var secondswait = 20; // عداد الثواني
var secondstext =  ["ثانيا", "ثواني"]; 
// تعديل على الالوان و الخط
var fillStyle = "#552a86",  // لون البنفسجي
strokeStyle = "#eee", // لون الخط الرمادي
fontFamily = "cairo", // اسم الخط
fontColor =  '#FFFFFF'; // للون الخط
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/redirect-page.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
//]]>
</script>

الان احفظ القالب و افتح صفحة جديدة وضع الكود التالي في الصفحة لكي تعمل معك الاضافة


<i class="colica-web-redirect"></i>

الان مبروك عليك الاضافة لاتنسى الاشتراك في المدونة لكي تتوصل بكل جديد. ♥


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


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

 اولا لتركيب الاضافة عليك بدخول الى تحرير html  ثم تبحث على </b:skin>  و تضع الكود التالي فوقه مباشرة

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">Here</code></pre>


الان احفظ القالب و في كل تدوينة تنشرها تضع هذه الاكواد مع التعديل عليها

<center>
<div id="video">
    <div id="video-player"><iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" name="search_iframe" src="رابط سرفر" webkitallowfullscreen=""></iframe> </div>
    <div id="server-list">
        <div class="server-item" title="سرفرات للجودة القوية"><a href="رابط سرفر" target="search_iframe">سرفر1</a> <a href="رابط سرفر" target="search_iframe">سرفر 2</a> <a href="رابط سرفر" target="search_iframe">سرفر 3</a> <a href="رابط سرفر" target="search_iframe">سرفر 4</a> </div>
        <div class="server-item" title="سرفرا للجودة الضعيفة"><a href="رابط سرفر">سرفر 5</a> <a href="رابط سرفر" target="search_iframe">سرفر 6</a> <a href="رابط سرفر" target="search_iframe">سرفر 7</a> <a href="رابط سرفر" target="search_iframe">سرفر 8</a> </div>
    </div>
</div>
</center>

مبروك الاضافة ♥ لا تنسي مشاركة الموضوع لدعمنا.


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


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

 شاهد ايضاً: بلوجر والسيو في 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- قم بحفظ القالب وجرب انسخ نص من مدونتك والصقه في مكان اخر

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


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

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

للتركيب قم بإضافة الكود التالي بعد وسم الفتح <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>


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

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


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

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

ما هو سبب هذا الأسم فتات الخبز

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

اضافة فتات الخبز Breadcrumb بلوجر

طريقة التركيب سهل جدا على ما سبق سوف تستخدم كود واحد فقط وهو الكود التالى.
سوف تدخل الى مدونتك وبعد ذلك المظهر وتقوم بوضع الكود اسفل هذا الوسم
<b:includable id='post' var='post'>
وبعد ذلك تقوم بحفظ القالب.



<b:loop index='item' values='data:post.labels' var='label'>
<b:if cond='data:item lt 1'>
<script type='application/ld+json'>{
&quot;@context&quot;: &quot;http://schema.org&quot;,&quot;@type&quot;: &quot;BreadcrumbList&quot;,&quot;itemListElement&quot;: [{&quot;@type&quot;: &quot;ListItem&quot;,&quot;position&quot;: 1,&quot;item&quot;: {&quot;@id&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;,&quot;name&quot;: &quot;<data:blog.title/>&quot;}},{&quot;@type&quot;: &quot;ListItem&quot;,&quot;position&quot;: 2,&quot;item&quot;: {&quot;@id&quot;: &quot;<data:label.url.canonical/>&quot;,&quot;name&quot;: &quot;<data:label.name/>&quot;}},{&quot;@type&quot;: &quot;ListItem&quot;,&quot;position&quot;: 3,&quot;item&quot;: {&quot;@id&quot;: &quot;<data:post.url.canonical/>&quot;,&quot;name&quot;: &quot;<data:view.title.escaped/>&quot;}}]}</script>
</b:if>
</b:loop>


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

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

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

فتات الخبز Breadcrumb اضافة جديدة بلوجر


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

  1. سوف تقوم بالبحث عن هذا الوسم <head/> في قالب مدونتك
  2. ثم تقوم بوضع الكود التالي فوقه مباشر
  3. و ان لم تجده هكذا سوف تجده هكذا </head> في قالب مدونتك

<script type='text/javascript'>//<![CDATA[ (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("</img>").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

 و بعدها سوف تقوم بالحفظ و مبروك عليك الاسكريبت
اتمني ان يكون نال اعجابكم موضوع اليوم 

أضافة تاثير التحميل لجميع صور المدونة بشكل أحترافى


السلام عليكم زوار و متابعين كوليكا ويب 💖 ، اليوم معانا درس مهم لكل اصحاب المواقع و المدونات اكيد زهقت من برامج منع الاعلانات انت تتعب في الشرح و تقديم محتوي مميز، و في الاخر مفيش مقابل تعبك حاجة بسبب مانع اعلانات برنامج Ad Block ✋ و الاضافات الموجودة في المتصفحات، انهرضا معانا اسكربت عشان تمنع برامج و إضافات حجب الاعلانات سهل التركيب يلا نبدأ الشرح😂👇.

طريقة التركيب:
1- قم بالدخول الي ( التخطيط ).
2- قم باضافة اداة ( HTML / JavaScript ).
3- ضع الكود التالي....

 

<style scoped='' type='text/css'>

#h237 {position: fixed !important;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.83);opacity: .99;display: block;padding: 7% 0;bottom: 0;right: 0;z-index: 9999!important;}

a.sidebar-location {padding: 12px 15px!important;background-color: #EA2922;color: #fff!important;font-weight: 500;font-size: 16px;text-align: center;text-transform: uppercase;

border-radius: 3px;display: block;margin: 15px auto;clear: both;width: 15%;transition: all 0.3s ease-out;line-height: 10px;height: 40px;box-shadow: 0 0 6px rgba(0,0,0,0.27);}

#h237 *{text-align:center;margin:0 auto;display:block;text-decoration:none}

#h237 * img {width: 200px;height: 200px;}

#h237 * p {margin: 1% 10%;font-size: 40px;line-height: 70px;color: #fff;font-weight: 500;margin-bottom: 2%;text-shadow: 0 0 6px rgba(0,0,0,0.27);}

#h237 * a {padding: 12px 15px!important;background-color: #EA2922;color: #fff!important;font-weight: 500;font-size: 16px;text-align: center;text-transform: uppercase;border-radius: 3px;display: block;margin: 15px auto;clear: both;width: 15%;transition: all 0.3s ease-out;line-height: 10px;height: 40px;box-shadow: 0 0 6px rgba(0,0,0,0.27);}

#h237 ~ *{display:none}

</style><div id="h237"> <span>Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">Enable JavaScript</a></span></div> 

<script>

/*<![CDATA[*/

window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h237"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="https://i.imgur.com/P8pRRvJ.png" height="350" width="699" alt="" /> <p> من فضلك قم بتعطيل أداة مانع الأعلانات من المتصفح للدخول لمدونة كوليكا ويب ، أو أستخدم متصفح أخر وشكرا لك :)</p><a class="sidebar-location" href="JavaScript:window.location.reload()">تحديث الصفحة</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);

/*]]>*/

</script>

تعديلات.

قم بتغيير اسم كوليكا ويب بـ اسم مدونة الخاصة بك.

إضافة مانع حجب الاعلانات لزيادة ارباحك في أدسنس


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

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


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


<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


السلام عليكم زوار كوليكا ويب الكرام، لقد عدنا اليوم بقالب جديد معرب بناء علي طلب الكثير لقالب بلوجر، إخباري و مميز فـ اليوم قد لبينا طلبكم و معانا اليوم قالب بلوجر، قالب نيوز الإخباري معرب بدون اخطاء و سهل التعديل عليه إن القالب يحتوي علي سلايد شو حسب التسميات، و هذا مفيد جدااااا في المدونات الاخباري لان يوجد بها العديد من الاقسام و يوجد قوائم منسدلة و القوائم منسدلة داخل القوائم المنسدلة 😂 يعني لو قسم فيه تفريعات كتير مثلا قسم الرياضة فيه كذا حاجة كرة قدم و كرة سلة، و الكثير من الاقسام 😄 فا هذه ميزة جميلة جدا في القالب و يحتوي علي اكواد ميتا تاج قوية 💪، لتصدر محركات البحث 👌 و المزيد أترككم تكتشفو بأنفسكم 😍 هيا بنا لا أريد ان أطيل عليكم.

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

  1. سريع وخفيف.
  2. سهل التعديل عليه.
  3. يحتوي علي اكواد ( ميتا تاج ) قوية.
  4. صديق لمحركات البحث.
  5. يوجد العديد من القوائم المنسدلة.
  6. سلايد شو حسب التسمية.
  7. شريط أخر الاخبار تلقائي.
  8. زر الصعود إلي أعلي.
  9. نبذة عن الكاتب بشكل انيق أسفل المواضيع.
  10. مواضيع ذات صلة.
  11. متجاوب مع جميع الشاشات.
  12. و المزيد..



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


السلام عليكم زائرين مدونة كوليكا ويب💖، الكرام معانا اليوم إضافة سلايد شو تلقائي و أحترافي 😎 لجميع قوالب بلوجر، إن السلايد شو لا يحتاج منك خبرة كبيرة في التعامل مع الاكواد ✌ و سوف نتحدث عن إضافة السلايد شو بطريقة بسيطة لا أريد أن أطيل الحديث عليكم فـ هيا بنا👌.

طريقة التركيب لجميع قوالب بلوجر 😉
  1. أذهب إلي لوحة تحكم بلوجر.
  2. اضغط علي (التخطيط).
  3. أضافة أداة (HTML/JAVASCRIPT).
  4. و ضع بداخلها الكود التالي مع تغيير رابط المدونة.
  5. باللون الازرق : colica-web.blogspot.com بالرابط الخاص بك.👍

 

<style>

/* CSS Responsive Slider Recent Post https://colica-web.blogspot.com */

#featuredpost {margin: 10px 0;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:320px}

#slides li{width:50%;height:100%;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){right:0;top:0}

#slides li:nth-child(2){right:50%;width:25%;height:50%}

#slides li:nth-child(3){right:75%;width:25%;height:50%}

#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;

padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;

background:#0a7cd2;margin:0;text-align: center;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:droid arabic kufi;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:rgb(10, 124, 210);padding:3px 6px;font-family:tahoma;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}


@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}


@media only screen and (max-width:600px){

  #slides ul{height:600px}

  #slides li:nth-child(1){width:100%;height:50%}

  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}

  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}

  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}

  #slides li:nth-child(5){display:none;}}


@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

</style>

<div id="featuredpost"></div>

<script type="text/javascript" src="//cdn.rawgit.com/iHussam/ar1web/master/slider-rep.js">

</script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://colica-web.blogspot.com",

MaxPost:10,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false


});

});

//]]>

</script>


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

إضافة سلايد شو أحترافي و يعمل تلقائياً

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

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