Egy For Us: بلوجر -->

شاهد ايضاً

Post Top Ad

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

الثلاثاء، 25 سبتمبر 2018

اضافة مربع البحث لمدونات بلوجر 6 انماط مختلفة لمربع البحث

8:28 م 0

اضافة مربع البحث لمدونات بلوجر
6 انماط مختلفة لمربع البحث


1- النمط الاول :
اختر اضافة اداة HTML وضع الكود بداخلها

بوكس 1



<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yuZ8VGPvAAOQwnGc4JdhxcbokvCJ1Eol4zIkM5bxzpEFbmIZ67ytSAItNe7dM9GUxoOi4bqkDWaz8u9KPIWTvriweG5I5pBIUjTNRXRSbS0HibTCxA3WgiU1z88-305B2MpbiVPK7kwd/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>

2- النمط الثانى :




<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yuZ8VGPvAAOQwnGc4JdhxcbokvCJ1Eol4zIkM5bxzpEFbmIZ67ytSAItNe7dM9GUxoOi4bqkDWaz8u9KPIWTvriweG5I5pBIUjTNRXRSbS0HibTCxA3WgiU1z88-305B2MpbiVPK7kwd/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYdAzyWfM6o1yOQlIP5XHTSX_mKDF1tbskzAmphvNkMjODxMX7kzr_RXOkedMa3cNgdXmkMVHJ8ImsV6zp6DSrHJUlXiymjPqN1HnX84hXO280-fgpq58Lin4hfkU1fleQx7IV5Ifkhdc/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

3- النمط الثالث :




<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPH58Ol689khEn9U5YSJOvSIt5JaOUExxsQqz48Y9CnDb7NRwr48Um075WLNRyvugOtVb2Bjn2EvMgzO8yiBmrAYRjy8lPgTxO_w8jYdk5FP9MPeOb5UhnxdOuNQP9Qjm8fFehOSmJVKr/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ml57j3AI5faGpxvGV7jZMNExzIrlg_MgQ5M8XuV-6vkY9NYEgpJVJsn4QflWzeiTv_e85TheA7R5XM6AEXPBAZ8-YPJF0bkrHMHkKu1ub8Eddwld0Ia2onyjCOR4oBsDzRZgOx1pgHKF/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnhjEqhfp6AmmaY3gV3V9hPaNo4A1_AHYes84xr3ND-NxRjc1AyvM7k8i0QHCpA-jMMJjKWy7-gFB299klp7DYCrrjQ89QUuN6feCj-JfX0kXKIQx2ApjeqyqoMpXphVXSF6m_3KZOty4/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnhjEqhfp6AmmaY3gV3V9hPaNo4A1_AHYes84xr3ND-NxRjc1AyvM7k8i0QHCpA-jMMJjKWy7-gFB299klp7DYCrrjQ89QUuN6feCj-JfX0kXKIQx2ApjeqyqoMpXphVXSF6m_3KZOty4/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
4- النمط الرابع :




<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoV8SCDB5nMW1gl2_jtWbYwZ0RSBHV4yURtRLH3fVALMiMPD6t908Oiw7QyYAlbBCJMIvXjXp0ZmS2wroPquN1o0w_zk9zPV-pjgdvrjKmv8Q7_XAXky7fK5bVNv-_ykK7n6Ln_U5G5cg7/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixamloRgmne1i7jaSpM7HK1jmRrBMmNx_6EIBxfdyHQHT66pDdQdrH718-vR8wlfQdD8e2C40U0qvoPJ6pDwAwsNUc2hM2ci_2YBADHeHIc8CyYqNe5ehI3NLS6-le9o3sCozczH6NYlEv/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ2ISSsH0ZQU3XzlFBDOyJzdMAAmOAAe2U5GakSJkuhOoPXeSFTMWv1Fq__YRGi5pnHtErMXZ-A-cxpB8Hul0xgbSywbcSzcmTMBuU6Pt2TL2haVbg_bLeuufil_A9dGthMstUoegATIZ/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
5- النمط الخامس :



<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDYK2d9B_XFrZC8UP2j3gp4JFw8CSCfIwsGSfPu0CbV1I5ueszCEgGvdTj6ZCoozep7j5LLP8c5GviNZqBi-ViKEtH7WEd4-Xpk2fJT-_2k2xt2zud5pgnfI6j3KS_YqfANFjRkP64xH/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh47QUPutGpajmAxPBkzHlticAjreaX38qOyJiq7VLgpX0m49UxGsdYByeba52aXamVSZhK2rAhT10oq-BaALk5Mn6DIWrAS3CZVYUqbUFQX-3nlyy4ovL9QQQy-HxYfU2ljme01_n_Mgq/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmVTSQCI6vEgUoP7snr-Ut_OJql8XgaqDDK0FH1VuF0-qWEGZVaFduRUX8FzmoeL0K0XETvnG8WZ8lP6fUSxAEO9OGZtnnOLSXMX1NJDk7X9UEUIjN123eisJGcJKoidnA1777mauvh55/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>
أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

الأربعاء، 12 سبتمبر 2018

الملف الثانى من اشرطة التمرير الجانبية لمدونات بلوجر

3:28 م 0













