الفضاء التكنولوجي

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

noreply@blogger.com (khaled) — Mon, 15 Aug 2011 11:23:00 +0000

السلام عليكم

ادا كنتم مهتمين بالتجارة الالكترونية..أو ادا كنتم تريدون نقل عملية البيع والشراء التقليدية

من عالم الواقع إلى العالم الافتراضي فهذه القوالب توفر لكم منبرا مميزا في المتاجرة الالكترونية

عيوب القوالب :

للأسف .. في منصة التدوين بلوجر يتلخص عيوب القوالب الى عدم احتوائها على :

أسلوب الوساطة The brokerage model :

أي دور التاجر هنا بالجمع ما بين الراغبين بالبيع

والراغبين بالشراء مقابل الحصول على عمولة عن كل عملية بيع وشراء.

أسلوب بيع الاشتراكات The subscription model :

في هذا الأسلوب يقوم التاجر ببيع الاشتراكات أي أنك لا تستطيع تصفح المحتوى

إلا لقاء اشتراك معين.

ميزة القوالب :

الأسلوب الإعلاني The advertising model :

وهو أسلوب شبيه جدا بما تفعله الشركات لتحقيق الأرباح

الاسلوب الاغرائي :

يمكنك اغراء اي متصفح للمدونة لاعطاءه التفاصيل الكاملة لنوع المنتج

أترككم مع المشاهدة و التحميل

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

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

قالب moving boxe بتقنية ال jquery

noreply@blogger.com (khaled) — Mon, 04 Jul 2011 02:44:00 +0000

السلام عليكم

اليوم لدينا قالب جد مميز moving boxes Content

تكمن الفكرة في انشاء و برمجة القالب الى اضافة مربعات صغيرة مثناثرة في الجزء العلوي

للقالب مع امكانية تغيير الخلفية و خلق تأثيرات جد مميزة..

تم استخدام مكتبات jQuery عديدة وندكر اهمها :

jScrollPane Plugin by Kevin Luck

jQuery 2d transformation plugin by Grady

jQuery Easing Plugi

يمكنكم زيارة الموقع لشرح أكثر..tympanus

المهم تم تحويل هذا القالب بلغة HTML الى قالب بلوجر بلغة XML

و بالتأكيد..تم تحويله بنجاح و يمكنكم مشاهدة المثال و تحميله..

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

لقد تم ادخال تعديلات عديدة حتى يتناسب مع مدونات بلوجر

و لا توجد اي اخطاء برمجية

و زيادة على دالك تم اضافة خاصية الاستماع الى الموسيقى بتقنية ال HTML5

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

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

أعرف انك ربما تكون متشوق للبدأ في هذه الخطوة و لكن عليك ان تتحلى بالصبر..

تحياتي للجميع .

تغيير الصورة الأصلية و اخفائها عند نقلها

noreply@blogger.com (khaled) — Fri, 01 Jul 2011 10:13:00 +0000

السلام عليكم

لدينا اليوم دالة javascript تمنع استغلال الصور واعادة نشرها..

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

او يمكن حتى التفنن في الصورة الشفافة ووضع : أن هذه الصورة تم نقلها من مدونة أخرى.

لكن هذا لا يعنا ان الصورة في مدونتك محمية تماما من السرقة لأن هناك عدة طريق لاستيرادها.

لماذا الصور في حاجة إلى الحماية ؟

الحفاظ على صحة المصدر ، من هو مالك و مبدع الصورة

حفظ الصور من معالجة الصور الرقمية في أيدي الجاهلين ،خاصة

إذا كانت الصورة خاصة بك أو صورة عائلية

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

ثم تحرير HTML

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

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

نبحث عن الوسم التالي



</head>

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



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



<script type='text/javascript'>



jQuery.fn.protectImage = function(settings) {



settings = jQuery.extend({



image: 'https://lh5.googleusercontent.com/-Z5poq9_C1uc/Tg0I1qJlrKI/AAAAAAAAAb4/yo_fwtdbg_8/blank.gif',



zIndex: 10



}, settings);



return this.each(function() {



var position = $(this).position();



var height = $(this).height();



var width = $(this).width();



$('<img />').attr({



width: width,



height: height,



src: settings.image



}).css({



top: position.top,



left: position.left,



position: 'absolute',



zIndex: settings.zIndex



}).appendTo('body')



});



};



$(window).bind('load', function() {



  $('img.protect').protectImage();



});







</script>

الان في حالة ما ادا كانت الصورة عائلية و تريد نشرها في الرسالة

ماعليك فقط الانتقال الى تحرير ال HTML

ووضعها بهذه الطريقة



<img src="1.jpg" class="protect" height="xx" width="xx">

الان في حالة نسخ أو محاولة احتفاظ بالصورة في جهاز الكمبيوتر ..

لن تنسخ و تحفظ الصورة الأصلية و انما الصورة الشفافة الموجودة في الدالة السابقة

ملاحظة

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

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

بعض المراجع المهمة

davidwalsh

wikipedia Hot-linking

wikipedia Inline_linking

كيفية إضافة نمودج إتصال بتقنية PHP

noreply@blogger.com (khaled) — Thu, 24 Mar 2011 19:11:00 +0000

* السلام عليكم

كل مدون منا يعرف اهمية التواصل مع قراء موقعه

خاصة عندما لا تريد أن تكشف عن البريد الإلكتروني للأشخاص للاتصال بك.

لدينا اليوم موقعين يوفران لك هذا النمودج و بكل سهولة.

*اولا وقبل كل شيئ لمادا تقنية ال PHP ؟

-هذه التقنية تحول المدونة او الموقع الى موقع تفاعي و ليس ساكن

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

نعلم العديد من المواقع لتقديم خدمة الاتصال لكن لها سلبيات

كتحويل الزائر الى موقعها او وضع اعلانات خارجية و غيرها..

المهم موقعين مخاترين و مميزان لاضافة نمودج الاتصال الى BLOGGER

الموقع الاول

زيارة الموقع foxyform

foxyform

هو موقع جد مميز لانشاء form خاص بك

من مميزاته :

اضافته بدون التسجيل في الموقع

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

لن تخسر زائرك..لان ارسال الرسالة يتم في نفس الصفحة و بدون تحديثها

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

حقا فهو موقع يستحق التجربة

الموقع الثاني

زيارة الموقع jotform

jotform

*مزايا استخدام JotForm!

-مجاني تماما ؛

-و المعلومة الموثوقة بها ، مع ما يزيد على 350،000 من المستخدمين ؛

-خيارات عديدة للتخصيص ، بما في ذلك الخلفية ؛

-إمكانية تعديل نموذج تم إنشاؤه في وقت لاحق ؛

-القدرة على تحميل الملفات مثل الصور والنصوص وعروض الشرائح

-سريع وبسيط ؛

-لا توجد إعلانات أو الشعارات ؛

-الحفظ التلقائي ؛

وJotForm هو شكل من أشكال الاتصال المميزة ،

*من بين خيارات :

-الخلفية ؛

-إمكانية ارفاق الملفات بالبريد ؛

-التقييم مع نجوم ؛

-امكانية اضافة مواقع لطرق الدفع

-شكر وتقدير ، وتستخدم لمنع البريد المزعج.

لإنشاء نموذج الاتصال في الموقع ، لا حاجة لإنشاء حساب ،

لكنني أوصي بإنشاء حساب ، كي يكون لك إمكانية

إجراء تغييرات على النموذج الخاص بك من خلال لوحة التحكم

* إنشاء حساب

إذا كنت لا ترغب في إنشاء حساب تخطي خطوة التسجيل في الموقع ،

ولكن تذكر به أنه لا يمكنك تغيير شكل في وقت لاحق!

والخطوة الأولى هي الآن للوصول إلى موقع http://www.jotform.com.

الآن على الصفحة التالية يجب عليك إدخال المعلومات المطلوبة وانقر فوق إنشاء الحساب.

استعداد حسابك تم إنشاؤه بالفعل ، وأكثر يجب عليك القيام به شيئا آخر قبل أن تبدأ في

كي تشأ نمودجك : تأكيد حسابك! اعتقد أنه شيئ بسيط .. ، وأنا أراهن أنك فعلت هذا ربما ما

لا يقل عن مرة واحدة. الذهاب إلى البريد الوارد البريد الإلكتروني الخاص بك وانقر على الرابط

التي بعث بها موقع لتأكيد حسابك :)

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

ملاحضة :

لا تنسى عند اضافة نمودجك ارسال رسالتك عبر صفحات التحرير

