حصرى : سكربت حماية حقوق القوالب

اهلا بكم 😃 اتمنى لكم كل خير إن شاء فى هذه التدوينة القصيرة سوف نتعلم كيفية حماية حقوق القالب من الحذف أو من التعديل الطريقة حصرية وجديدة وبسيطة جدا لهذا اتمنى أن تركز معى فى هذا الدرس لكى تعرف إستخدام الكود 👇👺

للمعاينة :

معاينة وتحميل

معاينة

شرح الأضافة :

كل ماعليك يا صديقة أن تضيف الكود التالى فوق هذا الوسم : </body> 

الحصول على الكود

  بعد نسخ الكود ووضعه غير الكلام والروابط بما يناسبك 😉😆  

الخطوة الأخيرة :

وهى وضع كود التفعيل وهذا الكود يجب وضعه فى المكان الذى تريده ان تظهر الحقوق به 😌

<a id="elprof-copy"></a>

نصائح للمزيد من الحماية :😈

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

المزيد

تحميل قالب Hot Magazine معرب | قالب بلوجر للمجلات 2017

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

معاينة وتحميل

معاينة
تحميل
كيفية تركيب القالب >

وهكذا أنتهت تدوينتنا إلى اليوم واحب ان أقدم أعتذارى لأى شخص طلب قالب من عندى ولم يتم إرساله ولكنى كنت فى مشول فى الدراسة وايضا هذه الأيام لدى امتحانات😂😂😂😂😂😂😂😂
أتمنى لك التوفييق وايضا إن كان هناك أى مشكلة فى القالب أخبرونى وسيتم الرد إن شاء الله

المزيد

إضافة سكربت عرض المواضيع حسب التسميات للفيديوهات

أهلا بكم متابعى البروفيسور الصغير فى درس قصير *-* هذه التدوينة تتكلم عن إضافة جميلة وهى إضافة الفيديوهات حسيب التسميات الأضافة كودها لتشبه الخاص بقالب المحترف ولكن مع إختلاف بسيط *-* : 

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

1. التكويد نظيف *-* 
2. متجاوبة بنسبة 60%
3. شكل جميل ومريح للعين
4. يمكنك إستخدامه لعرض الحلقات والفيديوهات 
5. حسب التسميات *-* 

طريقة الأضافة : 

ضع الأكواد الأتية فوق هذا الوسم : </head> 

<br /> <script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}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}('z y(1){d.8(\'<l 5="A">\');m(4 i=0;i<1.2.3.f;i++){m(4 j=0;j<1.2.3[i].9.f;j++){B(1.2.3[i].9[j].x==\'D\'){4 b=1.2.3[i].9[j].6;v}}4 e=1.2.3[i].w.$t;4 p=1.2.3[i].u[0].s.$t;4 n=1.2.3[i].C$F.M.N("O-c","E-c");4 7=1.2.3[i].G[0].I;d.8(\'<k><a 5="q-J" 6=\'+b+\'><r H=\'+n+\'></r></a><a 5="q-7"> \'+7+\' </a><h 5="K-L"><o><a 6=\'+b+\'>\'+e+\'</o></a><g>\'+p+\'</g></h></k>\')}d.8(\'</l>\')}',51,51,'|json|feed|entry|var|class|href|tag|write|link||postUrl||document|postTitle|length|span|div|||li|ul|for|postImg|h3|postAuthor|elprof|img|name||author|break|title|rel|mycallback|function|poosts|if|media|alternate|s900|thumbnail|category|src|term|over|post|info|url|replace|s72'.split('|'),0,{})) //]]> </script><br /> <style> div#elprof-rec h2 { overflow: hidden; clear: both; background: #D03F42; color: #fff; padding: 10px; font-size: 29px; } div#elprof-rec h2:before { content: '\f16a'; font-family: fontawesome; width: 32px; background: #BD383A; height: 32px; text-align: center !important; line-height: 32px; display: inline-block; font-size: 17px; border-radius: 3px; margin-left: 6px; } ul.poosts { overflow: hidden; padding: 18px 0; border: 1px solid #E2E2E2; background: #fff; border-radius: 0 0 3px 3px; margin-bottom: 14px; padding-right: 8px; } ul.poosts li img { display: block; width: 100%; border-radius: 4px; border: 1px solid transparent; height: 206px; } ul.poosts li { float: right; width: 31%; position: relative; margin-bottom: 10px; padding-bottom: 3px; border-bottom: 1px solid #ECECEC; margin-right: 1.4%; } a.elprof-over:after { content: '\f01d'; font-family: fontawesome; position: absolute; top: 5px; text-align: center; left: 0; color: rgba(255, 255, 255, 0.88); right: 0; bottom: 0; padding-top: 78px; font-size: 56px; border-radius: 0px; width: 100%; height: 206px; background: rgba(49, 70, 90, 0.51); transition: 0.21s; font-weight: 300; } .poosts li:hover a.elprof-over:after { padding-left: 170px; padding-top: 13px; padding-bottom: 27px; padding-right: 0; margin-right: 0; width: 101%; color: #D03F42; font-size:38px; background: rgba(255, 255, 255, 0.65); font-weight: 300; } .post-info h3 a { font-size: 15px; position: relative; color: #3C2E2E; font-weight: 900; } .post-info span { position: absolute; top: 13px; left: 8px; color: #fff; display:none; } a.elprof-tag { position: relative; bottom: 29px; right: 0px; background: #fff; padding: 10px; } *:before, *:after { box-sizing: border-box; } </style><br />

