‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل

بوبليشر قالب بلوجر احترافي و متجاوب النسخة المدفوعة مجانا

سبتمبر 05, 2018 اضف تعليق
السلام عليكم و رحمة الله تعالى و بركاته متتبعي مدونة بصمة تقنية في تدوينة جديدة ضمن قسم قوالب بلوجر اليوم سوف اقدم لكم القالب الغني عن التعريف بوبليشر و هو قالب مدفوع بالاساس و لكن في هده المدونة لا شيئ مدفوع و كل ما يوجد في هده المدونة من قوالب و اضافات لا يوجد بها اي حقوق او اي شيئ من هدا القبيل فنحن هدفنا مساعدة الدونين الناشئين و ليس استغلالهم للحصول على زيارات او باك لينكس عن طريقهم فكفانا احتكارا هدا القالب هو من اجمل القوالب فهو يتميز بالبساطة الى جانب التصميم العصري فهو يمكن الزائر من اخقاء او اظهار القائمة الجانبية و كدلك التحكم في عرض التدوينات كما انه يمكن الزائر من تفعيل الوضع الليلي و هدا اكتر ما جدب انتباهي كما سيجدب انتباهك و انتباه زوار مدونتك لن اطيل عليكم في الكلام و اجعل هده المقدمة مملة سننتقل الى المعاينة

مميزات القالب 
سريع و متجاوب مع جميع الشاشات 
يدعم الرتينا فقد تم الاستغناء عن الصور باستخدام المتجهات و الايقونات فائقة الجودة
يدعم الاتصال المشفر HTTPS
متوافق مع معايير السيو و قواعد الارشفة 
مساحات اعلانية داخل المواضيع 
يدعم التعليق عن طريق الفيسبوك بلوجر او حتى ديسكيس 
اداة مشاركة المواضيع على مواقع التواصل الاجتماعي و الواتس اب 
قائمة جانبية تظهر عند الضغط عليها تمكن الزائر من : تفعيل و تعطيل الوضع الليلي و التحكم في شكل التدوينات
تحكم شبه كامل في القالب عن طريق التخطيط و دون الحاجة الى التعامل مع الاكواد 

واجهة القالب كاملة 




و بخدا نكون قد وصلنا الى نهاية هده التدوينة ادا واجهتك اي مشكلة او لأي استفسار فباب التعليقات مفتوح دائما 

قالب تقني احترفي و مهيئ لمحركات البحث لمدونات بلوجر

سبتمبر 02, 2018 4 تعليقات

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


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

واجهة القالب

رابط تحميل القالب

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

اضافة كاشف مانع الاعلانات لمدونات بلوجر بشكلين جديدين

سبتمبر 01, 2018 اضف تعليق

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



طريقة اضافة كاشف مانع الاعلانات الى مدونتك
من لوحة تحكم المدونة قم بالتوجه الى قالب تم تحرير HTML
قم باخد نسخة احتياطية لقالب المدونة قبل القيام باي خطوة تفاديا لاي اخطاء قد تقوم بها 
الان قم بالبحت على الوسم <body> عبر الظغط على Ctrl+F
اختر احد الشكلين تم ضع الكود اسفله


<div class='adblockInfo'>
<div class='adblockInfo__container'>
<div class='adblockInfo__cover'>
<img class='adblockInfo__cover__img' src='https://freeiconshop.com/wp-content/uploads/edd/stop-flat.png'/></div>
<h3 class='adblockInfo__title'>
تم الكشف عن مانع الإعلانات</h3>
<p class='adblockInfo__text'>
الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك.
شكرًا لك على الدعم ❤️
</p>
<div class='bottom'>
<ul class='ar1web-social' id='ar1web-social'>
<li><a class='social-tooltip fb' href='#' target='_blank' title='صفحتنا على الفيسبوك'><i class='fa fa-facebook'></i></a></li>
<li><a class='social-tooltip tw' href='#' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i></a></li>
<li><a class='social-tooltip gp' href='#' target='_blank' title='حسابنا'><i class='fa fa-instagram'></i></a></li>
<li><a class='social-tooltip yt' href='#' target='_blank' title='اشترك بقناتنا'><i class='fa fa-youtube'></i></a></li>
</ul>
</div>
</div>
</div>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css?family=Changa');