او ارسال رسالتك مع غلق التعليقات

هذا كل شيء

و الى لقاء قريب.

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

noreply@blogger.com (khaled) — Wed, 23 Mar 2011 02:11:00 +0000

السلام عليكم

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

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

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

إظهار و إخفاء 3 إضافات في قائمة واحدة

noreply@blogger.com (khaled) — Fri, 18 Mar 2011 16:16:00 +0000

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

موضوعنا اليوم هو كيفية إظهار و إخفاء 3 إضافات في قائمة واحدة لمدونات Blogger

بمكتبة ال jquery فهذه المكتبة صغيرة تستطيع بها فعل أشياء كثيرة وبكفائه عالية،

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

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

ثم تحرير HTML

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

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

ابحث عن هذا الوسم اذا كانت مدونتك تحتوي على الاطار العلوي

NAVBAR

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



]]></b:skin>

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



<style type="text/css">



#navbar-iframe {



height:0px;



visibility:hidden;



display:none;



}



</style>

الان ننتقل الى الأهم..

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



]]></b:skin>

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



/*Sliding Login Panel with jQuery 1.3.2*/











/*



Name: Sliding Login Panel with jQuery 1.3.2



Author: Jeremie Tisseau



Author URI: http://web-kreation.com/



Date: March 26, 2009



Version: 1.0







Copyright 2009 Jeremie Tisseau



"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:



http://www.gnu.org/licenses/gpl-3.0.html



*/







/***** clearfix *****/



.clear {clear: both;height: 0;line-height: 0;}



.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}



.clearfix {display: inline-block;}



/* Hides from IE-mac \*/



* html .clearfix {height: 1%;}



.clearfix {display: block;}



/* End hide from IE-mac */



.clearfix {height: 1%;}



.clearfix {display: block;}







/* Panel Tab/button */



.tab {



      background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_b.png) repeat-x 0 0;



height: 42px;



position: relative;



    top: 0;



    z-index: 999;



}







.tab ul.login {



display: block;



position: relative;



      float: right;



      clear: right;



      height: 42px;



width: auto;



      font-weight: bold;



line-height: 42px;



margin: 0;



right: 150px;



      color: white;



      font-size: 80%;



text-align: center;



}







.tab ul.login li.left {



      background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_l.png) no-repeat left 0;



      height: 42px;



width: 30px;



padding: 0;



margin: 0;



      display: block;



float: left;



}







.tab ul.login li.right {



      background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_r.png) no-repeat left 0;



      height: 42px;



width: 30px;



padding: 0;



margin: 0;



      display: block;



float: left;



}







.tab ul.login li {



text-align: left;



      padding: 0 6px;



display: block;



float: left;



height: 42px;



      background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_m.png) repeat-x 0 0;



}







.tab ul.login li a {



color: #15ADFF;



}







.tab ul.login li a:hover {



color: white;



}







.tab .sep {color:#414141}







.tab a.open, .tab a.close {



height: 20px;



line-height: 20px !important;



padding-left: 30px !important;



cursor: pointer;



display: block;



width: 100px;



position: relative;



top: 11px;



}







.tab a.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left 0;}



.tab a.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left 0;}



.tab a:hover.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left -19px;}



.tab a:hover.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left -19px;}







/* sliding panel */



#toppanel {



    position: absolute;   /*Panel will overlap  content */



    /*position: relative;*/   /*Panel will "push" the content down */



    top: 0;



    width: 100%;



    z-index: 999;



    text-align: center;



    margin-left: auto;



    margin-right: auto;



}







#panel {



width: 100%;



height: 190px;



color: #999999;



background: #272727;



overflow: hidden;



position: relative;



z-index: 3;



display: none;



}







#panel h1 {



font-size: 1.6em;



padding: 5px 0 10px;



margin: 0;



color: white;



}







#panel h2{



font-size: 1.2em;



padding: 10px 0 5px;



margin: 0;



color: white;



}







#panel p {



margin: 5px 0;



padding: 0;



}







#panel a {



text-decoration: none;



color: #15ADFF;



}







#panel a:hover {



color: white;



}







#panel a-lost-pwd {



display: block;



float: left;



}







#panel .content {



width: 960px;



margin: 0 auto;



padding-top: 15px;



text-align: left;



font-size: 0.85em;



}







#panel .content .left {



width: 280px;



float: left;



padding: 0 15px;



border-left: 1px solid #333;



}







#panel .content .right {



border-right: 1px solid #333;



}







#panel .content form {



margin: 0 0 10px 0;



}







#panel .content label {



float: left;



padding-top: 8px;



clear: both;



width: 280px;



display: block;



}







#panel .content input.field {



border: 1px #1A1A1A solid;



background: #414141;



margin-right: 5px;



margin-top: 4px;



width: 200px;



color: white;



height: 16px;



}







#panel .content input:focus.field {



background: #545454;



}







/* BUTTONS */



/* Login and Register buttons */



#panel .content input.bt_login,



#panel .content input.bt_register {



display: block;



float: left;



clear: left;



height: 24px;



text-align: center;



cursor: pointer;



border: none;



font-weight: bold;



margin: 10px 0;



}







#panel .content input.bt_login {



width: 74px;



background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_login.png) no-repeat 0 0;



}







#panel .content input.bt_register {



width: 94px;



color: white;



background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_register.png) no-repeat 0 0;



}







#panel .lost-pwd {



display: block;



float:left;



clear: right;



padding: 15px 5px 0;



font-size: 0.95em;



text-decoration: underline;



}















/*newsletter*/











#newsletter { }







#newsletter p { font-size:14px; font-weight: bold; color: #555; float:left; padding:8px 5px 0px 30px; }



#newsletter form { float:right; padding:0 30px 0 0;  }



#newsletter form input.email { width:150px; color:#888; border: 1px solid #ddd; padding:5px 8px 4px; height: 32px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:3px; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }



#newsletter form input.submit { margin:0 0 0 5px; padding:0; background: url(http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/btn-submit.png) no-repeat; width:89px; height: 31px; border:0; cursor: pointer; color:#fff; text-shadow: 0 -1px 0px #777; font-family: sans-serif; font-weight: bold; font-size:13px;  }



#newsletter form input.submit:hover { opacity:0.85; }











/*fade-spin-css3-jquery*/



#followIcons a  {



display:inline-block;



width:48px;



height:48px;



text-indent:-3000px;



background-position:0 0;



background-repeat:no-repeat;



z-index:2000;



overflow:hidden;



position:3;



}



#followIcons a  {



-webkit-transition-duration: 0.8s;



-moz-transition-duration: 0.8s;



-o-transition-duration: 0.8s;



transition-duration: 0.8s;



-webkit-transition-property: -webkit-transform;



-moz-transition-property: -moz-transform;



-o-transition-property: -o-transform;



transition-property: transform;



}







  #iconRSS    { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/RSS.png); }



    #iconTwitter  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/twitter.png); }



   



    #iconDelicious  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/delicious.png); }



    #iconFacebook  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/facebook.png); }



   







/*submenu*/



   



#submenu {



width: 160px;



float: left;



}



#submenu2 {



width: 160px;



float: right;



}



#submenu ul, #submenu2 ul{



font-family: Arial, Helvetica, sans-serif;



list-style-type:none;



margin:0;



padding:0;



}



#submenu ul li a, #submenu2 ul li a {



background:url(http://cdn2.iconfinder.com/data/icons/circular%20icons/bullet_green.png) center left no-repeat;



margin:0;



padding:3px 3px 3px 18px;



}



#submenu li, #submenu2 li {display: inline;}



#submenu a, #submenu2 a{



color: #FFFFFF;



text-decoration: none;



font-size: 13px;



display: block;



padding: 3px;



width: 160px;



}



#submenu a:link, #submenu a:visited, #submenu2 a:link, #submenu2 a:visited {



color: #999;



text-decoration: none;



}



#submenu a:hover, #submenu2 a:hover {



color: #FFFFFF;



}

رابعا :

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



</head>

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





</head>



<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/jquery-1.3.2.min.js' type='text/javascript'/>



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>