ثم ضع هذه الأكواد فى المكان الذى تريده أن تظهر به الأضافة *-*

يمكنك إختيار المكان ثم تنسخ هذه الأكواد وتضعها :) 

يمكنك الحصول على الكود من هنا :

ثم تذهب إلى التخطيط وتضع القسم أو التسمية التى تريد تظهر مواضيعها :

مثال : 

إن حصلت معك مشكلة ما أو لم تفهم خطوة ما أو لم تعرف إضافة الأكواد أتمنى أن تقول لى *-* 

المزيد

تأثير التموج فى الماتريال ديزاين

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

يمكنك معاينة الدرس من هنا لكى تفهم أكثر ما أقصده : 

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

الخطوة الأولى أن تضع هذا الكود فوق هذا الوسم *-* : </head> 

<br /> <style> .ripple { position: relative; border: none; outline: none; cursor: pointer; } .ripple{ overflow:hidden; } .ripple-effect{ position: absolute; border-radius: 50%; width: 50px; height: 50px; background: white; animation: ripple-animation 2s; } @keyframes ripple-animation { from { transform: scale(1); opacity: 0.4; } to { transform: scale(100); opacity: 0; } } </style><br />

ثم عليك أن تضع الكود الأتى فوق هذا الوسم *-* : </body> 

<br /> <script> (function (window, $) { $(function() { $('.ripple').on('click', function (event) { var $div = $('<div/>'), btnOffset = $(this).offset(), xPos = event.pageX - btnOffset.left, yPos = event.pageY - btnOffset.top; $div.addClass('ripple-effect'); var $ripple = $(".ripple-effect"); $ripple.css("height", $(this).height()); $ripple.css("width", $(this).height()); $div .css({ top: yPos - ($ripple.height()/2), left: xPos - ($ripple.width()/2), background: $(this).data("ripple-color") }) .appendTo($(this)); window.setTimeout(function(){ $div.remove(); }, 2000); }); }); })(window, jQuery); </script><br />

عندما تنتهى من هذين الخطوتين يجب أن تحفظها التغييرات ثم نأتى للخطوة التالية التى يجب ان تركز معى فيها جيدا . 

إذا كيف يتم عمل هذا التأثير عن الضغط على هذا الشئ 

ركز معى فى هذا المثال الأتى : 

1- أترى هذا الكود الأتى : 
هو مجرد كود إعتيادى لم يحصل شئ به 

<br /> <a href="#"><div class="elprof" > </div> </a><br />

ولكن إن أضفنا فى class الخاص به كلمة ripple سيتم تشغيل تأثير التموج به كما فى المثال الأتى : 

<br /> <a href="#"><div class="ripple elprof"> </div> </a><br />

هل فهمتم هذه الخطوة لأنها هى الأهم لأن بدونها لن يعمل التأثير كما قلت لكى يعمل التأثير كل ماعليك هو إضافة كلمة ripple فى أى class لأى إضافة تريد بها هذا التأثير . 

