آخــــر اخبار التقنية والتكنولوجيا: css

سلايدر إحترافي لمدونات بلوجر

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

أولاً : ندخل للوحة التحكم ببلوجر .
ثانياً : نضغط على "قالب" .
ثالثاً : نضغط على "تحرير html" .
رابعاً : قم بالبحث عن هذا الكود عن طريق ctrl+f :

]]>

خامساً : ضع فوقه هذا الكود :

.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}
.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssilTnH26CEVD97p7o-4ABkk9zEEvqDoUJ96MRBFKSt-7X2wvXH-rTH8nAbR-NSbdcvihXGY2K64cuSS2zcC6n6cmGKbDaJ3rKbnJ84b-zWuaGNePVd_TzXv_DrEtkTrgjxLR95uBk9I/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}
.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}
.ei-slider-large li img{width:100%;}
.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}
.ei-title h2,.ei-title h3{text-align:right;}
.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}
.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0;}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;max-height:100px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3))           );}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

سادساً : قم بالبحث عن هذا الكود :

1

سابعاً : ضع فوقه هذا الكود : (مع تغيير ما لونه أحمر بالتصنيف أو القسم الذي تريده)

وهكذا تكون قد أضفت السلايدر :)

لا تبخل علينا بتعليق مشجع ,, ولا تنسى مشاركة الموضوع مع أصدقائك .

المصدر : المساعد العربي .

تابع القراءة Unknown

طريقة تعريب قوالب بلوجر بدون برامج

2:44 ص | نشره : Unknown | نشر في: أكواد , بلوجر , جميع المشاركات , دروس للمواقع , شروحات و طرق , قوالب بلوجر , css , html | 0تعليقات

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

طريقة تعريب قوالب بلوجر بدون برامج :

تغيير إتجاهات الكتابه فى القالب وعكسها :

1 : قم بفتح القالب ببرنامج Notepad .

2 : قم بنسخ ما بين و .

3 : قم بفتح ملف Notepad جديد وألصق به الكود الذي نسخته .

4 : من قوائم Notepad إختر Search وثم remplace .

5 : أكتب بالمربع الأول Right وفي الثاني Left .

6 : إضغط على Replace all .

7 : أكتب مرة أخرى في المربع الأول Left وفي الثاني Right .

8 : إضغط على Replace all .

9 : قم بوضع بالمربع الأول copyleft وفي المربع الثاني copyright .

10 : إضغط على Replace all .
11 : قم بنسخ الكود وألصقه بين و في الملف الأول Notepad .
12 : قم بحفظ الملف .
13 : قم بتركيب القالب على مدونة تجريبية .

تبديل الحاشية والمحاذاة :

1 : قم بالدخول إلى بلوجر وإختر المدونة التجريبية .
2 : قم بالضغط على "قالب" ثم إضغط على "تحرير Html" .
3 : قم بالضغط على Ctrl + f من لوحة المفاتيح .
4 : قم بكتابة padding: .

ستجدها على عدة أشكال لكن الشكل المقصود هو كهذا :

padding: 3px 10px 5px 4px;

5 : قم بتبديل القيمتين الثانية والرابعة (من إتجاه اليسار) .
6 : قم بالبحث عن كل الأكواد التي تشبه الخطوة 4 وقم بعمل لها مثل الخطوة 5 .
7 : الآن نكرر ما فعلناه بالخطوة 3 .
8 : قم بكتابة margin: . (يجب أن يكون شكلها كما الخطوة 4)
9 : قم بتبديل القيمتين الثانية والرابعة .

وضع حقوق التعريب :

1 : قم بالضغط على ctrl + f من لوحة المفاتيح .
2 : أكتب

المصدر : http://aplaticos.blogspot.com/2013/12/how-translate-blogger-template.html

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

تابع القراءة Unknown

كيف تضع أكواد php في بلوجر

2:03 ص | نشره : Unknown | نشر في: أكواد , بلوجر , جميع المشاركات , شروحات و طرق , css , html , java script | 0تعليقات

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد, أما بعد:

بلوجر لا تقبل أن تدخل في برمجت مدوناتها عدة لغات برمجة, منها لغة الـphp , وهذا ما يواجه المدونين من صعوبة, خصوصاً إذا أرادوا عمل خاصية (تسجيل وتسجيل الدخول وتسجيل الخروج) من خلال php , ولكن لا يوجد مشكلة إلا ولها حل, وحل تلك المشكلة موجودة هنا, وهي طريقة رائعة وسهلة جداً, والآن سأتركم مع الطريقة.