<script>jQuery(document).ready(function() {







/*



* Create Spinning, Fading Icons with CSS3 and jQuery for blogger.com



* Script combined from http://davidwalsh.name



* used By khaled ( http://blogspacetech.blogspot.com )



*/











  // "Globals" - Will make things compress mo-betta



  var $random = function(x) { return Math.random() * x; };



  var availableWidth = 150, availableHeight = 25;







  // Get the proper CSS prefix



  if(jQuery.browser.webkit) {



    cssPrefix = "webkit";



  }



  else if(jQuery.browser.mozilla) {



    cssPrefix = "moz";



  }



  else if(jQuery.browser.opera) {



    cssPrefix = "o";



  }







  // Apply opacity



  var zIndex = 1000;







  // Randomize each link



  jQuery.each(jQuery("#followIcons a"),function(index) {



    var startDeg = $random(360);



    var element = jQuery(this);



    var resetPlace = function() {



      element.fadeTo(200,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");



    };



    element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {



      element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");



    },resetPlace);



    resetPlace();



  });







});



</script>











    <link href='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/css/style.sliding-panel.css' media='screen' rel='stylesheet' type='text/css'/>



      







      <!-- PNG FIX for IE6 -->



      <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->



<!--[if lte IE 6]>







<script type="text/javascript" src="http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/supersleight-min.js"></script>



<![endif]-->







<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/slide.js' type='text/javascript'/>

خامسا :

الان ننتقل الى الخطوة الاخيرة

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



<body>

او هذا الوسم



<body expr:class='"loading" + data:blog.mobileClass'>

و نضع بعد احد الوسم الذي وجدته هذا الكود:



<!--top sliding menu --> 



<div id='toppanel'> 



<div id='panel'> 



<div class='content clearfix'>







<!-- First section --> 



<div class='left' style='width:250px !important'>







<h4>To connect</h4>



<p>للتواصل عبر الشبكات الاجتماعية او الاشتراك في خلاصات RSS</p>







     <div id='followIcons'>



  <a href='http://feeds2.feedburner.com/blogspacetech' id='iconRSS'>RSS Feed</a>



  <a href='http://twitter.com/infokhaled31' id='iconTwitter'>@infokhaled31 Twitter</a>







  <a href='http://del.icio.us/' id='iconDelicious'>infokhaled31</a>



  <a href='http://facebook.com/infokhaled31' id='iconFacebook'>infokhaled31 Facebook</a>



</div>



</div> 







<!-- Section Two --> 



<div class='left' style='width:330px !important'> 



<h4>Categories</h4>







<div id='submenu'>



<ul>



<li><a href='your URL here'>The first link</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>







</ul>



</div>



<div id='submenu2'>



<ul>



<li><a href='your URL here'>Second link</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>



<li><a href='your URL here'>Link, corresponding</a></li>









</ul>



</div>











</div>







<!-- Section Three --> 



<div class='left right'> 







<h4>إشترك في القائمة البريدية ليصلك جديدنا</h4>











<div id='newsletter'>



                                

<form action='http://feedburner.google.com/fb/a/mailverify' class='newsletter-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspacetech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>



<input class='email' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Enter email address";}' onfocus='if (this.value == "Enter email address") {this.value = "";}' type='text' value='Enter email address'/> 







<input name='uri' type='hidden' value='blogspacetech'/>



<input name='title' type='hidden' value='Placeholder'/>



<input name='loc' type='hidden' value='en_US'/>



<input class='submit' name='submit' type='submit' value='Submit'/>

</form>



</div>







</div>



</div> 



</div>











<div class='tab'> 



<ul class='login'> 



<li class='left'/> 



<li>!  مرحبا  بالضيف </li> 



<li class='sep'>|</li> 



<li id='toggle'> 



<a class='open' href='#' id='open'>show /إظهار </a> 



<a class='close' href='#' id='close' style='display: none;'>Hide / إخفاء</a> 



</li> 



<li class='right'/> 



</ul> 



</div>



</div>



<!-- Fin top sliding menu -->

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

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



$(document).ready(function() {







// Expand Panel



$("#open").click(function(){



$("div#panel").slideDown("slow");







});    







// Collapse Panel



$("#close").click(function(){



$("div#panel").slideUp("slow");    



});        







// Switch buttons from "Log In | Register" to "Close Panel" on click



$("#toggle a").click(function () {



$("#toggle a").toggle();



});        







});

قبل كل شيء التطبيق كان على div

و العناصر التي قمت بمطابقتها اي التاثير عليها



<div id='toppanel'> 



<div id='panel'>

في ملف الجافاسكريبت السابق سوف تجد بعض الخصائص..

و شرحها كالتالي و على الترتيب :

open : تستخدم لإظهار جميع العناصر التي تمت مطابقتها

close : تستخدم لاخفار جميع العناصر التي تمت مطابقتها

toggle : تستخدم للإظهار والاخفار في آن واحد

slideDown : تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر)

slideUp : تستخدم لإخفاء العناصر بتغير الارتفاع (سوف تنزلق للاعلى وتحتفي)

slideDown : تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر)

slideToggle : تستخدم للاخفاء بالانزلاق للاعلى و الاظهار بالنزلاق للاسفل بالعتماد على الارتفاع

كما يمكن اضافة هذه الخواص

fadeIn : سوف تظهر تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا

fadeOut : سوف تختفي تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا

هذا كل شيئ أتمنى لكم الاستفادة.

مصدر : web-kreation

إضافة مقطع صوتي بتقنية HTML5

noreply@blogger.com (khaled) — Fri, 14 Jan 2011 03:22:00 +0000

السلام عليكم

بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5

حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع

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

فالأن وبعد طول انتظار اتت لنا خاصية ال HTML5 لتسريع الاستماع من جهة

و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...

لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا

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

Mobile Safari iOS 3

Android2.2+, w/Flash

Safari 4

Chrome 7

Firefox 3+, w/ Flash

Opera 10+, w/ Flash

IE 6, 7, 8, w/ Flash

هل يمكنني استعمال هته الخاصية في مدونتي؟

نعم يمكن و اليوم سنضع شرح بسيط

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

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

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

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

</head>

و ضع فوقه هدا كود

أو يمكنك تحميل الملف من الموقع الاصلي

و اعادة رفعه...

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

]]></b:skin>

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

.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}

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

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

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

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

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

هناك خاصيتان اساسيتان في الاضافة

التشغيل التلقائي للملف الصوتي autoplay

او تشغيل الى غير مسمى loop

كما يمكنك اختيار احد المواقع لرفع ملفات mp3

dropbox

fileden

هذا كل شيئ أتمنى لك الاستفادة

اجعل مدونتك متوافقة على الأجهزة النقالة

noreply@blogger.com (khaled) — Sat, 18 Dec 2010 00:41:00 +0000

كما تعلمون ، فإن الملايين من الناس يستعملون هواتفهم النقالة إلى الوصول إلى الإنترنت.

سرعة الانترنت المتنقلة هي أيضا سريعة جدا في هذه الأيام مع الجيل الثالث 3G ،

من هذا ، يمكننا أن نقول الكثير من القراء يأتون لمدونتك الخاص بك عن طريق الهواتف النقالة..

ولكن ، إذا كنت لا تجعل هاتفك النقال ودي لمدونتك ،.

قد تفقد كل ما بذلته من القراء بسبب الجوال

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

لذلك ، هنا كيفية جعل مدونتك ودية مع الهاتف النقال..

فقط سجل دخولك إلى الحساب الخاص بك في مسودة بلوجر

تستطيع الآن تفعيل عرض إصدار الجوال النموذجي على أجهزة الجوال

بالضغط على تشغيل نمادج الجوال

و من ثم سيتم تحويلك الى > اعدادات > البريد الإلكتروني والجوّال أخيرا

احفظ الاعدادات

و هذه من أحد المميزات الجديدة من بلوجر و هو دعمها لمختلف اصدار الجوال

و هنا صور لملاحظة الفرق بين الاصدار المتوافق مع الجوال او العكس

هدا كل شيئ..

و هكدا لن تفقد زوارك.

اختيار لفتح الروابط في صفحة مستقلة

noreply@blogger.com (khaled) — Thu, 16 Dec 2010 22:28:00 +0000

السلام عليكم

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

لأطول فترة ممكنة،،وقد نفقد الكثير من الزوار.

خاصة من يستخدمون الروابط في الـ anchor text أو الاعلانات بأنواعها

وقد تكون موجودة حتى في تعليقات الزوار،

وهذا كله قد يساهم في خروج الزائر من المدونة.

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

Open in New Window Plugin .

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

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

<script type="text/javascript">

//<![CDATA[

jQuery('a').each(function() {

// Let's make external links open in a new window.

var href = jQuery(this).attr('href');

  if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {

jQuery(this).attr("target", "_blank");

}

});

//]]>

</script>

لكن احيانا نجد ان الزوار قد ينزعجون من هته الطريقة

لدالك لجانا الى بحث عن دالة لوضع اختيار للزائر

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

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

