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

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

    Social Items

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

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

Home / Colica-Web

تلبية طلب متابعينا الاعزاء سوف يتم شرح كيفية اضافة نسبة مئوية في الشريط الجانبي و اعتقد الكثير منكم لاحظ وجود الاضافة في العديد من القوالب هي اضافة خفيفة و جميلة و وتعطي نبذة عن تطورك و مدي اهتمامك بمدونتك علي الشريط الجانبي و هي مفيدة لانها تعلم الزائر عن مدي طول محتوي الصفحة و ذلك لان النسبة المئوية تزيد كلما نزل داخل الصفحة حتي 100% و عندما يصعد للاعلي تقوم بالعد من 100% الي 0% عدد تنازي الان هي بنا نتطرق الي كيف نقوم بـ اضافة نسبة مئوية في الشريط الجانبي.💖

طريقة التركيب
اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه ]]></b:skin> الان قم باضافة اكواد الـ CSS هذه قبلها ( فوقها ) :

 



#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#32C2A5;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#369fcf;
}


ملحوظة : الاكواد المحددة باللون الاحمر هي المسئولة عن الالوان داخل الاضافة يمكنك تغييرها تجد اكواد الالوان في هذه الصفحة (أكبر مكتبة للألوان).

ثاني خطوة ضع الكود التالي بعد ( اسفل ) <body>

 


<div id='scroll'></div>

الخطوة الاخيرة ضع الكود التالي قبل ( فوق ) </body>





<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>

إن واجهت اي مشكلة فا باب التعليقات مفتوح للجميع 😍


اضافة نسبة مئوية في الشريط الجانبي


اعزائي متابعين و زوار كوليكا ويب الاعزاء اليوم معانا، قالب بلوجر يمتلك الكثير من المزايا انه الافضل من حيث السرعة، و سهل التعديل عليه من التخطيط و بمزايا عديدة، و بعد الكثير من الفحوصات اظهرت ان هذا القالب صديق محركات البحث و سريع جداااااا في الارشفة كنت اقوم بأرشفة المواضيع في 5 دقائق اقسم لك لا اريد ان اطيل عليكم الحديث، تفضل بمعاينة سرعة القالب و انت سوف تتأكد من كلامي مبروك عليكم أسرع قالب في الارشفة في قوالب بلوجر ♥.
مميزات القالب
  1. سريع في الارشفة.
  2. سهل التركيب.
  3. أماكن لأضافة اعلانات.
  4. الوان مريحة للعين.
  5. سهولة التنقل داخل القالب.
  6. قوائم منسدلة.
  7. أزرار مشاركة الموضوع.
  8. مواضيع ذات صلة اسفل المشاركات.
  9. والمزيد...

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





قالب كوليكا ويب الاصدار السادس

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

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

 طريقة التركيب

اول خطوة الدخول علي : بلوجر > التخطيط > إضافة اداة > JavaScript/HTML
قم بوضع الكود التالي ثم قم بالحفظ

<script type='text/javascript'>
    var block = ['http://www.url.com/', 'http://url.com/', 'http://url.net/', 'http://url.live'];
    for (var b = block.length; b--;) {
        if (document.referrer.match(block[b]))
            window.location = "https://google.com/";
    }
</script>

قم باضافة اي موقع مشبوه بجانب الروابط باللون الاحمر
رابط ترحيل الزيارات الي الرابط باللون الاخضر و هوا الي جوجل

منع الزيارات الوهمية في بلوجر


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

اقرأ أيضاً : صفحة إتصل بنا بالماتيريال ديزاين

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </head> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :

<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'/>
 <style>
#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width: 600px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width: 601px) and (max-width: 992px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width: 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:2px;top:0;width:auto;clear:both;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;line-height:1.5em;word-break:break-all;background-color:#323232;padding:10px 25px;font-size:1.1rem;font-weight:300;color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.toast .btn,.toast .btn-large,.toast .btn-flat{margin:0;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width: 600px){.toast{width:100%;border-radius:0}}@media only screen and (min-width: 601px) and (max-width: 992px){.toast{float:left}}
</style>

 ثاني خطوة ضع الكود التالي قبل ( فوق ) </body> 