كيف تضع أكواد php في بلوجر:

1. أول شيء قم بعمل كود الـphp .

2. ثم قم برفعه على إستضافة وإختر إستضافة تحتفظ بالملفات لوقت طويل.

3. قم بأخذ الرابط المباشر للكود.

4. ضع هذا الكود في المكان الذي تريده مع تغيير ما لونه أحمر برابط الكود المباشر.

ملحوظة: يمكنك أن تغير طول وعرض الكود من خلال تغيير ما لونه أزرق.

المصدر : http://aplaticos.blogspot.com/2013/12/add-php-codes-in-blogger.html

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

تابع القراءة Unknown

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

3:12 ص | نشره : Unknown | نشر في: إضافات بلوجر , إضافات للمتصفح , أكواد , بلوجر , جميع المشاركات , شروحات و طرق , css , html , java script | 0تعليقات

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد. أما بعد:
إن كنت من متابعين مدونة المحترف فلربما رأيت الإضافة الجديدة الموجودة في مدونة المحترف التي إسمها هو "مواضيع هذا الأسبوع" وهي متحركة وأنيقة وتظهر عدد التعليقات لكل تدوينة وتاريخ النشر وبها عدة تأثيرات Css ومنها التأثير على الصور, لمعاينتها أنظر لهذه الصورة, كما أنها موجودة في الجانب في مدونتي:

معاينة: إضافة مواضيع هذا الأسوع مثل مدونة المحترف.

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

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

ضع تعليق فرأيك يهمنا

المصدر : مدونة أبلتكس التقنية | للتقنية عنوان |

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

تابع القراءة Unknown

جوجل تطرح برنامج جوجل Google Web Designer Beta لتصميم صفحات الويب

7:05 ص | نشره : Unknown | نشر في: أخبار تقنية , إضافات للمتصفح , أكواد , الحاسوب , برامج , جميع المشاركات , جووجل , محركات البحث , ويندوز 7 , ويندوز 8 , css , html , java script | 0تعليقات

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد .
أما بعد :
قبل عدة ساعات طرحت شركة جوجل برنامجها Google Web Designer Beta والذي يحتاجه المطورين منذ زمن لبرمجة صفحات ويب مكونة من Css3 و Html5 لسهولته وإحترافيته.

وحتى أن Google Web Designer لا يزال في نسخته التجريبية لكنه قادر على برمجة صفحات HTML5 قوية وديناميكية ومتوافقه مع جميع الاجهزة سواء حواسيب لوحية, أو حواسيب مكتبية أو متنقلة, أو حواسيب لوحية وكذلك الهواتف.

وأيضاً يمكنك تصميم مجسمات ثلاثية الابعاد 3D وتحريكها أيضاً, وجوجل تهدف من خلال برنامجها Google Web Designer زيادة عدد مواقع الويب, وهكذا تقوم بالتسويق إلى منتجاتها AdSensea وAdWord، حيث أن برنامج Google Web Designer له خاصية دعم الإعلانات.

يمكنك تحميل الإصدار التجريبي من Google Web Designer.

المصدر : http://aplaticos.blogspot.com/2013/10/Google-Web-Designer-Beta.html

ملحوظة: جميع التواريخ والساعات والأوقات بشكل عام الواردة أعلاه تعتبر من تاريخ ووقت نشر التدوينة على مدونة أبلتكس التقنية | للتقنية عنوان |.

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

تابع القراءة Unknown

حصرياً :6 مربعات بحث إحترافية بتقنية الـCSS للمدونات 2013

9:14 ص | نشره : Unknown | نشر في: إضافات بلوجر , إضافات للمتصفح , أكواد , بلوجر , جميع المشاركات , css , html | 0تعليقات

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد .

اما بعد:

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

ملحوظة: لتضيف الكود في مدونات بلوجر إتبع هذه الخطوات :

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

شكل مربع البحث الأول

aplaticos-searchbox">

شكل مربع البحث الثاني

aplaticos-searchbox">

شكل مربع البحث الثالث

aplaticos-searchbox">