@-webkit-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@-moz-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

.adblockInfo{width:100%;height:100%;position:fixed;top:0;left:0;z-index:900;display:none}
.adblockInfo.is-active{display:block}
.adblockInfo__container{top: calc(50% - 40%); max-width: 350px; font-size: 16px; text-align: center; box-shadow: 0 6px 5px -5px rgba(0,0,0,.5); margin: 0 auto;font-family: 'Changa', cursive;}
.adblockInfo__container,.adblockInfo__title{position:relative;z-index:10}
.adblockInfo__title{padding:1em 2em;font-size:1.2em;margin:0}
.adblockInfo__text{padding: 1em; font-size: 1em; line-height: 2; text-align: center;}
.adblockInfo__cover__img { width: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255,255,255,0.5); top: 65%; position: relative; z-index: 99;}
@media (max-width:500px){.adblockInfo__container{left:0;right:0;width:100%}}
.adblockInfo {
    background: rgba(0, 0, 0, 0.95); 
}
h3.adblockInfo__title { margin-top: 10px; }
.adblockInfo__title,
.adblockInfo__container {
    background: #fff; 
}
.adblockInfo__cover { position: relative; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; height: 200px; }
.adblockInfo__title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75); 
}
.adblockInfo__text {
    color: #524e4e; 
}