<script>
  var $toastContent = $(&#39;<span>أهلا بكم فى كوليكا ويب</span>&#39;);
  Materialize.toast($toastContent, 1500);
   var $toastContent = $(&#39;<span>ستجدون عندنا أغلب الاضافات للمدونات العربية</span>&#39;);
  Materialize.toast($toastContent, 2500);
   var $toastContent = $(&#39;<span>نتمنى ان تجدوا ماتبحثون عنه</span>&#39;);
  Materialize.toast($toastContent, 4000);
   var $toastContent = $(&#39;<span>جولة سعيدة ^_^</span>&#39;);
  Materialize.toast($toastContent, 5500);
</script>


الأن يمكنك تغيير الملون بـ البنفسجي بالكلام الدي تريده
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر

 ثم قم بالحفظ و مبروك الاضافة الجديدة

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


اضافة شريط تحميل اعلي المدونة مثل المواقع الكبيرة حسناً اعتقد مثل كوليكا ويب بالطبع 😂 اني امزح و يوتيوب و جوجل حسناً هيا نتطرق لنصبح من وسط هؤلاء المواقع الكبيرة و نقوم بإضافة شريط تحميل اعلي مدونات بلوجر 💖😎.

التركيب

اولاً الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </body> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :

/*----CODE-Loding-Scroll-Colica-Web----*/
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>
/*--------------------------------------------*/

التعديلات
التغيير حجم عرض شريط التحميل استبدل height :"2px"
الان لتغيير لون شريط التحميل استبدل #db3131 باللون الذي تريده و يمكنك استخدام اي لون يعجبك اضغط هنا مكتبة الالوان

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


اعزائي متابعينا و زائرين مدونة كوليكا ويب اليوم لدينا مقال مميز و هوا عن كيفية انشاء فورم توظيف علي مدونات بلوجر لا تقلق فا هوا ليس معقد و سهل جداً تركيب الاضافة دون اي تاثير علي اي شئ في المدونة سوف يكون له صفحة مستقلة حسناً يمكنك معاينة الاضافة الرائعة في اسفل المقال هي نتطرق الي شرح كيفية اضافة فورم توظيف علي بلوجر ♥

 طريقة التركيب

 اولاً الدخول علي : بلوجر > الصفحات : قم بالضغط علي انشاء صفحة جديدة.

 ثانياً قم بتبديل الي وضع HTML بدل وضع المؤلف ثم قم بمسح كل محتويات الصفحة.

ثالثاً قم بفتح الملف الذي قمت بتحميله و سوف تقوم ببعض التغييرات:
  1. قم بتغيير معرف المدونة ذلك 3176011237725819468 بالخاص بمدونتك
  2. ثم قم بتغيير رابط الموقع colica-web.blogspot.com الي رابط  مدونتك


رابعاً قم بوضع الاكواد الموجودة في الملف الذي قمت بتحميله كاملة ثم اضغط حفظ

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

كيفية اضافة نموذج توظيف علي بلوجر



طريقة التركيب

 اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </head> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :

 
<b:if cond='data:view.isHomepage'>
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
= sections-posts colica-web.blogspot.com
=====================================*/
.sections-posts{margin:15px auto}
.DivOne{width:calc(100% - 440px);height:380px;background:#fff;float:right;margin-left:10px;position:relative;direction:ltr;overflow:hidden}
.DivOne .owl-item>li{position:relative;height:380px}
.DivOne .owl-item>li img{height:auto;min-height:100%;width:100%}
.DivOne .owl-item>li .title{position:absolute;bottom:0;right:0;width:100%;color:#fff;z-index:10;direction:rtl;text-align:right;background:linear-gradient(transparent,#000);padding:280px 30px 30px 40px;font-size:20px;line-height:30px}
.DivOne .owl-item>li .description{position:absolute;bottom:40px;right:0;color:#ccc;z-index:100;direction:rtl;text-align:right;padding:30px;font-size:13px;line-height:22px}
.DivOne .owl-item>li span.ReadMore{position:absolute;bottom:25px;left:30px;background:#0c70dc;z-index:10;padding:4px 12px;border-radius:4px}
a.slider-next{position:absolute;top:50%;left:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
a.slider-prev{position:absolute;top:50%;right:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
.outer-left{float:left;width:430px}
.outer-left>a .title{float:right;padding:10px 15px 15px;color:#212121;height:90px;width:calc(100% - 120px);font-size:13px;line-height:23px}
.outer-left>a span{position:absolute;left:10px;top:21px;text-align:center;font-size:42px;color:#ff7f00}
.outer-left>a img{width:90px;float:right;height:100%}
.outer-left>a{display:block;height:93px;background:#fff;overflow:hidden;position:relative;margin-bottom:3px}
/*]]>*/
</style>
</b:if>


ثاني خطوة ضع الكود التالي قبل ( فوق ) </body> 

 
<script type='text/javascript'>     window.setTimeout(function() {         document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);       }, 10);   </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> $.each($(&#39;a[name]&#39;), function(i, e) { var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;DrROloading&#39;); var blogStats = new Firebase(&quot;https://elprof.firebaseIO.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); blogStats.once(&#39;value&#39;, function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr(&#39;name&#39;); isnew = true; } elem.removeClass(&#39;DrROloading&#39;).text(data.value); data.value++; if(window.location.pathname!=&#39;/&#39;) { if(isnew) blogStats.set(data); else blogStats.child(&#39;value&#39;).set(data.value); } }); }); </script>
الان ضع الكود التالي في المكان الذي تريد ضهور فيه الاضافة

<div class='container sections-posts' data-num='10'></div>

يمكنك التعديل على عدد ضهور المواضيع عبر التغيير الرقم الذي ب الاخضر

كيفية اضافة اخر المواضيع بطريقة احترافية لمدونات بلوجر


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

 تركيب الإضافة :

 الإضافه بسيطه ثلاث أكواد أولأ كود CSS
والذى سوف تقوم بوضعه فوق هذا الوسم  ]]></b:skin>  فى مدونتك.

 
/* archive page*/
html[dir="rtl"] .colica-web-archive{font-style:normal}
html[dir="rtl"] .colica-web-archive .item{overflow:hidden;margin-bottom:10px}
html[dir="rtl"] .colica-web-archive .archive-thumb{float:right;margin-left:20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
html[dir="rtl"] .colica-web-archive .archive-href{text-decoration:none;display:block;font-size:16px;font-weight:700;color:#444444}
html[dir="rtl"] .colica-web-archive .archive-qism:before{font-family:fontawesome;font-size:14px;display:inline-block;color:#fff;content:"\f02c";font-weight:400;background:#ce0a46;background:-webkit-linear-gradient(-15deg,#ce0a46,#e98125);background:-o-linear-gradient(-15deg,#ce0a46,#e98125);background:-webkit-linear-gradient(-75deg,#ce0a46,#e98125);background:-o-linear-gradient(-75deg,#ce0a46,#e98125);background:linear-gradient(-15deg,#ce0a46,#e98125);width:46px;height:100%;position:absolute;text-align:center;padding-top:12px;top:0;right:0;font-size:22px;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0}
html[dir="rtl"] .colica-web-archive .archive-qism{padding-right:60px;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;border-left:5px solid #d0021b;display:block;font-size:20px;font-weight:700;margin-top:20px;background-color:#eeeeee;padding:5px 30px;margin-bottom:10px;height:57px;position:relative;line-height:1.5em}
html[dir="rtl"] .colica-web-archive .archive-qism b{font-size:19px;padding:0 27px;margin:7px auto;display:inline-table}
html[dir="rtl"] .colica-web-archive .archive-qism-num{position:absolute;font-size:14px;background-color:rgba(0,0,0,0.1);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-weight:700;top:-webkit-calc(50% - 20px);top:-moz-calc(50% - 20px);top:calc(50% - 20px);left:20px}
html[dir="rtl"] .colica-web-archive .archive-qism-num u{text-decoration:none;margin:0 2px}
html[dir="rtl"] .colica-web-archive .archive-date{display:inline-block;vertical-align:top;font-size:10px;padding:0 10px;-webkit-border-radius:300px;-moz-border-radius:300px;border-radius:300px;margin-bottom:8px;font-weight:700;line-height:2em}
html[dir="rtl"] .colica-web-archive .archive-date{color:#bdbdbd;margin-left:5px;font-size:12px}
html[dir="rtl"] .colica-web-archive .archive-date i{margin:0 4px}
html[dir="rtl"] .colica-web-archive .archive-href:hover{color:#d0021b}
/*ltr*/
html[dir="ltr"] .colica-web-archive{font-style:normal}
html[dir="ltr"] .colica-web-archive .item{overflow:hidden;margin-bottom:10px}
html[dir="ltr"] .colica-web-archive .archive-thumb{float:left;margin-right:20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
html[dir="ltr"] .colica-web-archive .archive-href{text-decoration:none;display:block;font-size:16px;font-weight:700;color:#444444}
html[dir="ltr"] .colica-web-archive .archive-qism:before{font-family:fontawesome;font-size:14px;display:inline-block;color:#fff;content:"\f02c";font-weight:400;background:#ce0a46;background:-webkit-linear-gradient(15deg,#ce0a46,#e98125);background:-o-linear-gradient(15deg,#ce0a46,#e98125);background:-webkit-linear-gradient(75deg,#ce0a46,#e98125);background:-o-linear-gradient(75deg,#ce0a46,#e98125);background:linear-gradient(15deg,#ce0a46,#e98125);width:46px;height:100%;position:absolute;text-align:center;padding-top:12px;top:0;left:0;font-size:22px;-webkit-border-radius:100px 0 0 100px;border-radius:100px 0 0 100px}
html[dir="ltr"] .colica-web-archive .archive-qism{padding-left:60px;-webkit-border-radius:100px 0 0 100px;border-radius:100px 0 0 100px;border-right:5px solid #d0021b;display:block;font-size:20px;font-weight:700;margin-top:20px;background-color:#eeeeee;padding:5px 30px;margin-bottom:10px;height:57px;position:relative;line-height:1.5em}
html[dir="ltr"] .colica-web-archive .archive-qism b{font-size:19px;padding:0 27px;margin:7px auto;display:inline-table}
html[dir="ltr"] .colica-web-archive .archive-qism-num{position:absolute;font-size:14px;background-color:rgba(0,0,0,0.1);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-weight:700;top:-webkit-calc(50% - 20px);top:-moz-calc(50% - 20px);top:calc(50% - 20px);right:20px}
html[dir="ltr"] .colica-web-archive .archive-qism-num u{text-decoration:none;margin:0 2px}
html[dir="ltr"] .colica-web-archive .archive-date{display:inline-block;vertical-align:top;font-size:10px;padding:0 10px;-webkit-border-radius:300px;-moz-border-radius:300px;border-radius:300px;margin-bottom:8px;font-weight:700;line-height:2em}
html[dir="ltr"] .colica-web-archive .archive-date{color:#bdbdbd;margin-right:5px;font-size:12px}
html[dir="ltr"] .colica-web-archive .archive-date i{margin:0 4px}
html[dir="ltr"] .colica-web-archive .archive-href:hover{color:#d0021b}



الكود الثانى هو كود الـ js
والذى سوف تقوم بوضعه فوق الوسم  </body>  فى مدونتك.
وبعد ذلك تقوم بحفظ القالب.


<b:if cond='data:view.isPage'>
<script type='text/javascript'>
//<![CDATA[
var textmonth = ["يناير","فبراير","مارس","أبريل","مايو","يونيو"," يوليو"," أغسطس","سبتمبر","أكتوبر","نوفمبر"," ديسمبر"];
var noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fDHg0k-vJ1PYf1UyU7wLeo1xXcLsx2RXFyYZUwaKOihLg75pHGmnulJLi2fSmYk-Z6hJpR38Y6cO3td9jwEM2UaW7-W9O_oieGN0IWt0M-10iMsB3FiYn48jUAQuq5kH6j2SNJ2ohiEI/s1600/noimg.png";
var textscript ="مشاركة";
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/abdoutech-archive.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
//]]>
</script>
</b:if>



الكود الثالث سوف تقوم بوضعه فى وضع HTML عندما تقوم بانشاء صفحة للأرشيف. ♥
<i class="colica-web-archive"></i>

إضافة صفحة ارشيف في بلوجر


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

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </head> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :


<b:if cond='data:view.isPost'>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
=  Page Navigation
=====================================*/
div#pager-body-out br:first-of-type{display:none}
#pager-body-out a:hover{text-decoration:underline}
#pager-body-out a{color:#2c82c9}
.page-navigation{position:relative;clear:both;overflow:hidden;margin-top:15px;padding:25px}
#pager-page-number{padding-top:5px}
#pager-prev{float:right;border-radius:0 5px 5px 0}
#pager-next,#pager-prev{background:#fff;display:inline-block;cursor:pointer;margin:3px!important;-webkit-box-shadow:0 1px 3px 1px rgba(60,64,67,0.15),0 1px 2px 0 rgba(60,64,67,0.3);box-shadow:0 1px 3px 1px rgba(60,64,67,0.15),0 1px 2px 0 rgba(60,64,67,0.3);border-radius:50px}
.pager-next-prev a{display:block}
#pager-prev span:nth-child(1){float:left;font-size:15px;line-height:36px;position:relative;padding:4px 25px 2px 15px}
#pager-prev span:nth-child(1):before{top:0;right:-11px;content:"\f105";font-family:fontawesome;background-color:#0c37de;color:#ffffff;padding:8px 0;width:25px;height:25px;line-height:11px;display:inline-block;border-radius:100px;text-align:center;font-size:14px;position:relative;transition:all 0.3s ease;margin-left:4px}
#pager-next span:nth-child(1):before{top:0;left:-81px;content:"\f104";font-family:fontawesome;background-color:#0c37de;color:#ffffff;padding:8px 0;width:25px;height:25px;line-height:11px;display:inline-block;border-radius:100px;text-align:center;font-size:14px;position:relative;transition:all 0.3s ease;margin-left:4px}
.pager-next-prev span{font-size:30px;color:#585858}
#pager-prev span:nth-child(2){float:right;line-height:45px}
#pager-next{float:left;margin:0}
#pager-next span:nth-child(1){float:right;font-size:15px;line-height:35px;padding:3px 0 3px 52px;position:relative}
#pager-next span:nth-child(2){float:left;line-height:45px}
#pager-page-number{text-align:center;color:#ffffff;font-size:17px;line-height:30px;display:block;margin:0 auto;width:43px;height:42px;background:#0c37de;border-radius:50px;border:1px solid #ddd}
#pager-next:hover,#pager-prev:hover{background:#0c37de}
#pager-next span,#pager-prev span{color:#0c37de}
#pager-next:hover span,#pager-prev:hover span,#pager-next:hover span:before,#pager-prev:hover span:before{color:#fff}
#pager-next,#pager-prev{transition:all 0.3s}
#pager-next:hover span:before,#pager-prev:hover span:before{background:#fff;color:#0c37de}
/*]]>*/
</style>
</b:if>


ثاني خطوة ضع الكود التالي قبل ( فوق ) </body>

 
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".page-navigation").each(function(){if($(".post-body").html().match("_split")){var a=function(a){var b,c,d=decodeURIComponent(window.location.search.substring(1)),f=d.split("&");for(c=0;c<f.length;c++)if(b=f[c].split("="),b[0]===a)return!(void 0!==b[1])||b[1]},b=a("page"),c=$("#pager-next"),d=$("#pager-prev"),e=$(".post-body2").prop("innerHTML").split("_split"),f=$(this);f.show(),$(".post-body").remove();var g=$("#pager-body-out"),h=$("#pager-page-number");if(void 0===b||1==b)d.hide(),c.find("a").attr("href","?page=2"),g.html(e[0]),h.html("1");else{b=parseInt(b),e.length<=b&&c.hide();var i=b+1,j=b-1;c.find("a").attr("href","?page="+i),d.find("a").attr("href","?page="+j),g.html(e[j]),h.html(b)}}})});
//]]>
</script>
</b:if>

ثالث خطوة نبحث في القالب على  <data:post:body/> ستجده مكرر اكثر من مرة لانه يوجد في بعض القوالب الاولى مخصصة للصفحة الرئيسية و الثانية لصفحة الموضوع و الثالثة لصفحات حسب القالب.
عندما تجدها سوف تجد معها div  مثل تلك

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'><data:post.body/></div>

ضع الكود التالي اسفل هذا الكود يعني اسفل الـ </div>


<b:if cond='data:view.isPost'>
<div class='content-post' id='pager-body-out'/>
<div class='page-navigation' style="display:none">
<div class='pager-next-prev' id='pager-prev'>
<a><span>
السابق
</span><span class='siki-prev'/></a></div>
<div class='pager-next-prev' id='pager-next'>
<a><span>
التالي
</span><span class='siki-next'/></a></div>
<div id='pager-page-number'/>
</div>
</b:if>


انتهيناً احفظ القالب وإذا اردت اضافة تقسيم لموضوع تذهب الى الموضوع وتضع هذا الكود بين كل تقسيم تريده _split

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

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


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

 تركيب اللإضافة

 الإضافه بسيطه ثلاث أكواد أولأ كود CSS
والذى سوف تقوم بوضعه فوق هذا الوسم ]]></b:skin> فى مدونتك.

 
kbd {
  position: relative;
  color: #FFFFFF;
  background-color: #7986CB;
  margin: 0 5px 0 5px;
  padding: 0 5px 4px 5px;
  border-radius: 2px;
  line-height: 14px;
}
kbd:before {
  position: absolute;
  content: 'اضغط مرتين لتحديد';
  display: table;
  bottom: 40px;
  left: 0;
  background: #7986CB;
  color: #fff;
  padding: 4px;
  border-radius: 2px;
  font-size: 75%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  z-index: 2;
  transition: all .3s;
  height: 25px;
  line-height: 11px;
}


 الكود الثانى هو كود الـ js
والذى سوف تقوم بوضعه فوق الوسم </body> فى مدونتك.
وبعد ذلك تقوم بحفظ القالب.

 
<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("kbd"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>

 الكود الثالث سوف تقوم بوضعه فى وضع HTML عندما تقوم بكتابة موضوع جديد.


<kbd>ضع الوسم هنا</kbd>


والكود سوف تجده داخل الجمله وهكذا سوف تقوم بوضعه فى موضوعك.
مبروك عليك الاضافة ♥

كيفية اضافة صندوق للوسم داخل المواضيع بلوجر


السلام عليكم متابعينا الاعزاء في مدونة كوليكا ويب اليوم لدينا قالب انيق للمدونات التقنية الؤلؤة السوداء انه قالب متجاوب و سريع و متوافق مع متطلبات السيو و هوا في الاصل قالب اجنبي تم تعريبة لكن هذه المرة قالب الؤلؤة السوداء بدون حقوق لاعزائنا متابعين المدونة والزائرين برجاء اذا واجهتك اي مشكلة قم بطرحها في التعليقات قم بمتابعة المدونة لدعمها ♥
المميزات

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

قالب الؤلؤه السوداء الاصدار الثاني بدون حقوق


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

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




قالب كوليكا ويب الاصدار الخامس بدون حقوق


السلام عليكم اعزائي متابعين مدونة كوليكا ويب اليوم نأتي بشرح مميز و هوا اضافة صناديق مميزة و احترافية لعرض الاكواد بداخليها في مدونات بلوجر و هي تدعم العديد من اللغات البرمجية مثل Css – HTML – JavaScript – JQuery و تحتوي علي العديد من المميزات مثل التحديد بمجرد الضغط مرتين فقط لسهولة النسخ و يمكن النسخ ما بداخلها حتا اذا كنت تعطل التحديد في مدونتك و ذلك يعود الي تميزها و احترافيتها و تحتوي علي اربع الوان مختلفة مثل الصورة المرفقة في التدوينة و الان دعنا ندخل الي شرح و لا تقلق سهلة الاضافة ♥

 ملحوظة مهمة : قم باخذ نسخة من القالب قبل التعديل حرصاً علي عدم حدوث مشاكل
يمكن يحتاج قالبك الي تحويل الاكواد قبل تركيبها : اضغط هنا لتحويل الاكواد

 اولاً قم بالدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه ]]></b:skin> الان قم باضافة هذه الاكواد قبلها ( فوقها ) : 

 

/* (https://colica-web.blogspot.com )CSS Pre-Code Syntax Highlighter */
pre {
padding: 50px 10px 10px 10px;
margin: .5em 0;
white-space: pre;
word-wrap: break-word;
overflow: auto;
background-color: #2c323c;
position: relative;
border-radius: 4px;
max-height: 500px;
font-family: sans-serif;
clear: both;
}
pre::before {
font-size: 16px;
content: attr(title);
position: absolute;
top: 0;
background-color: #eee;
padding: 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: block;
margin: 0 0 15px 0;
font-weight: bold;
text-align: left;
}
pre::after {
content: 'اضغط مرتين لنسخ الكود';
padding: 2px 10px;
width: auto;
height: auto;
position: absolute;
right: 8px;
top: 8px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}
pre:hover::after {
opacity: 0;
top: -8px;
visibility: visible;
}
code {
font-family: Consolas,Monaco,'
Andale Mono','Courier New',Courier,Monospace;
line-height: 16px;
color: #88a9ad;
background-color: transparent;
padding: 1px 2px;
font-size: 12px;
}
pre code {
display: block;
background: none;
border: none;
color: #e9e9e9;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
font-weight: bold;
}
code .token.punctuation {
color: #ccc;
}
pre code .token.punctuation {
color: #fafafa;
}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
color: #777;
}
code .namespace {
opacity: .8;
}
code .token.property,code .token.tag,code .token.boolean,code .token.number {
color: #e5dc56;
}
code .token.selector,code .token.attr-name,code .token.string {
color: #88a9ad;
}
pre code .token.selector,pre code .token.attr-name {
color: #fafafa;
}
pre code .token.string {
color: #40ee46;
}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
color: #ccc;
}
code .token.operator {
color: #1887dd;
}
code .token.atrule,code .token.attr-value {
color: #009999;
}
pre code .token.atrule,pre code .token.attr-value {
color: #1baeb0;
}
code .token.keyword {
color: #e13200;
font-style: italic;
}
code .token.comment {
font-style: italic;
}
code .token.regex {
color: #ccc;
}
code .token.important {
font-weight: bold;
}
code .token.entity {
cursor: help;
}
pre mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
pre code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
.comments pre {
padding: 10px 10px 15px 10px;
background: #2c323c;
}
.comments pre::before {
content: 'Code';
font-size: 13px;
position: relative;
top: 0;
background-color: #f56954;
padding: 3px 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: inline-block;
margin: 0 0 10px 0;
font-weight: bold;
border-radius: 4px;
border: none;
}
.comments pre::after {
font-size: 11px;
}
.comments pre code {
color: #eee;
}
.comments pre.line-numbers {
padding-left: 10px;
}
pre.line-numbers {
position: relative;
padding-left: 3.0em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.5em;
width: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding: 0;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
transition: 350ms;
}
pre[data-codetype='CSSku']:before {
background-color: #00a1d6;
}
pre[data-codetype='HTMLku']:before {
background-color: #3cc888;
}
pre[data-codetype='JavaScriptku']:before {
background-color: #ff3c41;
}
pre[data-codetype='JQueryku']:before {
background-color: #e5b460;
}


 ثانياً ضع الكود التالي قبل ( فوق ) </body>

 
<script data-src='//tapseet.github.io/www.tapseet.com/preline.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
// Line Numbers
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
//<![CDATA[
// Selection
for(var pres=document.querySelectorAll(“pre,kbd,blockquote,td”),i=0;i<pres.length;i++)pres[i].addEventListener(“dblclick”,function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>
</b:if>

 اخيراً قم بالحفظ و مبروك عليك الاضافة الاحترافية اذا واجهتك اي مشكلة برجاء تركها بالتعليقات او راسلنا علي صفحة الفيسبوك او عبر صفحة اتصل بنا ♥
حسناً عندما تريد وضع صندوق ما او جميع الصناديق يكون اثناء كتابه تدوينه تقوم بوضع الكود الذي تريده في تبويب Html

 


ضع هنا كود الـHTML


ضع هنا كود الـCss


ضع هنا كود الـJavascript


ضع هنا كود الـjQuery


صناديق عرض الاكواد في بلوجر بشكل جذاب


السلام عليكم زائرين و متابعين كوليكا ويب اليوم سوف نشرح تعديل شكل التخطيط و جعله متناسق و جذاب بدل الموجود في القالب بتاعك لو شكله ممل او فيه مشاكل هذا سوف يحل المشكلة لانه كود CSS عام بمعني يعمل علي اي قالب سواء معرب او مجاني او مدفوع برجاء اتخاذ نسخة احتياطية قبل اجراء اي تعديل لضمان عدم حدوث مشاكل هي بنا نتابع الشرح معاً ♥

طريقة تغيير تصميم التخطيط في مدونة بلوجر


اولاً ادخل علي بلوجر > المظهر > تعديل HTML 
ثم انظر للقالب سوف تجد كود مشابه لهذا الكود :
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html b:version='2' class='v2' dir='rtl' 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'>


 حسناً الان انظر الي b:version='2' اذا وجدتها كذلك فا هذا ممتاز اذا كانت اقل فا اجعلها هاكذا

الان ابحث عن </b:skin> عن طريق الضغط علي Ctrl + F ثم ابحث الان قم باضافة هذا الكود بعدها ( اسفلها ):


<b:template-skin>
body#layout {
background: rgba(51,51,51,1);
    background: -moz-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
    background: -webkit-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
    border: 1px solid #312F2D;
}
body#layout .section {
    background-color: rgba(54, 54, 54, 0.5) !important;
    border: 1px solid rgba(51, 51, 51, 0.5) !important;
}
body#layout .section h4 {
    color: #E6E6E6!important;
}
body#layout .widget-wrap2 {
    background: #984949!important;
}
body#layout .add_widget {
    background-color: rgba(51, 51, 51, 0.5)!important;
    border: 1px dashed rgba(74, 73, 73, 0.79)!important;
}
body#layout .add_widget a,body#layout div.layout-title {
    color: #B9B9B9!important;
    font: 11px tahoma!important;
}
body#layout .draggable-widget .widget-wrap3 {
 background: rgba(51,51,51,1);
    background: -moz-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
    background: -webkit-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: linear-gradient(135deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
}
body#layout .widget-content {
    border: 1px solid #353535!important;
}
body#layout .widget-content a {
    text-decoration: none;
    color: #B9B9B9!important;
    font: 11px tahoma !important;
    background-color: #333;
    padding: 2px 10px;
    border-radius: 5px;
}
body#layout .locked-widget .widget-content {
    background: rgba(51,51,51,1);
    background: -moz-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: linear-gradient(135deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
}
</b:template-skin>

الان قد انتهينا مبروك عليك المظهر الجديد للتخطيط بالتوفيق ♥

ملحوظة : اذا واجهتك مشكلة في اختلاف عرض القالب او اي مشكلة في المظهر بتاع القالب قم بالبحث عن </b:skin> و قم باضافة هذا الكود قبلها ( فوقها )

.post-body ul {
    padding: 0!important;
    margin: 0!important;
    line-height: auto!important;
}

كيفية اضافة شكل جديد للتخطيط في بلوجر


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


شرح حذف شريط التمرير السفلي :


اولاً نقوم بالدخول الي المظهر > تعديل Html > و نضغط Ctrl + F للبحث
ثم البحث عن هذا الكود ]]></b:skin>

ثانياً نضع هذا الكود قبله (فوقه):

 html {overflow-x: hidden;}

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

كيفية حذف شريط التمرير السفلي

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

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

 إقرأ أيضاً : سكربت منع تحديد و نسخ مقالات الموقع.

 الشرح:
1- قم بالدخول الي المدونة > التخطيط > اضافة اداة > اختار Html/JavaScript
2- قم بوضع الكود التالي :

 

<script>
<!--// Code By colica-web// For full source code, visit https://colica-web.blogspot.comvar message="لنقل الاكواد اضغط ctrl + c من لوحة المفاتيح // -->
var message="لنقل الاكواد اضغط ctrl + c من لوحة المفاتيح !";
function clickIE4(){if (event.button==2){alert(message); return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function("alert(message);return false")</script>


3- اضغط حفظ و مبروك عليك الاضافة عزيزي المتابع/الزائر ♥

 إذا استفدت بشئ ولو بالقليل شرفنا بتعليقك المحفز او متابعة المدونة او مشاركتها ليستفيد غيرك.

كيفية منع كلك يمين في بلوجر

السلام عليكم اعزائنا متابعين كوليكا ويب، اليوم سوف نشرح طريقة منع كليك يمين و تظليل عن المواضيع فقط و ليس الصناديق و الاقتباسات و ذلك مفيد جداً بالخص اذا كنت تريد التصدر و عدم سرقة محتواك، لكن عليا ان اذكرك انه لا يوجد حماية بنسبة 100% لكن مجرد تصعيب الامر للذين لا يملكون خبرة في البرمجة. ❤

المميز في هذا الاسكربت : منع تحديد و نسخ المواضيع بطريقة جديدة و فريدة من نوعها المرة دي مش كود جافا سكربت كا المعتاد هذا كود CSS لكن له فاعلية اكبر و اهم، يضاف من تحرير القالب و اذا واجهتك اي مشكلة او لديك سؤال قم بالكتابة لنا في صندوق التعليقات اسفل المقال.
إقرأ أيضاً : إضافة منع كلك يمين في بلوجر.
شرح الاكواد: 
1- كود منع تحديد النص بالموقع
2- كود منع سرقة صور المواضيع
3- كود يسمح بالتحديد الاقتباسات و الصناديق و الجداول و الاكواد الصغيرة

شرح التركيب:
1- توجه الي المدونة > القالب > تحرير HTML
2- قم بالبحث باستخدام Ctrl + F عن وسم ]]></b:skin> او <style/> و قم بوضع الاسكربت قبل الوسم (فوقه مباشر)



body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.separator a,.post-body img{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}
pre,kbd,blockquote,table{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}



سكربت منع تحديد و نسخ المواضيع

الاشتراك في: التعليقات (Atom)

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