يكفي فقط الانتقال الى تصميم من لوحة التحكم ثم الى اضافة أداة جديدة Html

و انسخ الكود التالي

<div class="linkprefs">

 <p style="border:1px solid #cccccc;font-family:Arial,helvetica,sans-serif;font-size:12px;padding-bottom:4px;padding-top:4px;background:#f4f4f4;display: block;"><input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox" />

<label for="linkprefs">لفتح الروابط في صفحة مستقلة</label></p><span></span>

<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>

</div>

<script language="JavaScript" type="text/javascript">

<!--

/*

Link Target Preferences v.1.1

http://www.noscope.com/journal/2004/10/link-target-preferences

*/

// BEGIN Configuration

// The following URLs are considered "on-site", and will be ignored

// Consider adding both your main URL and the no-ww URL

var url_1 = "http://www.example.com";

var url_2 = "http://example.com";

// Default link-target preference. What should be default for new users?

// Value true opens in _blank by default, false opens in _top by default

var open_blank_default = false;

// Website title - used only for cookie name to prevent cookie conflicts with other sites using this

// No spaces, no special characters, just a unique name

var site_title = "example";

// END Configuration

// Cookie Functions

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name) {

createCookie(name,"",-1);

}

// Checkbox Loader

function loadLinkPrefs () {

if (readCookie(site_title+"_linkprefs_cookie")) {

initVal = readCookie(site_title+"_linkprefs_cookie"); // Load cookied preference

} else {

createCookie(site_title+"_linkprefs_cookie", true, 20000)

initVal = open_blank_default; // If no cookie is set

}

openBlank = initVal;

setCheckbox(eval(initVal))

}

// Set Checkbox State

function setCheckbox(state) {

openBlank = state;

document.getElementById('linkprefs').checked = state;

setTargets();

createCookie(site_title+"_linkprefs_cookie", state, 20000)

}

// Configure Link Targets

function setTargets() {

var link, l = 0;

if (openBlank == true) {

while (link = document.links[l++]) {

// Open in _blank, except all links starting with...

    if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank';

}

} else {

while (link = document.links[l++]) {

// Open in _top, except all links starting with...

    if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top';

}

}

}

// Event Listener, by Scott Andrew

function addEvent(obj, evType, fn) {

if (obj.addEventListener) {

obj.addEventListener(evType, fn, true);

return true;

} else if (obj.attachEvent) {

var r = obj.attachEvent('on'+evType, fn);

return r;

} else {

return false;

}

}

//-->

</script>

هذه الطريقة ليست مقتصرة فقط على المدونات

وإنما يمكن تطبيقها أيضا على كل المواقع بمختلف أنواعها.

ملاحظة : الدالة ليست من برمجتي كما انصح بفهم محتواها جيدا.

مصدر الدالة

و السلام خير ختام.

عدد مرات التنزيل لمدونات بلوجر

noreply@blogger.com (khaled) — Wed, 15 Dec 2010 23:40:00 +0000

السلام عليكم

هل انت فعلا فضولي ؟ هل أردت يوماً في مدونتك/موقعك الذي تستخدم به البلوجر

بأن تظهر عدد مرات التنزيل للملفات المهمة التي تعرضها لزوارك؟ ,

بلا شك هي ميزة رائعة ومتميزة وتعطيك إحصائية لتمنحك رؤية أكبر

وكذالك تساعد على إطلاع زوار موقعك أو مدونتك برؤية شعبية عدد مرات التنزيل لديك

ليعطي انطباع جيد وجميل

فالفضول هو دافع إنساني موجود بشكل فطري. قد لا ندرك درجة فضولنا،

ولكن عندما يستثار فضولنا، نقوم ببناء حالة من التوتر البسيط وعدم الارتياح.

اليوم سنخفف من هذا التوتر من خلال سكريبت بسيط :) ما هو غير معروف بالنسبة للبعض .

صور لتوضيح شكل عدد مرات التنزيل كمثال:

ملاحظة : نلاحظ في الصور السابقة تغير عدد مرات التنزيل من -1 الى الرقم 3

التغيير استلزم مني تغيير الايبي !

المهم...

كل ما عليك هو نسخ هذا الكود عند كل رسالة جديدة بعد انتقالك الى تحرير HTML :

<a href="

http://dstats.net/download.php?file=http://www.box.net/shared/gvtgeobfht

" target="_blank">لتحميل الملف</a> ( مرات التنزيل : <script src="

http://dstats.net/dstatsjs.php?file=http://www.box.net/shared/gvtgeobfht

" type="text/javascript"></script><script type="text/javascript">document.write(dsCounter);</script> مرة )

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

رابط الملف الخاص بالتحميل و أضف النص باسم الملف الذي كتبته

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

ارجوا ان اكون افدت بهذا الخصوص, ولأي استفسار او سؤال يمكنك طرحه هنا,

و السلام خير ختام.

إضافة قائمة منزلقة لاخر مواضيعك

noreply@blogger.com (khaled) — Thu, 21 Oct 2010 15:55:00 +0000

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

سبق و اعطينا تعريفا كاملا لمكتبة الjquery في مواضيعنا السابقة

و قلنا أنها تقدم حلول تختصر على مطور الويب

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

يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.

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

عبارة عن قائمة او اختصار بشكل مميز

طبعا الاختصار لم يكن من برمجتي webdesignerwall

اليوم يمكنك القول أني وجدت ضالتي في احد المكتبات

و أنشأت أروع اضافة لمدونات بلوجر

و هو عبارة عن اخر مواضيعك و مبداه هو خلاصات RSS

مع وضع عدد التعليقات و تاريخ اضافة الموضوع

و الأروع هو اضافة صورة مصغرة لكل موضوع

فكرة برمجة السكريبت التابع للاضافة هو ان العديد يجد صعوبة في التعامل معHTML

بحيث لو تأملت الموضوع السابق ستجد اختلاف واضح ...

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

لكن الان فقط وضع رابط مدونتك يكفي..

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

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

ثانيا :قم بنسخ و لصق الكود التالي



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







<script type="text/javascript">



$(document).ready(function(){







$(".accordion h3:first").addClass("active");



$(".accordion p:not(:first)").hide();







$(".accordion h3").click(function(){



$(this).next("p").slideToggle("slow")



.siblings("p:visible").slideUp("slow");



$(this).toggleClass("active");



$(this).siblings("h3").removeClass("active");



});







});



</script>







<style type="text/css">



.accordion {



width: 480px;



text-align: center;



border-bottom: solid 1px #c4c4c4;



}



.accordion h3 {



background: #e9e7e7 url(http://2.bp.blogspot.com/_jFIsHl5gfpM/TFytEJ5rLTI/AAAAAAAAAf0/ogdrOF9AZ7U/s320/arrow-square.gif) no-repeat right -51px;



padding: 7px 15px;



margin: 0;



font: bold 120%/100% Arial, Helvetica, sans-serif;



border: solid 1px #c4c4c4;



border-bottom: none;



cursor: pointer;



}



.accordion h3:hover {



background-color: #e3e2e2;



}



.accordion h3.active {



background-position: right 5px;



}



.accordion p {



background: #f7f7f7;



margin: 0;



padding: 10px 15px 20px;



border-left: solid 1px #c4c4c4;



border-right: solid 1px #c4c4c4;



}



</style>















<script language="JavaScript">



imgr = new Array();



imgr[0] = "http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg";







showRandomImg = true;







jimgwidth = 80;



jimgheight = 80;



jfntsize = 12;



jacolor = "#E67C15";



jaBold = true;







jtext = "التعليقات";



jshowPostDate = true;







jsummaryPost = 200;



summaryFontsize = 12;



summaryColor = "#000";







numposts = 6;



label = "blogger";



home_page = "http://blogspacetech.blogspot.com/";







</script>







<div class="accordion">



<script src="http://blogspacetech.googlecode.com/files/new.recent-posts.js" type="text/javascript"></script>



</div>

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

home_page = "رابط مودنتك/"

و اختيار احد اقسامها

label = "هنا ضع القسم الدي تريده"

اما numposts = 6 فله علاقة مع عدد المواضيع

بهذا أكون إنتهيت من الدرس ..أتمنى أن يكون قد أفادكم

عرض اخر مواضيعك بطريقة فريدة

noreply@blogger.com (khaled) — Sat, 16 Oct 2010 16:14:00 +0000

السلام عليكم

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

وتوفّر الإضافات المميزة يزيد من إختصار العمل في أسطر قليلة من الشفرات،