شكل مربع البحث الرابع

aplaticos-searchbox">

شكل مربع البحث الخامس

aplaticos-searchbox">

شكل مربع البحث السادس

aplaticos-searchbox">

المصدر : http://aplaticos.blogspot.com/

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

تابع القراءة Unknown

طريقة جعل قوالب بلوجر متوافقة مع متصفح internet explorer

6:46 ص | نشره : Unknown | نشر في: إضافات للمتصفح , أكواد , بلوجر , جميع المشاركات , جووجل , سيو , قوالب بلوجر , css | 0تعليقات

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد .

أما بعد :

كلنا نعرف لغة الـcss واللمسة الرائعة التي تضيفها تلك اللغة للمدونات والمواقع ,وكما أنها في بعض الأحيان تسهل على الزائر تصفح المدونة فمثلاً وجود قائمة مسندلة بلغة الـcss يسهل على الزائر بشكل كبير فبدل أن يضغط على "دورات برمجية" ثم تظهر له صفحة جديدة فيها أقسام الدورات كمثال فقط يمرر
مؤشر الماوس عليها لتظهر له الأقسام بقائمة مسندلة جميلة تحتوي على الأقسام, ولكن كالكثير من الأمور المميزة فيها مشكلة وهي مشكلة التوافق مع متصفح إنترنت إكسبلورر, واليوم أتيت لكم بطريقة ذهبية كنت أقوم بإستعمالها لجعل المدونات متوافقة مع متصفح إكسبلورر بمقابل مادي لكن الآن ستكون الطريقة مجانية 100% ,وعليك أن تعرف رغم أن متصفح كروم يعتبر مميزاً في دعم تطورات اللغات البرمجية وخصائصها ومتصفح فاير فوكس كذلك إلا أن متصفح إنترنت إكسبلورر هو من أكثر المتصفحات إستخداماً حسب إحصائيات "Net Applications".

الطريقة:

أدخل إلى بلوجر وإختر إسم مدونتك.
إضغط على "قالب" من القائمة الجانبية.
إضغط على "تحرير html".
إبحث عن هذا الكود عن طريق "ctrl+f" من لوحة المفاتيح:
أضف بعده هذا الكود:

أنصحك بقراءة:

طريقة تسريع مدونات بلوجر عن طريق ضغط أكواد css (speed blog css)

_________________________________________________

المصدر : http://aplaticos.blogspot.com/2013/08/CSS-EXPloRER.html

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

بقلم خالد جلاجل

بسم الله الرحمن الرحيم
أسمي خالد من الأردن , أهتم بالبرمجة , و تحديداً برمجة الويب , و خصوصاً برمجة المدونات الإلكترونية , و قد إكتسبت مهاراتي بالبرمجة عن طريق التجربة التي حصلت عليها من مشواري التدويني , يمكنكم متابعة تدويناتي عن طريق زيارة مدونتي

تابع القراءة Unknown

طريقة تسريع مدونات بلوجر عن طريق ضغط أكواد css (speed blog css)

1:48 م | نشره : Unknown | نشر في: أكواد , بلوجر , جميع المشاركات , شروحات و طرق , مواقع مفيدة , css | 0تعليقات

بــــســم الله الرحـــــمـــــــــــــــن الـرحــيــم , والـــصـلاة والــســلام على رسول الله محمد ,

أما بعد :

الكثير من المدونات العربية تعاني بطئ التحميل, مما يؤدي إلى ذهاب عدد كبير من الزوار, لذا سوف أقدم لكم في هذه المشاركة ( التدوينة ) طريقة تسريع مدونات بلوجر عن طريق ضغط أكواد css.

الطريقة :

أولاً: أدخل إلى بلوجر.

ثانياً: أضغط على "قالب" من القائمة الجانبية.

ثالثاً: إضغط على "تحرير html".

رابعاً: إنسخ ما بين

خامساً: أضغط هنا للدخول إلى الموقع.

سادساً: ضع إشارة بجانب "Normal" و "Don't strip any comments" .

سابعاً: ضع ما نسخته في المربع الموجود أسفل "Insert CSS code" وإضغط على "compress-it!" .

ثامناً: إنسخ الكود الذي تم إظهاره و ضعه بدل ما قمت بنسخه.

إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني

بقلم خالد

تابع القراءة Unknown