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

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

    Social Items

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

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

Home / إضافات بلوجر

من الناحية الفنية،اذا قام احد الزوار بنسخ من موقع معين، فعلية تقديم رابط المصدر الموقع الذي ينسخ النص منه، لكن هناك اشخاص يتجاهلون هذه الشيء المهم، لذالك احببت ان اقدم لكل من يعاني من مشكلة سرقة نصوص موقعه دون ذكر المصدرهذه الكود الذي سيفي بالغرض.
طريقة التركيب
من لوحة التحكم 
الى التخطيط
اضافة اداة
 اختر اداة 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>
كرر الكود كلما اردت سطر اضافي.

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



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

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

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

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

فتات الخبز إضافة هامه جدا للمواقع فى السيو وتحسين الموقع لمحركات البحث ، واليوم فى هذا الموضوع سوف أقدم لكم إضافة فتات الخبز 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>

تعديلات.

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

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


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

طريقة التركيب لجميع قوالب بلوجر 😉
  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)

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