وتوفر المكتبة إمكانية عمل الإضافات

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

يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.

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

بحيث أنني وضعت اضافة واحدة فقط جمعت فيها 3 اضافات..

قائمة + اخر 6 مواضيعك + اخر مواضيعك مع صورة مصغرة

وسأستخدم صورة سريعة لطرح فكرة الدرس،

في هدا العمل قمت بتجهيز تقويم مصمم بـ html css

و قمت بربطه مع مكتبة jQuery لإنشاء التفاعل مع واجهة مستخدم..

الاضافة هي مازالت في طور التطوير..اترككم مع المشاهدة و الشرح

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

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

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

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

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



<head>

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



<link href='http://blogspacetech.googlecode.com/files/ArticleListblogger.css' rel='stylesheet' type='text/css'/>



<head>

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

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

الان ننتقل الى اضافة اداة HTML ; ونضع الكود التالي



<style type="text/css">







.top-right



{



   background-image:url(http://img28.imageshack.us/img28/5952/bgmenubox.png);



   background-repeat:repeat-x;



   background-position:left center;



   margin-right:5px;



   height:33px;



   padding-top:1px;



}



.bgList-left



{



    margin:0;



    padding:0;



    vertical-align:top;



    background-image:url(http://lh5.ggpht.com/_ZXEvc1YiIko/TLkDTK3jXrI/AAAAAAAAA3U/iKSi2ThW6X0/box-blogger1.png);



    background-repeat:repeat-x;



    background-position:left top;



    height:8px;



}



.bgList-right



{



    margin:0;



    padding:0;



    vertical-align:top;



    background-image:url(http://lh5.ggpht.com/_ZXEvc1YiIko/TLkDTK3jXrI/AAAAAAAAA3U/iKSi2ThW6X0/box-blogger1.png);



    background-repeat:repeat-x;



    background-position:right top;



    height:8px;



    margin-left:10px;



}



</style>







  <div class="article-list-bloggerbox">



    <div class="top-left">



        <div class="top-right" style="padding-left: 7px;">



           <div style="float: right; margin-right: 4px; font-size: 11px;cursor: pointer; font-weight: bold" class="is-section"><img src="http://cdn.iconfinder.net/data/icons/rssicons/PNG/021.png" /></div>



            <div class="sc_menu" style="float: right; overflow-x: hidden; overflow-y: hidden; ">





<ul class="tab-header sc_menu">

<li class="tab-name" ><a href="http://blogspacetech.blogspot.com/2010/06/about.html">الرئيسية</a></li>

<li class="sep">|</li>

<li class="tab-name" ><a href="http://blogspacetech.blogspot.com/2010/08/archives.html">أرشيف المدونة</a></li>

<li class="sep">|</li>

<li class="tab-name"><a href="http://blogspacetech.blogspot.com/2010/02/contacte-me.html">للمراسلة</a></li>

</ul>

</div>

<div style="clear: both"></div>

</div>

</div>







<div style="clear: both;" class="zone">







<script type="text/javascript">



home_page = "http://blogspacetech.blogspot.com/";



label = "blogger";



numposts = 11;



sumTitleBox = 40;



sumTitleBox2 = 65;



sumPosts = 151;



textmore = "<< اقرأ المزيد ";



labelURL = "http://blogspacetech.blogspot.com/search/label/blogger?max-results=10";



</script>







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



</div>



    <div class="bgList-left"><div class="bgList-right"></div></div>



</div>

هدا كل شيء أتمنى لكم الاستفادة..

مشكلة استعصاء البرامج و عدم استجابتها

noreply@blogger.com (khaled) — Sat, 25 Sep 2010 17:37:00 +0000

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

اقدم لكم اليوم شرحي المتواضع

كي يحصل النظام على صلاحيات غلق البرمجيات

حول كيفية معالجة واحدة من أكثر المشاكل شيوعا

الا وهي مشكلة البرامج التي لا تجيب

Ne repond pas

نضغط Demarrer و نـخـتار Exécuter

نكتـب Regedit و نضغط OK

و نتبع هذا الـمسار

HKEY_CURRENT_USER\Control Panel\Desktop

والان نضغط على اليمين مرتين على المفتاح

HungAppTimeout

وهو المفتاح الذي يحمل توقيت غلق البرامج

وهو افتراضيا معدل على 5000 اي 5 ثواني

ننقصه كما نشاء مثلا الى 3000 اي ثلاثة ثواني

والان ننقر مرتين على المفتاح

WaitToKillAppTimeout

وهو معدل افتراضيا على 20000 اي 20 ثانية و نغيره مع العلم انه المفتاح الذي يحمل توقيت غلق

برمجية قيد الاستعمال في حالة الاستعصاء

لكم ان تغيروه حسب اختياراتكم انا مثلا عدلته على 5000

و الان و هي الخطوة الاهم نذهب الى المفتاح

AutoEndTasks

ونغير قيمته من 0 الى 1 حتى يتمكن النظام و يحصل على صلاحيات غلق البرمجيات

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

مشكلة استعصاء البرامج و عدم استجابتها.

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

noreply@blogger.com (khaled) — Sun, 12 Sep 2010 10:55:00 +0000

السلام عليكم

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

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

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

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

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

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

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

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

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

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

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

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

تعطيل اللافتات عند وضع مؤشر الفأرة

noreply@blogger.com (khaled) — Wed, 08 Sep 2010 01:14:00 +0000

درسنا اليوم هو كيفية تعطيل اللافتات عند وضع مؤشر الفأرة

طبعا العديد من تزعجه تلك الافتة و منهم أنا...

لدالك اضطررت للبحث عن كيفية نزعها..

نضغط Demarrer و نـخـتار Exécuter

نكتـب Regedit و نضغط OK

و نتبع هذا الـمسار

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced

ثم نضغط على Advanced

و هنا نضغط باليميـن و نختار Nouveau ------> Valeur DWORD

و نسميـها EnableBalloonTips

ثم نضغط عليها دوبل كليك

و هنا نعطيـها القيـمة 0

و نضغط OK

ثم بعدها نعيـد التشغيـل لحفظ العمل,

Bxcarousel عرض مميز و احترافي

noreply@blogger.com (khaled) — Tue, 07 Sep 2010 20:57:00 +0000

السلام عليكم

إذا كنت تبحث عن اضافة من اجل شريط تمرير جيد و مميز للموقع الخاص بك ،

bxCarousel هو مرشح جيد للغاية.

سيزيد من جمال الموقع أو المدونة

وهو جد بسيط لاستخدام ولديه عدة خيارات لتخصيص المحتوى :

display_num: 4, // عدد العناصر المرئية
move: 4, // عدد العناصر على شريط التمرير
speed: 500, // عدد من المللي ثانية لانهاء الشريحة المتحركة
auto: false, // عرض اوتوماتيكي
auto_interval: 2000, // المدة الفاصلة
auto_dir: 'next', // الاتجاه options: 'next', 'prev'
auto_hover: false, // لايقاف العرض
next_text: 'next', // نص من اختيارك "suivant"
next_image: '', // صورة عن للرابط التالي
prev_text: 'prev', // نص مخصص للرابط السابق
prev_image: '', // صورة للرابط السابق
controls: true // عرض الضوابط

المحتوى هو عبارة عن منزلق و قائمة HTML



<ul id='monSlider'>



    <li>first piece of content</li>



    <li>second piece of content</li>



    <li>third piece of content</li>



    <li>fourth piece of content</li>



    <li>bxCarousel can accept an unlimited number of elements</li>



</ul>

و هنا كيفية التهييئة لها بمكتبة ال jQuery



$(document).ready(function(){



    $('#monSlider').bxCarousel({



        display_num: 3,



        move: 1,



        auto: true,



        controls: false,



        margin: 10,



        auto_hover: true



    });



});

اوصي الجميع باستخدامها لمدوناتهم سواء كانت بلوجر او ووردبريس او حتى المواقع

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

الملف لا يتعدى ال 3.5ko

تحياتي لكم

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

noreply@blogger.com (khaled) — Sun, 05 Sep 2010 17:43:00 +0000

السلام عليكم

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

وذات ميزات لم توجد من قبل فأنت تتحدث عن الصور ذات الإمتداد 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)
 
 );
 
 }

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

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

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

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

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

لتجعل css3 تتوافق مع المتصفحات IE6,7,8

noreply@blogger.com (khaled) — Sun, 05 Sep 2010 08:41:00 +0000

البداية

المشكلة

المتصفحات الداعمة

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

المصدر

البداية

