كيفية عمل وضع ليلي لمدونات بلوجر او اي استضافة ويتم تسجيله في كوكيز المتصفح Dark Mode كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت CSS أغسطس 09, 2019

كيفية عمل وضع ليلي لمدونات بلوجر او اي استضافة ويتم تسجيله في كوكيز المتصفح Dark Mode كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 09, 2019

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

• الكود التالي خاص ب الزر الذي يضغط عليه ويمكنك وضعه في اي مكان تريد ضهوره

<div class="switch-mode"><div id="switch-mode"><div class="switch-button"><span></span></div></div></div>

• و الكود التالي هوا كود الجافا سكريبت يمكنك تحميله من هنا او من هنا او من هنا [ رفعته لكي لا يتم تخريب الاكواد في الموضوع ]
• تضع الكود فوق ال 

• الان نتجه الى الجزء المتعب و الذي يحتاج الى إجتهاد فردي 
• ضع هذه الاكواد فوق ال 

<style type="text/css">/*<![CDATA[*/ /*===================================== = button Dark Mode =====================================*/ .switch-mode{display:inline-block;margin:0 0 0 10px;background:transparent;min-width:180px;height:64px;line-height:64px;padding:0 15px;position:relative} .switch-mode #switch-mode{display:inline-block;width:40px;height:6px;background:#1a1c25;border-radius:3px;position:relative;top:1.5px;cursor:pointer} .switch-mode #switch-mode .switch-button{width:14px;height:14px;display:block;background:#eb1111;position:absolute;top:-5px;left:0;border-radius:100%} .switch-mode #switch-mode.active .switch-button{background:#0ca71b;left:auto;right:0} /*===================================== = body Dark Mode == ضع اكواد التنسيق اسفل التعليق هذا =====================================*/ /*]]>*/ </style>

• الجزء الاول من الكود الذي تعليقه button Dark Mode ذالك شكل الزر الذي وضعت اكواده في اول الشرح يعني يمكنك تغيير شكل حتى يتناسب مع شكل مدونتك
• و خصصت جزى في الكود اسم تعليقه body Dark Mode ذالك تضع عليه اكواد ال css  الجديدة التي تحتوي على الوان ال Dark Mode سوف اعطيك مثال على كيفية اضافة ستايل خاص للوضع اليلي 

مثال

• لدينا عنوان مقال class او id الخاص به title-post ويكون  في اكواد css  الخاصة به في الوضع العادي لون الخط اسود او اي لون اخر وانتا تريد تغيير لونه عندا الوضع اليلي فعليك سوف عمل هكذا

/* هذه في الوضع العادي*/ .title-post{ color: #000; } /* هذه في الوضع اليلي*/ .body.dark-mode .title-post{ color: silver; }


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

معاينة الاضافة من هنا

اذا اردت مني اضافة لك الوضع اليلي يمكنك شراء خدمة الدعم الفني من المدونة وراسلني من هنا 

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

اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر Animation CSS مارس 04, 2019

اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

مارس 04, 2019

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

 شرح اليوم على كيفية اضافة تأثير التحرك المستمر للخلفيات المتدرجة 

اولا يمكنك معاينة هذا القالب الذي عليه خلفيات متدرجة من هنا

• شرح تركيب الاضافة على القالب 

1. اولا ابحث في القالب على  وضع الكود التالي فوقه مباشرة 

محرر@-webkit-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

الان بعد وضع الكود الاول و هوا عبارة عن keyframes الخاصة بتأثير

الان لاضافة تأثير على شئ يجب اولا تحديد ال class  او id  الخاص به 

على سبيل المثال نقول انا لدينا class قيمته abdoutech  نريد جعل خلفيته عليها التأثير

نحدد كتالي

محرر
.abdoutech {
/* بداية كلاص */
/* http://bit.ly/linear-gradient  هذا كود الخلفية يمكنك تغييره عبر هذا الرابط */
background: linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);
/* http://bit.ly/linear-gradient هذا كود الخلفية يمكنك تغييره عبر هذا الرابط */
background-size: 1400% 1400%;
-webkit-animation: AnimationName 12s ease infinite;
-moz-animation: AnimationName 12s ease infinite;
animation: AnimationName 12s ease infinite;
/* نهاية كلاص */
}

الكود الذي ب الاخضر يمثل الخلفية يمكنك تغيير لون الخلفية عبر الموقع المبين مع الكود ب الاحمر

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

شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق 2018 2019 اضافات بلوجر بلوجر تطوير مواقع سكربت شريط اخبار CSS html java أغسطس 23, 2018

شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 23, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

الاكواد تمتاز بأخر  الاكواد البرمجية الحصرية 

معاينة

شرح التركيب

1. إبحث على 

<b:tag name='style' type='text/css'><b:if cond='data:view.isMultipleItems'>.clearfix:after,.clearfix:before,.container:after,.container:before{display:table;content:" "} .container{position:relative} @media (min-width:1200px){.container{width:1170px}} @media (min-width:992px){.container{width:970px}} @media (min-width:768px){.container{width:750px}} .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:768px){.container{width:750px}} @media (min-width:992px){.container{width:970px}} @media (min-width:1200px){.container{width:1170px}}#breakingnews{background-color:#003350;bottom:0;height:50px;position:fixed;right:0;width:100%;z-index:9999} #breakingnews .title{background-color:#d60f0a;float:right;height:65px;line-height:65px;position:relative;text-align:center;top:-15px;width:4%} #breakingnews .title img{height:40px;width:40px;margin-top: 14px} #breakingnews .title::after{border-style:solid;border-width:0 0 15px 15px;border-color:transparent transparent #cc0500 transparent;_border-color:#000000 #000000 #cc0500 #000000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');content:"";display:inline-block;height:0;left:-15px;line-height:0;position:absolute;top:0;width:0} .marquee{direction:ltr;float:right;height:50px;overflow:hidden;width:96%} #breakingnews .marquee .js-marquee ul li{direction:rtl;display:inline-block;float:right;font-size:18px;line-height:50px;margin:0 0 0 35px;padding:0 0 0 35px;position:relative} #breakingnews .marquee .js-marquee ul li::before{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc16N0XfIFNXWVchoZw3LHyVedSLg7iFHsjKk96M1RWY_tambeP7zS5p_CoVFdi78nEngKRrnAMvI9ylPpttsmdFI1EGd_p7yBUSU30-AKxG2VLN2RrDYyJX7HzTuUX-l-3eBcdAwrmqA/s1600/small-logo.png");background-size:35px 35px;content:"";display:inline-block;height:35px;left:-35px;line-height:35px;margin:0 15px;position:absolute;top:5px;width:35px} #breakingnews .marquee .js-marquee ul li a{color:#fff} #breakingnews .marquee .js-marquee ul li a:hover{color:#e01914} #breakingnews button.closebtn{background-color:#df0303;border:medium none;border-radius:3px;color:#fff;float:left;font-family:play;font-size:20px;height:30px;left:5px;line-height:30px;padding:0;position:absolute;text-align:center;top:10px;width:30px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} #breakingnews button.closebtn:hover{background-color:#d00000} </b:if></b:tag>

1. الان إبحث على  وضع الكود التالي فوقه مباشرة

تحميل الملف

• الان لتغيير الوجو الخاص بي إبحث على رابط  الصورة هذا من هنا  وغيره بصورة التي تريدها انت

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

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS html java أغسطس 22, 2018

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

Admin Amer

أغسطس 22, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

شرح تركيب الاضافة

1. إبحث في القالب على  او 

