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

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

    Social Items


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

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

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





قالب Magify معرب متعدد الاستخدام


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

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





<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}
</style>
</b:if>


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

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


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


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


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


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

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

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


/* CSS Notification commente Disqus by: colica-web.blogspot.com */
.header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}
.header-1 h4{font-size:15px;float:right;margin:-5px 0;color:#555}
.header-1 img{float:left}
.notif-show{position:fixed;top:10px;right:10px;z-index:9999999;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px}
#disqus-notif.active{right:0}
#disqus-notif{position:fixed;background:#fff;z-index:9999999;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:9999999;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;left:100%;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}
.close-1{position:fixed;margin-right:31%;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}
#RecentComments{display:block;width:100%;margin:0 auto;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:10px 0px 7px 10px;width:32px;height:32px;padding:0;float:right;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e9fff;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}
#RecentComments li.dsq-widget-item{margin:0;padding:4px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;margin-top:8px;color:#2e9fff;font-weight:700;font-size:14px}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:&#39;&#39;;font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}


ثانياً قم بالبحث علي <body/> 
الان قم باضافة هذه الاكواد قبلها ( فوقها ) :


<a class='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span class='count-1'> جديد ! </span></a>
<div id='overlay-1'></div>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='إغلاق'>&#215;<span class='close-text'>إغلاق</span></a>
<div class='header-1'><h4>إشعارات</h4><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkvaMUvcj9OpBIEkBu6nXGs6tRP0mdJsreZYBECEleNCQ9D4PIuWInyULxMLP3F9BEq89zh2zBsSrXWSXUhZpAvL1lx_kzBDNAKJLcmacRdyh58kl-SYWQbBySbNqm17MtYtvCY5FhWGM/s1600/disqus-1.png'/></a></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ColicaWeb.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
</div> 


ملحوظة : قم بتغيير ColicaWeb بمعرف ديسكس الخاص بك.

ثالثاً قم بالبحث عن <body/> ضع فوقه قبله هذه الاكواد:


<script type='text/javascript'>
//<![CDATA[
// Notifcthion Colica-Web Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
//]]>
</script>

في حالة مواجهة مشكلة عدم ظهور ايقونة الاشعار في الاضافة هذا لعدم وجود مكتبة Awesome في قالبك و لاضافتها قم بالبحث عن <body> و ضع هذا الرابط فوقها.

<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>

إذا واجهك اي شئ قم بطرحه في التعليقات.


اضافة تعليقات ديسكس بطريقة احترافية ( زر عائم )


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

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

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


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

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

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



قالب ماتريال ويب اخر اصدار


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

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


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

اول خطوة الدخول علي : بلوجر > المظهر > تحرير 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> 


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

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

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

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