مما لا شك فيه ان مجالات الويب في تطور مستمر وهذا لا جدال فيه ومن الامور التي واكبة التطور

ها هي تحقق ما كنا في انتظاره الجديد بالامر هو دعم هذه النسخة لتقنية رائعة الا وهي css3

المشكلة

والتي بكل اسف Internet Explorer بجميع اصداراته حتى الاصدار الثامن لا يدعم هذه التقنية

مما سوف يحرم مستخدمي هذا المتصفح جمالية تقنية css3

المتصفحات الداعمة

ومن المتصفحات الداعمة لهذه التقنة الجميلة css3 هي كالتالي

Mozilla Firefox

Apple Safari

Opera

Google Chrome

لكن بقي اشهر متصفح و هو Internet Explorer 6-8

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

و خاصة ادا كان لديك موقع ينافس الاقوى لدالك يستلزم عليك اعطاء اهمية له...

لكن اخيرا جائت لنا مكتبة الجافاسكريبت الاوهي selectivizr

لتجعل موقعك او مدونتك تتوافق مع جميع الاستعلامات

Query, MooTools, YUI, Dojo, Prototype و المزيد

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

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

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

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

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



</head>

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

`<script type="text/javascript" src="[JS library]"></script> `

هدا كل شيء

المصدر

نمودجان جديدان لاخفاء و اضهار العناصر

noreply@blogger.com (khaled) — Fri, 03 Sep 2010 22:22:00 +0000

موضوعنا اليوم هو كيفية اضهار و اخفاء

اي عنصر بمكتبة الjquery

فهته المكتبة صغيرة تستطيع بها فعل أشياء كثيرة وبكفائه عالية،

هذه المكتبة تتيح لنا وصول سريع لـ AJAX

بدون جهد أو اكواد برمجية طويلة.

أيضا التحكم في المظهر وإضافة بعض التأثيرات الجميلة والمميزة

الموضوع يحتوي على نمودجان مختلفان

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

للمزيد من الشرح

بالتوفيق..

إحترف تصميم الأزرار بتقنية الcss3

noreply@blogger.com (khaled) — Fri, 03 Sep 2010 02:25:00 +0000

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

طال إنتظار بعض الأخوة لشرح طالما سألوا عنه وكنت قد وعدت بإنجازه

ووضعت بعض تطبيقات تصميم المواقع التى سوف نشرحها اليوم

اردت أن أشرح جزء بسيط من لغة التصميم العالمي الجديدة CSS3

فقلت اضع مثالا وأحاول جاهدا شرحه عسى أن يستفيد الأخوة جميعا من هذا الشرح

وستكون أول خطوة عملية لتطبيقات تصاميم الازرار بتقنية الCSS3.

سبق ووضعت موضوع سابق و مماثل لموضوعنا اليوم

تدريجات مميزة بتقنية ال CSS3

سنتعلم اليوم كيفية تصميم أزرار لصفة الويب

يعمل بتأثير الهوفر ( اللمس ) ليتغير شكله بإستخدام أكواد CSS3 الرائعة ،

كما رايناها فى المواضيع السابقة .

وقبل البدء فى الشرح أحب أن أذكر هنا أنه توجد أكثر من طريقة للوصول الى هذا التأثير

الثاتير الاول باستعمال الفوتوشب

و الثاني باستعمال تقنية الcss ; و دالك بإنشاء طبقة ثانية

هدا الموضوع قد يحتاجه العديد من المدونين ..يتيح لك امكانية تغيير

ايقونة اقرا المزيد الى ايقونة ال css و تغيير العديد ..

يمكن كدالك انشاء قائمة و يمكن التفنن في العديد من المجال

لدينا نمودجان..

النمودج الاول

النمودج الثاني

النمودج الاول

مثال (Demo)

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

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

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

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



]]></b:skin>

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







 <style>



  *{



 margin: 0;



 padding: 0;



 }







 {



 background-color: #eee;



 }







 a{



 text-decoration: none;



 color: #000;



 }







 a:hover{



 text-decoration: none;



 color: #4a4a4a;



 }











 #main{



 width: 260px;



 margin: 30px auto;



 }







 #main ul{



 display:block;



 float:left;



 height:600px;



 list-style:none outside none;



 width:210px;



 }







 #main ul li{



 float:left;



 margin:10px 0;



 width: 200px;



 }











 /* Button1 */







 a.button1{



 -moz-border-radius:50px;



 -webkit-border-radius:50px;



 border-radius:50px;







 -moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);



 -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);



 box-shadow:0 1px 0 rgba(0,0,0,0.3);







 background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);







 background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));







 color:#4A4A4A;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:17px;



 font-weight:bold;



 padding:10px 15px;



 text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);



 }







 a.button1:hover{



 background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);



 background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));



 }







 /* Button2 */







 a.button2{



 -moz-border-radius:4px;



 -webkit-border-radius:4px;



 border-radius:4px;







 -moz-box-shadow:2px 2px 0 #C6E5E7;



 -webkit-box-shadow:2px 2px 0 #C6E5E7;



 box-shadow:2px 2px 0 #C6E5E7;







 background: -moz-linear-gradient(19% 75% 90deg, #CAEAFF, #e2f2ff);







 background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#CAEAFF));







 color:#637897;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:14px;



 font-weight:bold;



 padding:10px 25px;



 text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);



 text-transform:uppercase;



 border: 1px solid #C6E5E7;



 }







 a.button2:hover{



 background: -moz-linear-gradient(19% 75% 90deg,#C6E5FA, #e2f2ff);



 background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#C6E5FA));



 }







 /* Button3 */







 a.button3{



 -moz-border-radius:3px;



 -webkit-border-radius:3px;



 border-radius:3px;







 -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);



 -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);



 box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);







 background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);







 background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));







 color:#f0f0f0;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:14px;



 font-weight:bold;



 padding:10px 25px;



 text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);



 border: 1px solid #267ed4;



 }







 a.button3:hover{



 background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);



 background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));



 color: #f1f1f1;



 }







 /* Button4 */







 a.button4{



 -moz-border-radius:5px;



 -webkit-border-radius:5px;



 border-radius:5px;







 -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);



 -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);



 box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);







 background: -moz-linear-gradient(19% 75% 90deg, #FF4D01, #FF8924);







 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF8924), to(#FF4D01));







 color:#fff;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:15px;



 font-weight:bold;



 padding:8px 20px;



 }







 a.button4:hover{



 background: -moz-linear-gradient(19% 75% 90deg, #EB4701, #F58423);



 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F58423), to(#EB4701));



 }







 /* Button5 */







 a.button5{



 -moz-border-radius:50px;



 -webkit-border-radius:50px;



 border-radius:50px;







 -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);



 -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);



 box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);







 background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);







 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#55a9e8), to(#4183D4));







 color:#f0f0f0;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:13px;



 font-weight:bold;



 padding:5px 16px;



 text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);



 }







 a.button5:hover{



 background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);



 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#378dcd), to(#20559A));



 -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;



 -webkit-box-shadow: none;



 box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;



 }







 /* Button6 */







 a.button6{



 -moz-border-radius:3px;



 -webkit-border-radius:3px;



 border-radius:3px;







 -moz-box-shadow:0 2px 0 #b7245a;



 -webkit-box-shadow:0 2px 0 #b7245a;



 box-shadow:0 2px 0 #b7245a;







 background: -moz-linear-gradient(0% 50% 90deg,#E22E6D, #EB3373, #EB3373 15%);







 background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#EB3373), to(#E22E6D), color-stop(.9,#EB3373));







 color:#fff;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:17px;



 font-weight:bold;



 padding:7px 20px;



 text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);



 }







 a.button6:hover{



 background: -moz-linear-gradient(0% 50% 90deg,#D62C67, #DE306D, #EB3373 15%);



 background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#DE306D), to(#D62C67), color-stop(.9,#EB3373));



 }







 /* Button7 */







 a.button7{



 -moz-border-radius:3px;



 -webkit-border-radius:3px;



 border-radius:3px;







 background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);







 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));







 color:#836d4d;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:15px;



 font-weight:bold;



 padding:6px 70px;



 border: 1px solid #d4c198;



 }







 a.button7:hover{



 background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);



 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));



 }







 /* Button8 */







 a.button8{



 -moz-border-radius:5px;



 -webkit-border-radius:5px;



 border-radius:5px;







 -moz-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);



 -webkit-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);



 box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);







 background: -moz-linear-gradient(19% 100% 90deg,#025C25, #038836, #5D9B75 100%);







 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5D9B75), to(#025C25), color-stop(.2,#038836));







 color:#E6F2EB;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:17px;



 font-weight:bold;



 padding:10px 40px;



 text-shadow:-1px -1px 1px #4F5B54;



 }







 a.button8:hover{



 background: -moz-linear-gradient(19% 100% 90deg,#025221, #037D32, #599470 100%);



 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#599470), to(#025221), color-stop(.2,#037D32));



 }







 /* Button9 */







 a.button9{



 -moz-border-radius:1px;



 -webkit-border-radius:1px;



 border-radius:1px;







 background: -moz-linear-gradient(19% 50% 90deg,#55792F, #608736, #608736 0%);







 background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#608736), to(#55792F), color-stop(0,#608736));







 color:#f5f5f5;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:17px;



 font-weight:bold;



 padding:10px 40px;



 text-shadow:0 1px 0 #000000;



 border-bottom:1px solid rgba(255, 255, 255, 0.7);



 border-top:1px solid rgba(255, 255, 255, 0.7);



 }







 a.button9:hover{



 background: -moz-linear-gradient(19% 50% 90deg,#486628, #4E6E2C, #4E6E2C 0%);



 background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#4E6E2C), to(#486628), color-stop(0,#4E6E2C));



 }







 /* Button10 */







 a.button10{



 -moz-border-radius:5px;



 -webkit-border-radius:5px;



 border-radius:5px;







 background: -moz-linear-gradient(0% 45% 90deg,#E0B324, #FAD121, #FFE678 100%);







 background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#FFE678), to(#E0B324), color-stop(.2,#FAD121));







 color:#312f30;



 float:left;



 font-family:arial,helvetica,sans-serif;



 font-size:17px;



 font-weight:bold;



 padding:10px 20px;



 text-shadow:1px 1px 0 #ebd663;



 }







 a.button10:hover{



 background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);



 background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));



 }



 </style>

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

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

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

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



<div id="main">
 
 
  <ul>
 
  <li><a href="#" title="" class="button1">I'm the first button!</a></li>
 
 
  <li><a href="#" title="" class="button2">Ok, second...</a></li>
 
 
  <li><a href="#" title="" class="button3">ONE MORE BUTTON</a></li>
 
 
  <li><a href="#" title="" class="button4">Don't click me</a></li>
 
 
  <li><a href="#" title="" class="button5">start</a></li>
 
 
  <li><a href="#" title="" class="button6">I'm the pink one</a></li>
 
 
  <li><a href="#" title="" class="button7">Button</a></li>
 
 
  <li><a href="#" title="" class="button8">Number 8</a></li>
 
 
  <li><a href="#" title="" class="button9">Try to click me</a></li>
 
 
  <li><a href="#" title="" class="button10">Last Button</a></li>
 
 
  </ul>
 
  </div>

طبعا تم استدعاء الكلاس لكامل ملف الستايل

و ادا كنت تريد استدعاء ايقونة من اختارك فسوف تكون بهته الطريقة

`<div id="main"> <ul> <li><a href="#" title="" class="button1">I'm the first button!</a></li> </ul> </div>`

النمودج الثاني

مثال (Demo)

و اضافته ثثمثل في نفس الطريقة السابقة

لكن التغيير سوف سطرأ فقط الأكواد

كود الcss







<style>











/* BonBon Buttons 1.0 by simurai.com







Usage:







    Default button:             <a href="" class="button">Label</a>



    More fancy with icon:         <a href="" class="button orange glossy" data-icon="?">Label</a>







Following additional class names are supported:







    Color:         orange, pink, blue, green, transparent



    Font:         serif



    Material:     glossy, glass



    Size:         xs, xl



    Shape:         round, oval, brackets, skew, back, knife, shield, drop, morph



    Icon only:     icon



    Disabled:    disabled







*/











@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);