<style>/* shadow sec */ .shadow{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);transition: .3s ease-out;} .shadow:hover{box-shadow: 0 14px 25px rgba(0,0,0,.16);} /*اضافة من الخبير عامر بشير*/ .ball-message{position:fixed;bottom:12px;z-index:999999999999;right:52px;margin-top:-50px;margin-left:-50px;height:100px;width:100px;border:3px solid #FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbv6g5SqgcYL4I0wMdMn8tXpZQoKRhyrFixPoVR8SGAzvy5OMdQpvlCXIQbUTDzsARgBw7PvU3fNFjzT_DT4fwYeRpqQlWq9JASl6zuCdn-zWq1sCunBxifYRnJ8n-kpoMNsBLfsLfTX4/s320/24294136_1809479985752209_1304656175277181735_n.png);background-size:contain;border-radius:1000px;transform:scale(0);transition-duration:0;transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);} .ball-message .msg-count{position:absolute;top:0;left:0;color:#FFF;border:3px solid #FFF;background:#E80202;height:25px;width:25px;border-radius:1000px;text-align:center;line-height:18px;font-size:12px;opacity:0;transform:scale(0);transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);} .ball-message .halo{position:absolute;top:18px;left:18px;right:18px;bottom:18px;border-radius:1000px;background:rgba(255,255,255,0.6);transform:scale(0)} .ball-message .notif{position:absolute;top:-50px;left:-45px;width:183px;opacity:0} .ball-message .notif .bar{position:relative;border-radius:1000px;background:#FFF;height:30px;line-height:30px;width:0;margin:0 auto;padding:0 10px;overflow:hidden} .ball-message .notif .bar .text{position:absolute;margin:0;font-size:12px;color:#555;width:175px;z-index:1} .ball-message .notif .bar .action{position:relative;z-index:2;height:20px;width:20px;background:#BABABA;float:left;margin-top:5px;border-radius:100px;box-shadow:10px 0 0 0 #FFF,-10px 0 10px 0 #FFF,inset 0 0 0 1px #FFF;border:1px solid #BABABA;} .ball-message .notif .bar .action::after{content:'';border-left:5px solid #FFF;border-top:4px solid transparent;border-bottom:4px solid transparent;display:block;margin-left:7px;margin-top:4px} .ball-message .notif .arrow{top:30px;border-top:7px solid #FFF;border-left:7px solid transparent;border-right:7px solid transparent;width:0;margin:0 auto;transform-origin:top;transform:scale(0)} .anim-start .ball-message{transform:none;transition-duration:.3s} .anim-start .ball-message .notif{opacity:1;transition-duration:.2s;transition-delay:1.6s} .anim-start .ball-message .notif .bar{width:100%;transition-duration:.6s;transition-delay:1.6s} .anim-start .ball-message .notif .arrow{transform:none;transition-delay:1.6s;transition-duration:.3s} .anim-start .ball-message .halo{opacity:0;transform:none;transition-duration:.6s;transition-delay:1.2s} .anim-start .ball-message .msg-count{opacity:1;transform:none;transition-duration:.3s;transition-delay:.6s} .autowrite{animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite} @keyframes typing{from{width:0}to{width:100%}} @keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#dedede}} </style>

1. إبحث على 

• تحميل الكود من هنا

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

تغيير شكل اقتباس في تدويينات بلوجر واضافة رابط نشر الاقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق 2018 اضافات بلوجر بلوجر سكربت CSS java أغسطس 12, 2018

تغيير شكل اقتباس في تدويينات بلوجر واضافة رابط نشر الاقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 12, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

يمكنك معاينة الاضافة من هنا

شرح تركيب الاضافة 

• إبحث على 

<style type='text/css'>/*<![CDATA[*/ /* صندوق اقتباس من الخبير عامر بشير */ .post-body blockquote{width:90%;clear:both;-webkit-print-color-adjust:exact;padding:10px 30px;margin:15px auto;line-height:2;text-indent:15px;color:#ffffff;-webkit-border-radius:5px;border-radius:5px;position:relative;border:none;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.post-body blockquote:before{content:"\f10e";top:0;right:-4px}.post-body blockquote:before,blockquote:after{font-family:FontAwesome;font-size:20px;color:#ffffff;position:absolute}.post-body blockquote:after{content:"\f10d";bottom:0;left:15px}.quote-share a{background:#ffffff;text-align:center;display:inline-block;width:25px;height:25px;text-indent:0;-webkit-border-radius:100%;border-radius:100%;border:2px solid #ffffff;font-size:11px;margin:0 1px;color:#fff;background-repeat:no-repeat;background-size:1000% 1000%;background-clip:border-box;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.quote-share a:hover{-webkit-animation:quoteHover .5s ease both;-moz-animation:quoteHover .5s ease both;animation:quoteHover .5s ease both}.quote-share{position:absolute;left:50px;bottom:-12px}@-webkit-keyframes quoteHover{to{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHover{to{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHover{to{transform:scale(1.5) rotate(360deg)}}@-webkit-keyframes quoteHoveroff{from{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHoveroff{from{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHoveroff{from{transform:scale(1.5) rotate(360deg)}} /*]]>*/ </style>

• الان إبحث على  وضع الكود التالي فوقه 
• تحميل الكود من هنا

الان احفظ القالب ومبروك عليك الاضافة 

لاتنسى الاشتراك في المدونة لكي تتوصل بكل جديد