ملاحظة صغيرة إن كنت تريد تغير لون التأثير من الأبيض إلى أى لون أخر كل ماعليك هو إضافة هذا attr فى الكود الخاص بك :

data-ripple-color="#000"

ليصبح الكود كا الأتى :

<br /> <a اhref="#"><div class="ripple elprof" data-ripple-color="#000"> </div> </a><br />

اتمنى أن تكونوا فهمتهم هذا الدرس جيدا وإن لم تفهموا أى شئ على الأطلاق أو هناك شئ لم تفهموا من الشرح كل ماعليك التواصل معى عبر الفيس بوك أو أترك تعليق أسفل  الموضوع وسيتم الرد عليك إن شاء الله 

المزيد

إضافة محرك بحث إحترافى فى بلوجر

اهلا بكم أصدقائى ومتابعى البروفيسور الصغير فى درس جديد هذه المرة سنضيف محرك بحث إحترافى اخر ولكن بشكل أخر ومميزات أخرى *-* كما تعلمون أحاول نشر كل جديد ومفيد وسيكون قريبا جدا المزيد من الأضافات الرائعة والقوالب المذهلة تابعونا *-* :

مميزات الأضافة

1. محرك بحث سريع
2. بلغة css3 , jquery
3. شكل أنيق  يمكنك إستخدامه فى قالبك 
4. والمزيد *-* يمكنك إكتشافه بنفسك حتى لا نطول الشرح *-* 

شرح وضع الأضافة *-* : 

الخطوة الأولى وهى وضع هذه الأكواد تحت هذا الوسم <body> 



<br /> <div class="elprof-srch"><i class="fa fa-times elprof-close" aria-hidden="true"></i><br /> <div class="search-elprof"><div class="form-srch" style="display: block;"><form action="/search" id="searchbox" method="get"><input class="input-search" name="q" placeholder="إبحث هنا " size="15" type="text"/><br /> </form></div></div></div>

ثم عليك أن تضع هذه الأكواد وتضعها فوق هذا الوسم *-* </head> 

<br /> <style> .elprof-srch { background-color: rgba(0, 0, 0, 0.72); font-family: elprof-font; right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; left: 0; top: 0; width: 100%; height: 100%; transform: translate(0 , 100%); transition: all 0.5s ease-in-out; opacity: 0; } input.input-search { padding: 64px 93px; background: none; border: navajowhite; border-top: rgba(255, 255, 255, 0.84) solid 3px; border-bottom: rgba(255, 255, 255, 0.85) solid 3px; font-size: 50px; font-family: elprof-font; color: white; text-align: center; } .search-elprof { margin: 200px 284px auto; position: relative; width: 613px; } i.fa.fa-times.elprof-close { position: absolute; right: 40px; font-size: 50px; color: #fff; top: 17px; } i.icon-search.fa.fa-search.elprof-btn-srch { font-size: 50px; padding: 27px; color: #ffffff; background: #e74c3c; border-radius: 1px 20px 1px 20px; } </style><br />

ثم عليك أن تضع الكود الأتى فوق هذا الوسم *-* </body> 

<br /> <script> $(document).ready(function() { $(".elprof-btn-srch").click(function(){ $(".elprof-srch").css({ opacity: "1", transform: "translate(0 , 0)" }) }); $(".elprof-close").click(function(){ $(".elprof-srch").css({ opacity: "0", transform: "translate(0 , 100%)" }) }); }); </script><br />

الخطوة الأخير هى ان تضع هذا الكود فى المكان الذى يحلو لك فى القالب  *-*  o_O

<a href="javascript:void(0);"><i class="icon-search fa fa-search elprof-btn-srch"></i></a>

وهكذا إنتهى درسنا اليوم أتمنى أن تكون الأضافة أعجبتكم + اتمنى ايضا ان تكونوا أعضاء ومتابعين للمدونة لتعرفوا كل جدينا *-* 

المزيد

سكربت تعطيل خاصية فحص العنصر

أهلا بكم أعزاى الأحباء فى هذه التدوينة المفيدة والقصيرة جدا سأشرح لكم كيفية وضع سكربت جميل جدا يمكنكم من عدم إستعمال فحص العنصر نهائيا يمكنك إستعمال هذا الأسكربت إن كنت تريد أن يكون قالبك محمى قليلا من السرقة وسيكون من الصعب قليلا تقليده أنا لا أقول أن هذا الأسكربت سيمنع تقليد القوالب نهائيا لا بل سيحميها قليلا بنسبة لا تقل عن 60% 

مميزات هذا الأسكربت : 

• يمنع الزر الأيمن
• يمنع زر f12
• يمنع إختصار ctrl + u
• يمنع إختصار ctrl + shift + i
• يجعل قالبك محمى بنسبة 60 % (حسب صعوبة قالبك)

معاينة الأسكربت
إضغط هنا

كيفية إضافة هذا الأسكربت : 

كل ماعليك هو إضافة الكود الأتى فوق هذا الوسم </body> 

للحصول على الكود
إضغط هنا

المزيد

ماهو الماتريال ديزاين ؟ وكيف نتعلمه ؟

أهلا بكم متابعى البروفيسور الصغير فى هذه التدوينة ساتكلم عن تصميمات الماتريال ديزاين بإختصار ماهو وكيف نتعلمه لكى نصمم قالب ماتريال مخصص لبلوجر

فى هذا الدرس أنا اتكلم أكثر مع المصممين وليس المستخدمين بشكل عام فهى نبدأ على بركة الله : ) 

