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

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

    Social Items

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

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

Home / All Post

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

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

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

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

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


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

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

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

القالب الذي يبحث عنه الجميع منذ فترة قالب سيو بلس الاصدار الخامس لمدونات بلوجر القالب اكثر من رائع قام المصمم المحترم لقالب سيو بلس باطلاق الاصدار الجديد وهو الاصدار الخامس لقالب seo plus v5 حيث ان هذا التحديث يضيف العديد من المزايا و الاستخدام وقد صمم بشكل انيق وجذاب ليتوافق مع جميع الاجهزة والمتصفحات ولذلك كما راينا في الاصدار السابق من سيو بلس الإصدار الرابع ان القالب يتمتع بسرعة هائلة وصديق ايضا لمحركات البحث و متوافق لمن يهتم لامر الـ سيو SEO.



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

المميزات
  1. سحب تلقائى لجميع اكواد الميتا تاج حسب المواصفات لمحرك البحث.
  2. وضع اعلانات المدونة من التخطيط.
  3. خاصية اقرأ المزيد تلقائى داخل المقالات.
  4. صندوق عناوين ومحتويات داخل المقاله.
  5. خاصية الوضع الليلى {الجديدة}.
  6. اضافة منع نسخ المحتوى لعدم سرقة محتوى المدونه.
  7. صفحة اعاده التوجيه بطريقة مختلفة وسهوله وضع الاعلانات بها.
  8. صفحة اتصل بنا.
  9. خاصية اظهار واخفاء اى اضافة فى القالب.
  10. الحد من استخدام اكواد CSS , Javascript وضغطها.
  11. خاصية عرض المقالات بالتسميات بطريقة جديده فى الرئيسية.
  12. سيو بلس متجاوب ومحسن لجميع محركات البحث.
  13. يحتوى على جميع الاكواد بدون اى خطأ.
  14. يحتوى على هيدر متجاوب يعمل على جميع الشاشات بدون اى مشاكل.
  15. يمكنك عمل الاقسام متجاوبة.
  16. عرض المواضيع على الصفحة الرئيسية باشكال مختلفة.
  17. جميع ازرار مشاركة الخاصة بمواقع التواصل الاجتماعى.
  18. يحتوى على صندوق وصف للكاتب بشكل انيق وجذاب.
  19. صفحة ارشيف المدونه بشكل جديد.
  20. تقسيم المقال لاكثر من صفحة لزيادة ارباحك.
صور لقالب سيو بلس الاصدار الخامس افضل قالب بلوجر


هذه صورة اعادة توجيه قالب سيو بلس الاصدار الخامس

صورة ارشيف قالب سيو بلس الاصدار الخامس






شرح تركيب القالب من هنا 

قالب سيو بلس الاصدار الخامس V5 قوالب بلوجر



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

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

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

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

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