@import url(http://fonts.googleapis.com/css?family=Lobster);



@import url(pictos/pictos.css);











/* -------------- THE button -------------- */



.button {







/* text */



    text-decoration:         none;



    font:                     24px/1em 'Droid Sans', sans-serif;



    font-weight:             bold;



    text-shadow:             rgba(255,255,255,.5) 0 1px 0;



    -webkit-user-select:     none;



    -moz-user-select:         none;











/* layout */



    padding:                 .5em .6em .4em .6em;



    margin:                 .5em;



    display:                 inline-block;



    position:                 relative;







    -webkit-border-radius:     8px;



    -moz-border-radius:     8px;







/* effects */



    border-top:         1px solid rgba(255,255,255,0.8);



    border-bottom:         1px solid rgba(0,0,0,0.1);







    background-image:     -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);



    background-image:     -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);







    -webkit-transition: background .2s ease-in-out;



    -moz-transition:     background .2s ease-in-out;







/* color */



    color:                 hsl(0, 0%, 40%) !important;



    background-color:     hsl(0, 0%, 75%);







    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                        hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */



                        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                        hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */



                        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



}











/* -------------- icon -------------- */



.button:before {



    font:             1.2em/0 'Pictos', sans-serif;



    content:         attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */



    margin-right:     0.4em;











}



/* icon only */



.icon {



    font-weight: normal;



    font-style: normal;



    text-indent:     -999em;



}



.icon:before {



    margin-right:     0;



    display:         block;



    height:         0;



    text-indent:     0px;



}















/* -------------- colours -------------- */







.button.orange {



    color:                 hsl(39, 100%, 30%) !important;



    background-color:     hsl(39, 100%, 50%);







    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



}



.button.orange:hover {     background-color: hsl(39, 100%, 65%); }











.button.blue {



    color:                 hsl(208, 50%, 40%) !important;



    background-color:     hsl(208, 100%, 75%);







    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px;    /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px;    /* drop shadow */



}



.button.blue:hover {     background-color: hsl(208, 100%, 83%); }







.button.green {



    color:                 hsl(88, 70%, 30%) !important;



    background-color:     hsl(88, 70%, 60%);



    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



}



.button.green:hover {     background-color: hsl(88, 70%, 75%); }







.button.pink {



    color:                 hsl(340, 100%, 30%) !important;



    background-color:     hsl(340, 100%, 75%);



    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */



                            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */



                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */



}



.button.pink:hover {     background-color: hsl(340, 100%, 83%); }















.button.transparent {



    color:     rgba(0,0,0,0.5) !important;



}



.button.transparent, .button.transparent:hover, .button.transparent:active {



    background-color: transparent;



    background-image: none;



}















/* -------------- States -------------- */







.button:hover {



    background-color:     hsl(0, 0%, 83%);







    -webkit-transform:     translateY(-1px);



    -moz-transform:     translateY(-1px);



}







.button:active {



    background-image:     -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);



    background-image:     -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);







    -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */



                            rgba(0,0,0,0.4) 0 .1em 1px, /* border */



                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */



                            rgba(0,0,0,0.4) 0 .1em 1px, /* border */



                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */







    -webkit-transform:     translateY(.2em);



    -moz-transform:     translateY(.2em);



}







.button:focus {



    outline: none;



}







.button.disabled, .button.disabled:hover {



    opacity:             .5;



    cursor:             default;



    color:                 rgba(0,0,0,0.2) !important;



    text-shadow:         none !important;



    background-color:     rgba(0,0,0,0.05);



    background-image:     none;



    border-top:         none;







    -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */



                            rgba(0,0,0,0.3) 0 .1em 1px, /* border */



                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */



    -moz-box-shadow:     inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */



                            rgba(0,0,0,0.3) 0 .1em 1px, /* border */



                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */







    -webkit-transform:     translateY(5px);



    -moz-transform:     translateY(5px);



}







/* -------------- Fonts -------------- */







.serif {



    font-family: 'Lobster', serif;



    font-weight:             normal;



}











/* -------------- Sizes -------------- */







.xs { font-size: 16px; }



.xl { font-size: 32px; }











/* -------------- Materials -------------- */







.button.glossy:after, .button.glass:after {



    content:     "";



    position:     absolute;



    width:         90%;



    height:     60%;



    top:         0;



    left:         5%;







    -webkit-border-radius:     .5em .5em 1em 1em / .5em .5em 2em 2em;



    -moz-border-radius:     .5em .5em 1em 1em / .5em .5em 2em 2em;







    background-image:         -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),



                                color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );



    background-image:         -moz-linear-gradient(left, rgba(255,255,255,.6), rgba(255,255,255,0), rgba(255,255,255,0), rgba(255,255,255,.5) );



}



.button.glossy:active:after,



.button.glass:active:after,



.button.disabled:after { opacity: .6; }







.button.icon.glossy:after,