ما هو الماتيريال ديزاين :

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

ماهى خصائص هذه المكتبة : 

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

الطبقات فى تصميم المتاريال يعطى تفاعل جميل جدا مع المستخدم وأكثر راحة . 

كيف نستخدم هذه المكتبة وأين نتعلمها : 

قبل أن اقول كيف تتعلم هذا الأسلوب يجب ان يكون لديك خبرة فى 4 لغات على الأقل وهم كالأتى : 

HTML

CSS

JAVASCRIPT

JQUERY

EN إختصار للغة الأنجيليزية

هذه هى اللغات التى عليك أن تكون لديك خبرة متوسطة بها على الأقل لتعلم هذه المكتبة الرائعة : 

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

للدخول على الموقع من هنا 

الموقع
إضغط هنا

شرح للصفحة الأولى : 

شرح للقائمة الجانبية : 

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

أيضا إن كان هناك أى سؤال فى ذهنك أو شئ لم تفهمه كل ماعليك التواصل معى عبر الفيس بوك أو اكتب تعليق وسيتم الأجابة عنه إن شاء الله 

المزيد

قالب Fresh View الأحترافى معرب [ قالب بلوجر متجاوب ]

أهلا متابعى البروفيسور الصغير أتمنى أن تكونوا بخير وتقدون يوما سعيدا جلبت لكم اليوم قالب فريش فيو قالب بلوجر إحترافى يمكنك إستخدامه فى الكثير من السياء فى المدونات الشخصية أو مدونات المراجعات وإلخ :) 

معاينة القالب
إضغط هنا

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

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

تحميل القالب
إضغط هنا

تعديل بسيط فى القالب : 

عليك تغير هذا الرابط : 

http://fresh-view-ar.blogspot.com.eg/

برابط مدونتك لكى يعمل السلايدر معك 

إن كان هناك أى مشكلة فى القالب اتمنى أن تخبرنى :) 

المزيد

قالب Fasel مطور قالب بلوجر متجاوب

قالب فاصل قالب بلور متجاوب 100% قالب مصمم من 6log وتم تطويره وتعريبه الحمد لله أتمنى أن يكون القالب يعجبكم القالب يمكنك إستخدامه فى قالبك الشخصى أو قالب للمراجعات والكثير :) 

معاينة القالب
إضغط هنا

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

• قالب متجاوب
• صديق للسيو
• طريقة لعرض المشاركات جميلة
• مريح للعين
• صفحة 404 
• قائككة منسدلة
• محرك بحث إحترافى
• سريع 
• فوتر جميل
• تكويد نظييف
• والمزيييد

تحميل القالب
إضغط هنا

