قوالب Blogger بتقنية css‎+jquery

22‏/03‏/2011

السلام عليكم

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

في غاية الجمال و الهدوء و الجمال

جاهزة للتحميل..

تحميل (Download) مثال (Demo)

اقرأ المزيد »

ميز روابط و أزرار موقعك بمعايير Web 2

12‏/09‏/2010

السلام عليكم

في الآونة الأخيرة اشتهر صيت الويب 2.0 وتطبيقاته و تصاميمه بشكل رهيب كل

يوم يظهر موقع جديد غاية في البساطة وله سمعة كبيرة

وملئ بالاشياء المثيرة لذا فهو يحتل مرتبة قائمة المواقع ويتصدر الترتيبات

والحمدلله بدأت أرى مواقع عربية في ساحة المنافسة و التميز .

مبدئياً لا يوجد معايير في إنشاء أي من عناصر الويب 2.0 في التصميم ولكن يوجد

لدينا العديد من المظاهر التقليدية على سبيل المثال

الألوان الواضحة الساطعة والتدرجات اللونية الكثيرة بشكل مقبول وجميل واليوم

سوف أريكم كيفية تصميم زر ويب 2.0 احترافي

هته التقنية سوف تزيد من جمالية المدونة و دالك كمثال تغييير ايقونة اقرأ المزيد الى احد هته الازرار

او استخدامها لوضع روابط او غيرها..المهم اتركم مع المشاهدة و الشرح

تحميل (Download) مثال (Demo)

اتمنى لك الاستفادة.. و السلام خير ختام

اقرأ المزيد »

امتداد ال png و شفافيتها مع explorer

05‏/09‏/2010

السلام عليكم

إن كنت أحد من يبحث على صور عالية الجودة وصغيرة الحجم

وذات ميزات لم توجد من قبل فأنت تتحدث عن الصور ذات الإمتداد PNG

وبالأخص آخر تطوير وهو png-24 واللذي تفوق على كل الإمتدادات الاخرى

ولكنه ينتظر الدعم من كل المتصفحات

ولكن قد يكون التطور في الأحيان أسرع من الدعم, حيث توجد الأنظمة الجديدة

التي لا تستخدم بعد لأنها غير مدعومة من كل

المتصفحات مثلاً. ولكن المبرمجون والمطورون دائماً يسعون

لإيجاد الحلول بإستخدام الموارد المتاحة وحل المشكلة قبل وصول الدعم.

جرب النظر إلى الصورة عن طريق متصفح الفايرفوكس ..

ستلاحظ ان الصورة سليمة من أي خلل وبجودة عالية جداً ..

إذا نحتاج لحل لجعل الإنترنت إكسبلور يتعرف على الصورة بطريقة صحيحة

الحل:

يبدو أن بحث المبرمجين والمطورين قد وجد حلاً ولكن الأصح أن يسمى حل محدود .. وفيما يلي شرح السبب

SuperSleight

PNG Hack

PNG Transparency in IE6

support.microsoft

لكن في الحقيقة الحلول السابقة كلها معقدة

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

komodomedia

Creative Use of PNG Transparency in Web Design

شرح كيفية الاستخدام

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن هذا الوسم



]]></b:skin>

و نضع قبله تماما هدا الكود



* html img,
 
 * html .png{
 
 position:relative;
 
 behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
 
 this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
 
 this.src = "http://a.imageshack.us/img340/6156/transparente.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
 
 this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", 
 
 this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
 
 );
 
 }

والآن ستظهر كما هي سليمة في متصفح الإنرنت إكسبلور

نجحت التجربة فعلاً الخلفية شفافة..

حل مشكلة الإنترنت إكسبلور يضفي مشكلة في الفايرفوكس

وبالتالي فإن على مدراء المواقع إختيار إحدى الطريقتين حسب مستخدمي مواقعهم

هذا وما زلنا ننتظر أن تدعم جميع المتصفحات هذا الإمتداد الرائع من غير أكواد او فلاتر

