15 اشرطة تمرير جذابة لمدونات بلوجر

15 شريط تمرير جذاب لمدونات بلوجر

في الواقع ، يُعد المظهر الفريد مهمًا لتحسين تجربة المستخدم في مدونتنا. سيؤدي تنفيذ أحد تصميمات شريط التمرير الأنيق التالية إلى تحسين إضافي للجمال الإجمالي لمدونتك.

إذا كنت ترغب في تخصيص شريط التمرير الخاص بمدونتك لإعطاء مدونتك مظهرًا جذابًا ، فستتيح لك هذه القائمة إجراء ذلك باستخدام CSS بسيط. في الواقع ، سيكون لديك أيضًا بعض أنماط شريط التمرير الخاصة بمدونتك لتنفيذها في مدونتك بنقرات قليلة. ربما تكون قد رأيت بالفعل أن العديد من رموز الويب مثل Google و Facebook تستخدم شريط التمرير المخصص الخاص بها . وفقًا لذلك ، يمكنك أيضًا جعل مدونتك تبدو مختلفة عن هذا التعديل الصغير.

اذهب الى المظهر اضغط تعديل 

اضغط  ctrl + f  لتقوم بعملية البحث داخل القالب ثم ابحث عن ]]></b:skin>

ثم ضع احد الاكواد التى تناسبك اعلى ]]></b:skin>

النموذج الاول

نه شريط تمرير مدونة بسيط للغاية ولكنه أنيق. في الواقع ، يحتوي الإبهام شريط التمرير هذا على تركيبة لون جميل مع تأثير Shadow طفيف. وعلاوة على ذلك ، فإن المسار الشفاف يجعلها أكثر جمالا ويلفت الانظار.

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ecf400;
background: #BA8B02;
background: -webkit-linear-gradient(to right, #181818, #BA8B02);
background: linear-gradient(to right, #181818, #BA8B02);
}
::-webkit-scrollbar-thumb:hover {
background: #333;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}

---

النموذج الثانى

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

::-webkit-scrollbar {
width: 11px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: #1a2a6c;
background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
}
::-webkit-scrollbar-thumb:hover {
background: #b21f1f;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

النموذج الثالث

شريط التمرير هذا شريط مثال الجمال المطلق. على الرغم من أنه لا يستخدم أي تأثير ، فإن الإبهام النشط والمسار الجميل يجعله جذابًا وسهل الاستخدام.:

::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #6D6027; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,
transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:active {
background: #0B3B0B;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

النموذج الرابع

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

::-webkit-scrollbar{
width: 11px;
}
::-webkit-scrollbar-track{
background: #c4c6c8;
}
::-webkit-scrollbar-thumb{
background: #105B74;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{
background: #08A67C;
}

---

النموذج الخامس

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

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 8px #00B141;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background: green;
}
::-webkit-scrollbar-thumb:active {
background: #000;
}

في الواقع ، يمكننا تعديل الارتفاع والعرض واللون والخلفية إلخ من شريط تمرير المتصفح الافتراضي. إذا كان لديك القليل من المعرفة بـ CSS ، فيمكنك بسهولة تصميم نمط شريط التمرير الخاص بك بالطريقة التي تريدها.  يمكن للمبتدئين استخدام 3 أو 4 من محددات CSS لتخصيصها ووضعها داخل ملف style.css على المدونة الخاصة بك.

1::-webkit-scrollbar {
}
2::-webkit-scrollbar-thumb {
}
3::-webkit-scrollbar-track {
}

هذه هي ثلاثة محددات CSS أساسية لتخصيص أي شريط تمرير المستعرض يستند إلى WebKit. بشكل أساسي ، يمكنك تعريف 
عرض شريط التمرير داخل محدد CSS الأول. ثانيًا ، يمكنك تنميط الشريط / الإبهام داخل السطر الثانى من كود CSS السابق وأخيرًا ، يمكنك تصميم مسار شريط التمرير داخل محدد CSS الثالث.

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