.bottom { line-height: 3em; }
.ar1web-social {position: relative; margin: 0 auto; padding: 0 0 0 0;} .ar1web-social li { display: inline-block; margin:0; line-height: 16px; }.ar1web-social li a { color:#fff; position: relative; z-index: 98; font-size: 19px; display: block ; text-align: center; } .twitter-icon:before { content:"\f099" } .gpluss-icon:before { content:"\f16d" } .facebook-icon:before { content:"\f09a" } .rss-icon:before { content:"\f09e" } .social-tooltip.tw, .social-tooltip.fb, .social-tooltip.yt, .social-tooltip.rs, .social-tooltip.wp, .social-tooltip.gp { color: #0099CC;padding: 4px 6px;} 
.social-tooltip.tw { color: #44C3F9;} 
.social-tooltip.wp { color: #5CCC19; } 
.social-tooltip.gp { color: #c93ce2; }
.social-tooltip.fb { color: #086A8C; } .social-tooltip.yt{color: #FF2F37;} .ar1web-social .social-tooltip:hover:after{ top: -36px; background: none repeat scroll 0% 0% #FFF; font-size: 14px; color: #666; content: attr(title); display: block; right: 0px; padding: 5px 15px; position: absolute; white-space: nowrap; border-radius: 3px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
.ar1web-social .social-tooltip:hover { color: #F8A01B;text-decoration: none; }
}
</style>
<script>//<![CDATA[
function adBlockDetected(){function e(e,c){return e.classList?e.classList.contains(c):!!e.className.match(new RegExp("(\\s|^)"+c+"(\\s|$)"))}function c(c,t){c.classList?c.classList.add(t):e(c,t)||(c.className+=" "+t)}function t(c,t){if(c.classList)c.classList.remove(t);else if(e(c,t)){var o=new RegExp("(\\s|^)"+t+"(\\s|$)");c.className=c.className.replace(o," ")}}var o=document.querySelector(".adblockInfo"),s=document.querySelector(".adblockInfo__close");c(o,"is-active"),s.onclick=function(){t(o,"is-active")}}if("undefined"!=typeof fuckAdBlock||"undefined"!=typeof FuckAdBlock)adBlockDetected();else{var importFAB=document.createElement("script");importFAB.onload=function(){fuckAdBlock.onDetected(adBlockDetected)},importFAB.onerror=function(){adBlockDetected()},importFAB.integrity="sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=",importFAB.crossOrigin="anonymous",importFAB.src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js",document.head.appendChild(importFAB)}
//]]></script>


<div class='adblockInfo'>
<div class='adblockInfo__container'>
<div class='adblockInfo__cover'>
<ul class="bg-bubbles">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li> 
<h3 class='adblockInfo__title'>adblock تم الكشف عن مانع الإعلانات </h3>
<img class='adblockInfo__cover__img' src='https://blockthrough.com/wp-content/uploads/2017/02/Antu_preferences-web-browser-adblock.svg.png'/>
</ul>
</div>
<p class='adblockInfo__text'>
الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك.
شكرًا لك على الدعم ❤️
</p>
<div class='bottom'>
<ul class='ar1web-social' id='ar1web-social'>
<li><a class='social-tooltip fb' href='#' target='_blank' title='صفحتنا على الفيسبوك'><i class='fa fa-facebook'></i></a></li>
<li><a class='social-tooltip tw' href='#' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i></a></li>
<li><a class='social-tooltip gp' href='#' target='_blank' title='حسابنا'><i class='fa fa-instagram'></i></a></li>
<li><a class='social-tooltip yt' href='#' target='_blank' title='اشترك بقناتنا'><i class='fa fa-youtube'></i></a></li>
</ul>
</div>
</div>
</div>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css?family=Changa');

@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;    overflow: hidden;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

.adblockInfo{width:100%;height:100%;position:fixed;top:0;left:0;z-index:900;display:none}
.adblockInfo.is-active{display:block}
.adblockInfo__container{top: calc(50% - 40%); max-width: 350px; font-size: 16px; text-align: center; box-shadow: 0 6px 5px -5px rgba(0,0,0,.5); margin: 0 auto;font-family: 'Changa', cursive;    overflow: hidden;}
.adblockInfo__container{position:relative;z-index:10}
.adblockInfo__title{padding: 0 1em; font-size: 1.2em; margin: 0; color: #fff; position: absolute; bottom: 50px; background: transparent!important;left:0;right:0}
.adblockInfo__text{padding: 1em; font-size: 1em; line-height: 2; text-align: center;}
.adblockInfo__cover__img {width: 50px; max-height: 50%; position: relative; z-index: 99; right: -40%; bottom: -10%;}
@media (max-width:500px){.adblockInfo__container{left:0;right:0;width:100%}}
.adblockInfo {
    background: rgba(0, 0, 0, 0.95); 
}
h3.adblockInfo__title { margin-top: 10px; direction: ltr;}
.adblockInfo__title,
.adblockInfo__container {
    background: #fff; 
}
.adblockInfo__cover { position: relative; background: #50a3a2;
  background: -webkit-gradient(linear, left top, right bottom, from(#50a3a2), to(#53e3a6));
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);height: 160px; }
.adblockInfo__text {
    color: #524e4e; 
}


.bottom { line-height: 3em; }
.ar1web-social {position: relative; margin: 0 auto; padding: 0 0 0 0;} .ar1web-social li { display: inline-block; margin:0; line-height: 16px; }.ar1web-social li a { color:#fff; position: relative; z-index: 98; font-size: 19px; display: block ; text-align: center; } .twitter-icon:before { content:"\f099" } .gpluss-icon:before { content:"\f16d" } .facebook-icon:before { content:"\f09a" } .rss-icon:before { content:"\f09e" } .social-tooltip.tw, .social-tooltip.fb, .social-tooltip.yt, .social-tooltip.rs, .social-tooltip.wp, .social-tooltip.gp { color: #0099CC;padding: 4px 6px; border: 2px solid; border-radius: 50%;} 
.social-tooltip.tw { color: #44C3F9;} 
.social-tooltip.wp { color: #5CCC19; } 
.social-tooltip.gp { color: #c93ce2; }
.social-tooltip.fb { color: #086A8C;padding: 4px 10px; } .social-tooltip.yt{color: #FF2F37;} .ar1web-social .social-tooltip:hover:after{ top: -36px; background: none repeat scroll 0% 0% #FFF; font-size: 14px; color: #666; content: attr(title); display: block; right: 0px; padding: 5px 15px; position: absolute; white-space: nowrap; border-radius: 3px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
.ar1web-social .social-tooltip:hover { color: #F8A01B;text-decoration: none; }
}
</style>
<script>//<![CDATA[
function adBlockDetected(){function e(e,c){return e.classList?e.classList.contains(c):!!e.className.match(new RegExp("(\\s|^)"+c+"(\\s|$)"))}function c(c,t){c.classList?c.classList.add(t):e(c,t)||(c.className+=" "+t)}function t(c,t){if(c.classList)c.classList.remove(t);else if(e(c,t)){var o=new RegExp("(\\s|^)"+t+"(\\s|$)");c.className=c.className.replace(o," ")}}var o=document.querySelector(".adblockInfo"),s=document.querySelector(".adblockInfo__close");c(o,"is-active"),s.onclick=function(){t(o,"is-active")}}if("undefined"!=typeof fuckAdBlock||"undefined"!=typeof FuckAdBlock)adBlockDetected();else{var importFAB=document.createElement("script");importFAB.onload=function(){fuckAdBlock.onDetected(adBlockDetected)},importFAB.onerror=function(){adBlockDetected()},importFAB.integrity="sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=",importFAB.crossOrigin="anonymous",importFAB.src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js",document.head.appendChild(importFAB)}
//]]></script>

قم بتغيير # بروابط مواقع التواصل الاجتماعي الخاصة بك 

ازرار التحميل و المعاينة بشكل جديد جداب و احترافي لمدونات بلوجر

أغسطس 30, 2018 اضف تعليق

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



صفتنا على الفيسبوك معاينة

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

#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
 margin: 10px;
 transition: .5s;
}
 .btn-slide2 {
 border: 2px solid #efa666;
}
 .btn-slide:hover {
 background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
 .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
 left: 100%;
 margin-left: -45px;
 background-color: #fdfdfd;
color: #0099cc;
}
 .btn-slide2:hover span.circle2 {
 color: #efa666;
}
 .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
 left: 40px;
 opacity: 0;
}
 .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
 opacity: 1;
 left: 40px;
}
 .btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
 .btn-slide2 span.circle2 {
 background-color: #efa666;
}
 .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
 text-align: center;
 margin: 0 auto;
 font-size: 16px;
 font-weight: bold;
 color: #30abd5;
 transition: .5s;
}
 .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
 color: #efa666;
 left: 80px;
}
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
 left: 80px;
 opacity: 0;
}
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
 color: #fff;
}

حسنا الان و بعد كتابتك لاي تدوينة يمكنك اضافة ازرار التحميل و المعاينة بعد الضغط على تبويب HTML و وضع الكود التالي


<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
 <span class="circle"><i class="fa fa-rocket">
</i></span> <span class="title">معاينة</span>
 <span class="title-hover">اضغط هنا</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
 <span class="circle2"><i class="fa fa-download"></i></span>
 <span class="title2">تحميل</span>
 <span class="title-hover2">اضغط هنا</span>
</a>
</div>
ملاحظة قم بتغيير ما باللون الاحمر بروابط التحميل و المعاينة و ما باللون الازرق بما يناسبك من الكلام

حماية موقعك او مدونتك من اداة Inspect element

أغسطس 14, 2018 اضف تعليق

السلام عليكم و رحمة الله في هده التدوينة القصيرة سوف نتعرف على طريقة او كيفية حماية مدونتك او موقعك و جعله لا يسمح باستعمال عنصر الكشف inspect element 
قد يريد احد زوار مدونتك او اي اكان القاء نضرة على مدونتك باستخدام عنصر الفحص و كما نعلم فهدا الاخير يقوم بعرض جميع الاكواد المجودة داخل قالب المدونة او الموقع و يتمتل دلك في عرض اسماء الادوات و محتواها 
ادن كفانا كلاما ولنتعرف على السر لحماية موقعك كي لا يتم تفتيشه
ان اساليب مظاض الفحص بسيطة جدا و هي متمتلة في انشاء كود يحتوي على عنصر فحص خاطئ على عكس الاصلي 
عنصر الفحص يعتبر كخاصية لتطوير المواقع و هدا امر ايجابي اما ادا كنت تريد ان تقوم بتعطيل او حجب شخص ما من معرفة و سرقة محتويات مدونتك فقم باتباع الخطوات التالية

اولا من لوحة تحكم مدونتك توجه الى التخطيط 
تم قم باضافة اداة HTML / Javascript ضع داخلها الكود التالي 


<script type="text/javascript">eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(){(3 a(){8{(3 b(2){7((\'\'+(2/2)).6!==1||2%5===0){(3(){}).9(\'4\')()}c{4}b(++2)})(0)}d(e){g(a,f)}})()})();',17,17,'||i|function|debugger|20|length|if|try|constructor|||else|catch||5000|setTimeout'.split('|'),0,{}))</script>
فم الان بالضغط على زر الحفض و شاهد النتيجة