اقرأ المزيد »

قائمة مميزة منسدلة بثأتير ال jquery

27‏/08‏/2010

السلام عليكم

الjquery هي ليست لغة برمجة مستقلة كما يظن البعض،

هي عبارة عن مكتبة مجانية في الجافا سكربت

مكتوبة ومطورة بواسطة John Resig،

تتيح لنا وبسهولة تامة إضافة تأثيرات رائعة على صفحات الويب

وسهولة التحكم بالكثير من الأحداث مثل تمرير مؤشر الفأرة

أو النقر بزر الفارة وغيرها الكثير بسطور برمجية قليلة ومفهومة

موضوعنا اليوم تم قرائته من هدا الموقع

عبارة عن ثاتير رائع و مميز و يتم التحكم فيه عبر مؤشر الفأرة

تحميل (Download) مثال (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " اضافة اداةHTML "

و نضع هدا الكود

`<script src="http://blogspacetech.googlecode.com/files/prototype.js" type="text/javascript"></script>`

`<script src="http://blogspacetech.googlecode.com/files/effects.js" type="text/javascript"></script>`

`<script src="http://blogspacetech.googlecode.com/files/side-bar.js" type="text/javascript"></script>`

`<style>`

`{`

    `font-size:75%;`

`}`

`a{`

    `outline: none;`

`}`

`a:active{`

    `outline: none;`

`}`

`#sideBar{`

`text-align:center;`

`}`

`#sideBar h2{`

    `color:#FFFFFF;`

    `font-size:110%;`

    `font-family:arial;`

    `margin:10px 10px 10px 10px;`

    `font-weight:bold !important;`

`}`

`#sideBar h2 span{`

    `font-size:125%;`

    `font-weight:normal !important;`

`}`

`#sideBar ul{`

    `margin:0px 0px 0px 0px;`

    `padding:0px 0px 0px 0px;`

`}`

`#sideBar li{`

    `margin:0px 10px 3px 10px;`

    `padding:2px;`

    `list-style-type:none;`

    `display:block;`

    `background-color:#DA1074;`

    `width:177px;`

    `color:#FFFFFF;`

`}`

`#sideBar li a{`

    `width:100%;`

`}`

`#sideBar li a:link,`

`#sideBar li a:visited{`

    `color:#FFFFFF;`

    `font-family:verdana;`

    `font-size:100%;`

    `text-decoration:none;`

    `display:block;`

    `margin:0px 0px 0px 0px;`

    `padding:0px;`

    `width:100%;`

`}`

`#sideBar li a:hover{`

    `color:#FFFFFF;`

    `text-decoration:underline;`

`}`

`#sideBar{`

    `position: fixed;`

    `width: auto;`

    `height: auto;`

    `top: 140px;`

    `left:0px;`

    `background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqSUsewTDY2rZOaXy-XBhlJlyGcoL3eDhw5kwlXcXUNHalH4VCt_gKSCkHCmBB45bZwg3I-rHDThmdhzj4M8YKUce7SKk3kLgxMfo_ogBxoe4o-YBrRQisuV-2tzbld9sagKDXqPpGIjg/s320/2wejg37.jpg.gif);`

    `background-position:top right;`

    `background-repeat:repeat-y;`

`}`

`#sideBarTab{`

    `float:left;`

    `height:137px;`

    `width:28px;`

`}`

`#sideBarTab img{`

    `border:0px solid #FFFFFF;`

`}`

`#sideBarContents{`

    `float:left;`

    `overflow:hidden !important;`

    `width:200px;`

    `height:320px;`

`}`

`#sideBarContentsInner{`

    `width:200px;`

`}</style>`

`<div id="sideBar">`

        `<div id="sideBarContents" style="display:none;">`

        `<div id="sideBarContentsInner">`

            `<h2><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span>`

`</div></h2>`

`<ul>`

`<li><a href="">الرابط الاول</a></li>`

`<li><a href="">الرابط الثاني</a></li>`

`<li><a href="#">الرابط الثالت</a></li>`

`<li><a href="#">الرابط الرابع</a></li>`

`</ul>`

`</div> </div>`

    `<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5Rzz2oPR7EKSgnDE1KnscwVF0_q3uE0ZSSZHsWl5xmEbH150uGgdBHl2PNdvMS6uWrj5TyHhiz2omHkMqaf2DqSgHnmR1KLV1MMfYratwR5D7S4OujsGX8DCTp78NtxFRIh2A3Qy_nE/s320/blogspacetech.gif" title="sideBar" /></a>`

`</div>`

المتغيرات ...موجودة فقط في كود ال HTML

<div id="sideBar"> <div id="sideBarContents" style="display:none;"> <div id="sideBarContentsInner"> <h2><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span> </div></h2> <ul> <li><a href="http://doaib.blogspot.com/">الرابط الاول</a></li> <li><a href="http://abu-iyad.blogspot.com">الرابط الثاني</a></li> <li><a href="#">الرابط الثالت</a></li> <li><a href="#">الرابط الرابع</a></li> </ul> </div> </div> <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5Rzz2oPR7EKSgnDE1KnscwVF0_q3uE0ZSSZHsWl5xmEbH150uGgdBHl2PNdvMS6uWrj5TyHhiz2omHkMqaf2DqSgHnmR1KLV1MMfYratwR5D7S4OujsGX8DCTp78NtxFRIh2A3Qy_nE/s320/blogspacetech.gif" title="sideBar" /></a> </div>

اتمنى لك الاستفادة

اقرأ المزيد »

من افضل ما قرات... تقنية ال css

24‏/08‏/2010

من افضل ما قرات في مجال البرمجة

لن تشعر بانه مترجم

الكتاب يتمحور حول تقنية CSS

ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.

بالنسبة لفهرسة الكتاب فهو لا باس به

الكتاب موجه للمبتدئين والمتوسطين والمحترفين كل له قانونه الخاص

CSS هي اختصار لي Cascading Style Sheets.

كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

التحكم بالتصميم من خلال ملف واحد.

إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.

إنشاء تصاميم خاصة

العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم...

تفضلو بالتحميل

اقرأ المزيد »

صفحة خطأ Error 404 لمدونات Blogger

السلام عليكم

صفحات الخطأ 404 تتمثل في الاتصال بالموقع و لكن... لن يتم العثور على صفحة الويب

فهدا الخطا قد يحدث في بعض الاحيان الى أن الصفحة غير متوفرة بصورة مؤقتة

أو ان الصفحة قد تم حذفها

اليوم لدينا طريقة لعمل صفحات الخطأ لمدونات بلوجر بحيث

مضون هته الصفحة هي أنه

عليك التحقق للتأكد من أن لديك العنوان الصحيح ومن كتابته بشكل سليم.

أو إذا كان هذا العنوان عنوان ارتباط,

فقد يكون عنواناً قديماً ولم يعد متوفراً...

و هدا مثال حي

مثال (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن هدا الكود

ملاحظة :

ان لم يضهر الكود في المتصفح فيمكنك تحميله من هنا

و نقوم بتعويضه بهدا الكود



<b:if cond='data:numPosts == 0'>



<style>



html {







    height: 100%;







background: url(http://a.imageshack.us/img130/294/error404o.jpg) no-repeat center 50%;







    margin: 0;







}







body {







    display: none;







}



</style>



</b:if>







  <!-- navigation -->

و بالنسبة للصورة فهي من اختيارك

أخيرا : استعرض مدونتك ثم احفظ قالبك.

اقرأ المزيد »

صندوق تويتر لاصحاب المدونات و المواقع

16‏/08‏/2010

هي اضافة جد مميزة لمشاركة المواضيع و تبادل الاراء

وقبل أن أتطرق إلى طريقة وضعها على بلوجر لا بأس أن أشير

أنه يمكن لكافة المواقع و المدونات إضافتها و تخصيصها عبر هده الصفحة

المهم اخواني من مميزات هته الاضافة :

تصميم مميز بتقنية الCSS و الjquery

امكانية وضع و اختيار الزر

لن يضطر الزائر الى مغادرة مدونتك و هو يغرد في هته الاضافة

نافدة مميزة و سريعة تنشر من خلالها المحتوى

أما طريقة التركيب على بلوجر

فسوف تجده في الموقع لكنه خاطأ

الطريقة الصحيحة هي كالتالي و من تجربتي الشخصية

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن هذا الكود



<data:post.body/>

مباشرتا تحته اضف هدا الكود



<b:if cond='data:blog.pageType == "item"'>



<div class='tweet-this'><a href='javascript://'>Tweet this</a></div>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>



<script src='http://tweet-it.s3.amazonaws.com/tweet-it.js' type='text/javascript'/>



<script type='text/javascript'>



    $(document).ready(function(){



        $(".tweet-this a").tweetIt({ hostedBlog: true });



    })



</script>



</b:if>

أخيرا : استعرض مدونتك ثم احفظ قالبك.

مثال (Demo)

اقرأ المزيد »

ميز صورك بتقنية css-jquery

11‏/08‏/2010

اليوم لدينا موضوع بسيط سوف يعطي ميزة رائعة لصورك

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

يمكنك انت شخصيا التحكم في تحركها و كدا اختيار اتجاهها عمودي او افقي

أتمنى أن يكون مفيد لك

مثال 1 (Demo) مثال 2 (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن هذا الوسم



]]></b:skin>

و نضع قبله تماما هدا الكود

`#container{ width:400px; margin:0px auto; height:380px; margin-top:50px} #image1{ position:absolute; cursor:pointer; width:300px; height:190px; } #image2{ display:none; position:absolute; cursor:pointer; }`

الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery،

يوجد نوعان من الثاثيران..فكما قلت سابقا افقي أو عمودي

VERTICAL ;HORIZONTAL

ابحث عن هذا الوسم

`</head>`

و ضع فوقه احد هته الاكواد حسب اختيارك

HORIZONTAL



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>



<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/SCRIPT%20HORIZONTAL.js"></script>

VERTICAL



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>



<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/SCRIPT%20VERTICAL.js"></script>

أخيرا : استعرض مدونتك ثم احفظ قالبك.

تطبيق الإضافة

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

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة



<div id="container">



<img id="image1" src="URL IMAGE 1" />



<img id="image2" src="URL IMAGE 2" />



</div>

روابط استفدت منها في كتابة الموضوع:

اقرأ المزيد »

آخر مواضيع المدونة

أقسام المدونة

روابط مفيدة

الصفحات

قوالب Blogger بتقنية css‎+jquery

ميز روابط و أزرار موقعك بمعايير Web 2

امتداد ال png و شفافيتها مع explorer

و نضع قبله تماما هدا الكود

قائمة مميزة منسدلة بثأتير ال jquery

و نضع هدا الكود

المتغيرات ...موجودة فقط في كود ال HTML

من افضل ما قرات... تقنية ال css

كيف ستفيدني CSS؟

صفحة خطأ Error 404 لمدونات Blogger

أخيرا : استعرض مدونتك ثم احفظ قالبك.

صندوق تويتر لاصحاب المدونات و المواقع

أخيرا : استعرض مدونتك ثم احفظ قالبك.

ميز صورك بتقنية css-jquery

و نضع قبله تماما هدا الكود

`#container{ width:400px; margin:0px auto; height:380px; margin-top:50px} #image1{ position:absolute; cursor:pointer; width:300px; height:190px; } #image2{ display:none; position:absolute; cursor:pointer; }`

الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery،

`</head>`

أخيرا : استعرض مدونتك ثم احفظ قالبك.

تطبيق الإضافة