::-webkit-scrollbar {
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #C2C2C2;
box-shadow: inset 0 0 5px #AEAEAE;
}
::-webkit-scrollbar-thumb:hover {
background-color: #8A8A8A;
}
::-webkit-scrollbar-thumb:active {
background-color: #727272;
box-shadow: inset 0 0 5px #595959;
}
::-webkit-scrollbar-track:hover {
background-color: #E6E6E6;
border: 1px solid #CFCFCF;
}
::-webkit-scrollbar-corner {
background: transparent;
}



::-webkit-scrollbar {
background: transparent;
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #555;
box-shadow: inset 0 0 2px #333;
}
::-webkit-scrollbar-corner {
background: transparent;
}


::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));
background: -webkit-linear-gradient(#09123c, #0e3e8d);
background: -moz-linear-gradient(#09123c, #0e3e8d);
background: -o-linear-gradient(#09123c, #0e3e8d);
background: -ms-linear-gradient(#09123c, #0e3e8d);
background: linear-gradient(#09123c, #0e3e8d);
}
::-webkit-scrollbar-thumb:hover {
background: #0000a0;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-corner {
background: transparent;
}

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #2E9AFE;
}
::-webkit-scrollbar-thumb:active {
background: #555;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}



::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f));
background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #008542;
}
::-webkit-scrollbar-thumb:active {
background: #004522;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

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

2:08 م 0

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

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

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

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



ثم ضع احد الاكواد التى تناسبك اعلى ]]></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 الثالث.
أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

السبت، 8 سبتمبر 2018

الملف الثالث من اشرطة التمرير الجانبية لمدونات بلوجر

1:57 م 0

الملف الثالث من اشرطة التمرير الجانبية لمدونات بلوجر













::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268));
background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #FF9615;
}
::-webkit-scrollbar-thumb:active {
background: #904F00;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}




::-webkit-scrollbar {
width: 8px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804));
background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
}
::-webkit-scrollbar-thumb:hover {
background: red;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

::-webkit-scrollbar {
width: 12px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff));
background: -webkit-linear-gradient(#f600fe, #fd63ff);
background: -moz-linear-gradient(#f600fe, #fd63ff);
background: -o-linear-gradient(#f600fe, #fd63ff);
background: -ms-linear-gradient(#f600fe, #fd63ff);
background: linear-gradient(#f600fe, #fd63ff);
}
::-webkit-scrollbar-thumb:hover {
background: #C60088;
}
::-webkit-scrollbar-thumb:active {
background: #6D024B;
}
::-webkit-scrollbar-track {
background: #F6E4F0;
}
::-webkit-scrollbar-track:active {
background: #FCC9EC;
}
::-webkit-scrollbar-corner {
background: transparent;
}

::-webkit-scrollbar {
width: 9px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777));
background: -webkit-linear-gradient(#bdbbbb, #777);
background: -moz-linear-gradient(#bdbbbb, #777);
background: -o-linear-gradient(#bdbbbb, #777);
background: -ms-linear-gradient(#bdbbbb, #777);
background: linear-gradient(#bdbbbb, #777);
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313));
background: -webkit-linear-gradient(#4b4b4b, #131313);
background: -moz-linear-gradient(#4b4b4b, #131313);
background: -o-linear-gradient(#4b4b4b, #131313);
background: -ms-linear-gradient(#4b4b4b, #131313);
background: linear-gradient(#4b4b4b, #131313);
}
::-webkit-scrollbar-thumb:active {
background: #111;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

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

::-webkit-scrollbar { 1
}
::-webkit-scrollbar-thumb { 2
}
::-webkit-scrollbar-track { 3
هذه هي ثلاثة محددات CSS أساسية لتخصيص أي شريط تمرير المستعرض يستند إلى WebKit. بشكل أساسي ، يمكنك تعريف عرض شريط التمرير داخل محدد CSS الأول. ثانيًا ، يمكنك تنميط الشريط / الإبهام داخل السطر الثانى من كود CSS السابق وأخيرًا ، يمكنك تصميم مسار شريط التمرير داخل محدد CSS الثالث.

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

الخميس، 6 سبتمبر 2018

النموذج السابع عرض عناوين فقط للموضوعات الحديثة

1:29 م 0

النموذج السابع عرض عناوين فقط  للموضوعات الحديثة 

النموذج السابع عرض عناوين فقط للموضوعات الحديثة

قم باضافة اداة HTML/JAVASCRIPT

ضع الكود بداخل الاداة
ضع الاداة فى اى مكان تفضله

انسخ الكود



<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 10;var showpostdate = false;var standardstyling = true;</script>
<script src="http://egyforus.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="https://egyforus.blogspot.com/2018/09/recent-posts-widget-7-simple-with-only.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

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

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

النموذج السادس من اضافات الموضوعات الحديثة بسيط وبدون ستايل

1:05 م 0

النموذج السادس من اضافات الموضوعات الحديثة بسيط وبدون ستايل

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

انسخ الكود



<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://egyforus.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="https://egyforus.blogspot.com/2018/09/recent-posts-widget-simple-with-no-style.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}
</style>
لاتنسى ان تغير عنوان مدونتى باللون الاسود بعنوان مدونتك 
أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني:
اقرأ المزيد
By v�o l�c ليست هناك تعليقات:
التسميات:

مشاهدات

Post Top Ad