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

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

    Social Items

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

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


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

التركيب

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


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




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

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

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






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

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