إن كان هناك أى خطب فى القالب أتمنى ان تقول لى أى مشكلة وقعت معك أيضا أتمنى أن تقول لى لحل هذه المشكلة :) 

المزيد

أضافة تأثير تحميل المدونة فى بلوجر (عمل Loader انتظار تحميل الصفحة)

أهلا بكم أعزائى ومتابعى البروفيسور الصغير فى إضافة جديدة ودرس جديد فى هذا الدرس سنتكلم عن إضافة تأفسر التحميل فى قالب مدونتك تأثير جميل جدا وإحترافى فهى بنا لاشرح : ) 

معاينة الأضافة
إضغط هنا

شرح الأضافة :

عليك إضافة هذه الأكواد فوق هذا الوسم : </head>

<br /> <style> div#loading-elprof { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: rgba(49,69,89,0.98); width: 100%; height: 100%; } div#scroll { background: #314559 url(https://s10.postimg.org/owcb1y6bt/image.png) no-repeat; width: 99px; overflow: hidden; display: block; text-align: center; padding: 0 0; height: 100px; background-size: 100%; border-radius: 50%; background-position: 5px; margin: -50px 0 0 -50px; position: absolute; left: 50%; top: 50%; border: 2px solid #fff; animation: bouncedelay 1.4s infinite; } @-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(1.0)} 40%{-webkit-transform:scale(0.4)} } @keyframes bouncedelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(1.0)} 40%{transform:scale(1.0); -webkit-transform:scale(0.4)} } </style><br />

ثم عليك إضافة هذه الأكواد تحت هذا الوسم : <body> 

<br /> <div id="loading-elprof"> <div id="scroll"> </div> </div>

ثم عليك إضافة هذه الأكواد فوق هذا الوسم : </body> 

<br /> <br /> <script type="text/javascript"> $(window).load(function(){ $("#loading-elprof").fadeOut(1500) }); </script><br /> <br />

التعديلا التى يجب ان تقوم بها وهى تغير صورة اللوجو الخاص بى باللوجو الخاص بك : 

https://s10.postimg.org/owcb1y6bt/image.png

هذا رابط الصورة بدله برابط الصورة الخاص بك

ثم أحفظ التغييرات فى القالب ومبروك عليك هذه الأضافة الجميلة أيضا إن كان هناك أى مشكلة واجهتها فى إضافة التأثير كل ماعليك هو ان تقول لى :) 

المزيد

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

أهلا بكم أعزائى ومتابعى البروفيسور الصغير فى هذا الدرس الجديد والأضافة الجديدة فى هذه التدوينة سنضيف إضافة بشكل جديد فى بلوجر وهى المشاركات الشائعة الأضافة جميلة جدا ومميزة لبلوجر فهيا بنا للشرح : 

معاينة الأضافة
إضغط هنا

أريدك ان تذهب إلى القالب وتبحث عن هذا الوسم : </body>  ثم تضع هذه الأكواد فوق هذا الوسم : 

للحصول على الأكواد
إضغط هنا

بعد وضع الأكواد إحفظ القالب :) ومبروك الأضافة 

التعديلات التى يجب أن تفعلها :

عليك الذهاب للتخطيط : 

وفتح هذه الأضافة : 

ثم يجب ان تكون الأعدادت كما فى الصورة الأتية : 

ملحوظة هامة : يجب ألا يكون عدد المشاركات أكثر من 8 مشاركات شرط إجبارى 

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

المزيد

إضافة مولد الأرقام العشوائي فى بلوجر

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

او يمكنك وضعها فى صفحة مستقلة دعنا لا نكثر فى الكلام وندخل فى الشرح مباشرة :) .

معاينة الأضافة
إضغط هنا

مميزات الأضافة

1. جميلة
2. جديدة
3. يمكنك عمل قرعة بها
4. تكويد نظيف
5. شكل جذاب ويمكنك تغيره إن كنت تفهم فى أكواد css
6. حركات
7. والمزيييد

شرح كيفية وضع الأضافة : 

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

للحصول على الكود
إضغط هنا

إن كان هناك أى مشكلة فى الكود أو هناك مشكلة فى الأضافة أتمنى فقط أن تكتب تعليق وسيتم الرد عليه فى أسرع وقت ممكن :) 

المزيد