menu
attachment
  • الصفحة الرئيسية
  • فهرس الموقع
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • الابلاغ عن الروابط المعطوبة
notifications
موقع الوليد نت
  • تطوير مدونات بلوجر
  • _قوالب بلوجر
  • _اضافات بلوجر
  • _دروس بلوجر
  • _قوالب بلوجر مدفوعة
  • تطوير ووردبريس
  • _قوالب ووردبريس مجانية
  • _اضافات ووردبريس
  • الربح من الانترنت
  • سكربتات مجانية
  • خدمات عامة
  • مسابقات
    10|recentpost
  • موقع الوليد نت
  • اضافات بلوجر
  • اضافة الوضع الليلي لموقعك بلوجر
‪Walid Farouk‬‏
0

اضافة الوضع الليلي لموقعك بلوجر

الخميس، 10 يناير 2019
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement

السلام عليكم ورحمة الله وبركاته

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

زر لتغيير اوضاع موقعك من الوضع الليلي الى النهاري او العكس


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

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

توجه الى القالب ثم تحرير html

ضع الكود التالي في المكان الذي يناسبك ((الزر))

<div class="button-con">
<label for='cb1'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
<g id="Sun">
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z" />
</g>
</g>
</svg>
</label>
<input class='toggle' id='cb1' type='checkbox'>
<label class='toggle-button' for='cb1'></label>
<label for='cb1'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571 C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23 c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369 c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65 c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z" />
</svg>
</label>
</div>


ابحث عن ]]></b:skin> وضع فوقه الكود التالي

/* ISSAMWEEB */
body {
background: #25272A;
-webkit-transition: background-color 150ms ease-out !important;





transition: background-color 150ms ease-out !important;





}





body.issweebday-background {





background: #fff





;





}





.button-con {





cursor: default;





position: absolute;





top: 50%;





left: 50%;





margin-left: -76px;





margin-top: -18px;





}





#dayIcon {





position: relative;





width: 26px;





height: 26px;





top: -3px;





margin: 0 7px;





fill: #9caec0;





}





#nightIcon {





position: relative;





width: 26px;





height: 26px;





top: -3px;





margin: 0 7px;





fill: #9caec0;





}





#dayIcon, #nightIcon {





cursor: pointer;





}





.toggle {





display: none;





}





.toggle, .toggle:after, .toggle:before, .toggle *, .toggle *:after, .toggle *:before, .toggle + .toggle-button {





-moz-box-sizing: border-box;





box-sizing: border-box;





}





.toggle::-moz-selection, .toggle:after::-moz-selection, .toggle:before::-moz-selection, .toggle *::-moz-selection, .toggle *:after::-moz-selection, .toggle *:before::-moz-selection, .toggle + .toggle-button::-moz-selection {





background: none;





}





.toggle::selection, .toggle:after::selection, .toggle:before::selection, .toggle *::selection, .toggle *:after::selection, .toggle *:before::selection, .toggle + .toggle-button::selection {





background: none;





}





.toggle + .toggle-button {





outline: 0;





display: inline-block;





width: 4em;





height: 2em;





position: relative;





cursor: pointer;





border: 2px solid #333;





-webkit-user-select: none;





-moz-user-select: none;





-ms-user-select: none;





user-select: none;





}





.toggle + .toggle-button:after, .toggle + .toggle-button:before {





position: relative;





display: block;





content: "";





width: 50%;





height: 100%;





}





.toggle + .toggle-button:after {





left: 0;





}





.toggle + .toggle-button:before {





display: none;





}





.toggle:checked + .toggle-button:after {





left: 50%;





}





.toggle + .toggle-button {





padding: 2px;





-webkit-transition: all .2s ease;





transition: all .2s ease;





border: 2px solid rgba(156, 174, 192, 0.27);





border-radius: 2em;





}





.toggle + .toggle-button:after {





-webkit-transition: all .2s ease;





transition: all .2s ease;





background: rgba(156, 174, 192, 0.27);





content: "";





border-radius: 1em;





}





.toggle:checked + .toggle-button:after {





left: 50%;





}









ثم ابحث عن </body> وضع الكود التالي فوقه





<script type='text/javascript'>





$('body').toggleClass('issweebday-background');





$('#cb1').on('click', function () { $('body').toggleClass('issweebday-background'); });





</script>


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

والي اللقاء في موضوع اخر انشاء الله

 

Share This
clear
  • الكاتب ‪Walid Farouk‬‏
    ‪Walid Farouk‬‏
    اهتم بما هو جديد في عالم الانترنت
  • آخر تحديث: يناير 10, 2019
اضافات بلوجر

add_comment ليست هناك تعليقات:

إرسال تعليق

مواقع ندعمها

  • _ايجي بوكـ
  • _كوكب المحترفين
  • _بوابة الامبراطور
  • _خالد تك Khaled Tech
  • _ميجا بلس
  • _طارق أحمد | Tarek Ahmed
  • _متحف التقنيات
  • _سطور برمجية
  • #ضع موقعك هنا
  • #ضع موقعك هنا

مشاركة مميزة

افضل موقع للربح من رفع الملفات Mega4Up 2021

المشاركات الشائعة

  • تحميل قالب سكويز النسخة المدفوعة مجانا حصريا من موقع الوليد نت
  • تحميل قالب فلامينغو - Flamingo
  • تحميل قالب ناز NazV2.1.1 المدفوع مجانا
  • اضافة هيدر يعرض معلومات المباريات لمدونات البث المباشر
  • افضل موقع للربح من رفع الملفات Mega4Up 2021

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

‏موقع الوليد نت‏

المتابعون

الإشتراك في القناة

الاقسام

  • اضافات بلوجر
  • اضافات ووردبريس
  • الربح من الانترنت
  • خدمات عامة
  • دروس بلوجر
  • سكربتات مجانية
  • قوالب بلوجر
  • قوالب بلوجر مدفوعة
  • قوالب ووردبريس مجانية
  • مسابقات
  • facebook
  • youtube
  • twitter
attachment
  • الصفحة الرئيسية
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • facebook
  • youtube
  • twitter
  • pinterest

الحصول على إشعارات عبر البريد الإلكتروني

عن الموقع موقع الوليد نت

للربح من الانترنت وتطوير مدونات بلوجر وتحميل قوالب بلوجر وقوالب ووردبريس

صفحات مفيدة

  • الابلاغ عن الروابط المعطوبة
  • أداة ضغط أكواد CSS
  • أداة تحويل الاكواد
  • اداة تشفير اكواد

اقسام الموقع

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

  • facebook
  • youtube
  • twitter
موقع الوليد نت