.button.icon.glass:after { height: 75% ; }







/* -------------- Glass + Transparent -------------- */



.button.glass {



    text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;



}



.button.glass:active {



    text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;



}











/* -------------- Shapes -------------- */







/* round */



.round, .round.glossy:after, .round.glass:after {



    border-top: none;



    -webkit-border-radius:     1em;



    -moz-border-radius:     1em;



}







/* oval */



.oval {



    border-top:             none;



    padding-left:             .8em;



    padding-right:             .8em;



    -webkit-border-radius:     5em / 2em;



    -moz-border-radius:     5em / 2em;



}



.oval.glossy:after, .oval.glass:after {     



    top:                     5%;



    -webkit-border-radius:     5em / 2em 2em 1em 1em;



    -moz-border-radius:     5em / 2em 2em 1em 1em;



}



.oval.icon {



    padding-left:             .8em;



    padding-right:             .8em;



    -webkit-border-radius:     1.5em / 1em;



    -moz-border-radius:     1.5em / 1em;



}



.oval.icon.glossy:after, .oval.icon.glass:after {



    -webkit-border-radius:     1.5em / 1em;



    -moz-border-radius:     1.5em / 1em;



}







/* brackets */



.brackets, .brackets.glossy:after, .brackets.glass:after {



    border-top:             none;



    -webkit-border-radius:     .5em / 1em;



    -moz-border-radius:     .5em / 1em;



}







/* skew */



.skew {



    border-top:             none;



    padding-right:             1.2em;



    padding-left:             0.8em;



    -webkit-border-radius:     5em 1em / 5em 1em;



    -moz-border-radius:     5em 1em / 5em 1em;



}



.skew.glossy:after, .skew.glass:after {     



    left: 10%;



    -webkit-border-radius:     7em 1em / 5em 1em;



    -moz-border-radius:     7em 1em / 5em 1em;



}



.skew.icon {     



    padding-right:             .9em;



    padding-left:             .8em;



}







/* back */



.back, .back.glossy:after, .back.glass:after {



    border-top-color:         rgba(255,255,255,0.5);



    -webkit-border-radius:     1.6em 1.6em 1em 1em / 4em 4em 1em 1em;



    -moz-border-radius:     1.6em 1.6em 1em 1em / 4em 4em 1em 1em;



}



.back.glossy:after, .back.glass:after {



     left:     6%;



     width:    88%;



}







/* knife */



.knife {                         



    padding-left: 1.5em;



    -webkit-border-radius:     .2em .5em .5em 8em / .2em .5em .5em 5em;



    -moz-border-radius:     .2em .5em .5em 8em / .2em .5em .5em 5em;



}



.knife.glossy:after, .knife.glass:after {



    left:                     3%;



    width:                     97%;         



    -webkit-border-radius:     .1em .5em .5em 8em / .1em .5em .5em 2em;   



    -moz-border-radius:     .1em .5em .5em 8em / .1em .5em .5em 2em;   



}



.knife.glossy.icon:after, .knife.glass.icon:after {



    left:                     5%;



    width:                     95%;



    -webkit-border-radius:     .5em .5em 1em 6em / .5em .5em 1em 4em;



    -moz-border-radius:     .5em .5em 1em 6em / .5em .5em 1em 4em;



}







/* shield */



.shield, .shield.glossy:after, .shield.glass:after {



    -webkit-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;



    -moz-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;



}



.shield {                             



    padding-left:     .8em;



    padding-right:     .8em;



}



.shield.icon {                         



    padding-left:     .6em;



    padding-right:     .6em;



}







/* drop */



.drop {



    border-top: none;



    -webkit-border-radius:     2em 5em  2em .6em / 2em 4em 2em .6em;



    -moz-border-radius:     2em 5em  2em .6em / 2em 4em 2em .6em;



}



.drop.glossy:after, .drop.glass:after {



    left: 4%;



    -webkit-border-radius:     2em 6em  2em 1em / 2em 4em 2em 2em;



    -moz-border-radius:     2em 6em  2em 1em / 2em 4em 2em 2em;



}



.drop.icon {     



    padding-right: .6em;



}











/* morph */



.morph {



    border-top: none;



    -webkit-border-radius:     5em / 2em;



    -moz-border-radius:     5em / 2em;



    -webkit-transition:     -webkit-border-radius .3s ease-in-out;



    -moz-transition:         -moz-border-radius .3s ease-in-out;



}



.morph:hover {



    -webkit-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;



    -moz-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;



}



.morph:active {



    -webkit-border-radius:     .3em;



    -moz-border-radius:     .3em;



}



.morph:after {



    display: none;



}



















/* Some ugly hacks for FF.



Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */



@-moz-document url-prefix() {



    .button { text-align: center; }



    .icon { padding: .5em 1em; }



    .icon:before { margin-left: -.42em; float: left; }







    .drop.icon { padding-right: 1.1em; }



    .shield.icon { padding-left: 1.1em; padding-right: 1.1em; }



    .skew.icon { padding-right: 1.4em; padding-left: 1.3em; }



    .oval.icon { padding-left: 1.3em; padding-right: 1.3em;    }



    .knife { padding-left: 2em; }



}



















/* Damn, this became a fat baby..  */















</style>

كود ال HTML



<div id="wrapper">







        <a href="#" class="button">Button</a>



        <a href="#" data-icon="?" class="button orange shield glossy">King</a>



        <a href="#" data-icon="?" class="button pink serif round glass">Queen</a>



        <a href="#" data-icon="?" class="button blue skew">Horse</a>



        <a href="#" data-icon="?" class="button green icon">Flower</a>



            



    </div>

يمكنك ابتكار أزرار اخرى و التفنن فيها

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

BonBon Sweet CSS3 Buttons

تكبير و تصغير الخط لمدونات بلوجر

noreply@blogger.com (khaled) — Fri, 03 Sep 2010 02:20:00 +0000

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

بحيت سوف يتيح للزائر تكبير أو تصغير الخط..

مثال (Demo)

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

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

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

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



</head>

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

<script type='text/javascript'> //<![CDATA[ function Increasefontsize(){ var obj = document.getElementById("textFonte"); if (obj.style.fontSize==""){obj.style.fontSize="12px"}; if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";} else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";} else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";} else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";} else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";} } function Reducethefontsize(){ var obj = document.getElementById("textFonte"); if (obj.style.fontSize==""){obj.style.fontSize="12px"}; if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";} else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";} else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";} else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";} else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";} } //]]> </script>

الآن نأتي للجزء الأهم

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

`<div class='post-header-line-1'/> </div>`

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







   <div class='post-header-line-1'/>



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



<a alt='تكبير الخط' href='javascript:Increasefontsize()'><img src='http://a.imageshack.us/img696/5952/zoominicon.jpg'/></a>



<a alt='تصغير الخط' href='javascript:Reducethefontsize()'><img src='http://a.imageshack.us/img827/7117/zoomouticon.jpg'/></a></b:if>



</div>

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



  <div class='post-body entry-content'>



      <data:post.body/>



      <div style='clear: both;'/> <!-- clear for photos floats -->



</div>

و تعويضه بالكود التالي



<div class='post-body entry-content'>



<div id='textFonte'>



<data:post.body/>



<div style='clear: both;'/> <!-- clear for photos floats -->



</div>



</div>

هدا كل شيء اتمنى لك الاستفادة

تعرف على عدد رسائلك في GMAIL بمجرد فتح الفايرفوكس

noreply@blogger.com (khaled) — Sun, 29 Aug 2010 01:02:00 +0000

اليوم سنتعرف على اضافة مميزة جدا في الفايرفوكس

وهي التعرف على الرسائل الموجودة في حسابك الخاص بـ Gmail

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

والانتقال اليها مباشرة دون ادخال البيانات

يعني الاضافة قد توفر عليك الوقت خاصة عندما تكون الكلمة السرية طويلة

ادخل على الموقع من هنا

ثانيا نقوم بكليك على تحميل الاضافة

نختار تنصيب

بعدها ننتظر تسطيب الاضافة

بعدها نقوم باختيار اعادة تشغيل الفايرفوكس لتفعيل الاضافة

بعد اعادة تشغيل الفايرفوكس نلاحظ النتيجة

سنجد رسالة في الاسفل نضغط عليها

ستخرج لنا بطاقة لملا البيانات

قم بملا بيانات حسابك في GMAIL

اكتب فقط اسم التعريف دون gmail.com

الآن نلاحظ النتيجة

ستخبرنا بان الحساب فتح وعدد الرسائل فيه

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