مدونة يوسف بجاد

أزرار css3 لمدونات بلوجر

noreply@blogger.com (يوسف بجاد) — Mon, 19 Mar 2012 05:54:00 -0700

السلام عليكم ورحمة الله
معنا اليوم مجموعة أزرار جذابة وكيفية استدعائها داخل التدوينة
من دون اطالة انتقل الى تحرير القالب وقم بتوسيع قوالب عناصر واجهة المستخدم
ثم ابحث عن ]]></b:skin> باستخدام CTRL+F وضع الكود التالي قبله مباشرة كود ال CSS

/* button
---------------------------------------------- */
.button {
   display: inline-block;
   zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
   *display: inline;
   vertical-align: baseline;
   margin: 0 2px;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: 14px/100% Arial, Helvetica, sans-serif;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em;
   -moz-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
   text-decoration: none;
}
.button:active {
   position: relative;
   top: 1px;
}

.bigrounded {
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
}
.medium {
   font-size: 12px;
   padding: .4em 1.5em .42em;
}
.small {
   font-size: 11px;
   padding: .2em 1em .275em;
}

/* color styles
---------------------------------------------- */

/* black */
.black {
   color: #d7d7d7;
   border: solid 1px #333;
   background: #333;
   background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
   background: -moz-linear-gradient(top, #666, #000);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
   background: #000;
   background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
   background: -moz-linear-gradient(top, #444, #000);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
   color: #666;
   background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
   background: -moz-linear-gradient(top, #000, #444);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
   color: #e9e9e9;
   border: solid 1px #555;
   background: #6e6e6e;
   background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
   background: -moz-linear-gradient(top, #888, #575757);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
   background: #616161;
   background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
   background: -moz-linear-gradient(top, #757575, #4b4b4b);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
   color: #afafaf;
   background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
   background: -moz-linear-gradient(top, #575757, #888);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
   color: #606060;
   border: solid 1px #b7b7b7;
   background: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
   background: -moz-linear-gradient(top, #fff, #ededed);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
   background: #ededed;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
   background: -moz-linear-gradient(top, #fff, #dcdcdc);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
   color: #999;
   background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
   background: -moz-linear-gradient(top, #ededed, #fff);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
   color: #fef4e9;
   border: solid 1px #da7c0c;
   background: #f78d1d;
   background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
   background: -moz-linear-gradient(top, #faa51a, #f47a20);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
   color: #fcd3a5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
   background: -moz-linear-gradient(top, #f47a20, #faa51a);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
   color: #faddde;
   border: solid 1px #980c10;
   background: #d81b21;
   background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
   background: -moz-linear-gradient(top, #ed1c24, #aa1317);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
   background: #b61318;
   background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
   background: -moz-linear-gradient(top, #c9151b, #a11115);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
   color: #de898c;
   background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
   background: -moz-linear-gradient(top, #aa1317, #ed1c24);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
   color: #d9eef7;
   border: solid 1px #0076a3;
   background: #0095cd;
   background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
   background: -moz-linear-gradient(top, #00adee, #0078a5);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
   background: #007ead;
   background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
   background: -moz-linear-gradient(top, #0095cc, #00678e);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
   color: #80bed6;
   background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
   background: -moz-linear-gradient(top, #0078a5, #00adee);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
   color: #fae7e9;
   border: solid 1px #b73948;
   background: #da5867;
   background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
   background: -moz-linear-gradient(top, #f16c7c, #bf404f);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
   background: #ba4b58;
   background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
   background: -moz-linear-gradient(top, #cf5d6a, #a53845);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
   color: #dca4ab;
   background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
   background: -moz-linear-gradient(top, #bf404f, #f16c7c);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
   color: #e8f0de;
   border: solid 1px #538312;
   background: #64991e;
   background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
   background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
   background: #538018;
   background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
   background: -moz-linear-gradient(top, #6b9d28, #436b0c);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
   color: #a9c08c;
   background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
   background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
   color: #feeef5;
   border: solid 1px #d2729e;
   background: #f895c2;
   background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
   background: -moz-linear-gradient(top, #feb1d3, #f171ab);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
   background: #d57ea5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
   background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
   color: #f3c3d9;
   background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
   background: -moz-linear-gradient(top, #f171ab, #feb1d3);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

لاستدعاء الأزرار جميعها انتقل الى تحرير رسالة جديدة ثم انتقل الى وضع تحرير html
ثم اطبع كود ال HTML

<a class="button black" href="الرابط">demo</a>
<a class="button gray" href="الرابط">demo</a>
<a class="button white" href="الرابط">demo</a>
<a class="button orange" href="الرابط">demo</a>
<a class="button red" href="الرابط">demo</a>
<a class="button blue" href="الرابط">demo</a>
<a class="button rosy" href="الرابط">demo</a>
<a class="button pink" href="الرابط">demo</a>
<a class="button green" href="الرابط">demo</a>

ولاستدعاء زر واحد يكفي هذا الكود

<a class="button black" href="الرابط">تحميل</a>

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

ولمعاينة الأزرار مباشرة انتقل الى محرر html

html editor

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

والى هنا ينتهي الدرس

القادم افضل باذن الله

صندوق اشترك عبر البريد(mbt-sub-box) بألوان مختلفة

noreply@blogger.com (يوسف بجاد) — Sun, 18 Mar 2012 14:31:00 -0700

السلام عليكم ورحمة الله
معنا اضافة جذابة ومميزة عبارة صندوق اشتراك عبر البريد مقدمة من MBT
الاضافة في الاصل كانت باللون الاخضر
لذا قمت باضافة نموذجين اخرين باللون البرتقالي والازرق بعد تعريبها
يمكن ادراج الاضافة داخل اداة HTML ووضعها في اي مكان يناسبك سواء في السايد بار او فوق واسفل التدوينات
ويستحسن ان تكون داخل التدوينة وهذا ماسنتطرق له اليوم

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

بعدها نبحث عن الوسم <data:post.body/> باستخدام CTRL+F

ثم نختار احد الأكواد التالية (حسب اللون الذي تريد) ونطبعه اسفله مباشرة

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#DD501A), to(#FF9620));background: -moz-linear-gradient(center top , #DD501A, #FF9620) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #FF9620, #DD501A) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #FF9620, #DD501A) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>إشترك لتحصل على جديد المواضيع </h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/bijed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "أدخل بريدك الإلكتروني هنا ...";}' onfocus='if (this.value == "أدخل بريدك الإلكتروني هنا ...") {this.value = ""}' size='30' type='text' value='أدخل بريدك الإلكتروني هنا ...'/> <input name='uri' type='hidden' value='blogspot/bijed'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='إشترك الأن'/></center></form></div>
</b:if>

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>إشترك لتحصل على جديد المواضيع </h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/bijed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "أدخل بريدك الإلكتروني هنا ...";}' onfocus='if (this.value == "أدخل بريدك الإلكتروني هنا ...") {this.value = ""}' size='30' type='text' value='أدخل بريدك الإلكتروني هنا ...'/> <input name='uri' type='hidden' value='blogspot/bijed'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='إشترك الأن'/></center></form></div>
</b:if>

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from((#3515DA), to((#3B68F0));background: -moz-linear-gradient(center top , #3515DA, #3B68F0) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #3B68F0, #3515DA) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #3B68F0, #3515DA) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>إشترك لتحصل على جديد المواضيع </h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/bijed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "أدخل بريدك الإلكتروني هنا ...";}' onfocus='if (this.value == "أدخل بريدك الإلكتروني هنا ...") {this.value = ""}' size='30' type='text' value='أدخل بريدك الإلكتروني هنا ...'/> <input name='uri' type='hidden' value='blogspot/bijed'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='إشترك الأن'/></center></form></div>
</b:if>

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

والقادم افضل باذن الله

الحواف المستديرة للصور بدون برامج !

noreply@blogger.com (يوسف بجاد) — Sun, 18 Mar 2012 11:47:00 -0700

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

وطريقة الاستخدام سهلة وبسيطة فقط ارفع الصورة من جهازك أو ضع رابط الصورة المراد تدوير حوافها ثم اضغط على زر generate rounded image

Round Your Image Corners Now!

This widget is a coutesy of roundpic.

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

<h3>Round Your Image Corners Now!</h3> <p><em></em></p> <style>

input {
color:#289728;
font: normal 14px arial, sans-serif, verdana;
border:1px dotted #67a7e3;
background:#fff; padding:4px 2px;
}

input:hover {
border:1px solid #67a7e3;
} </style><form enctype="multipart/form-data" method="post" action="http://www.roundpic.com"><input name="MAX_FILE_SIZE" type="hidden"> <br> <table><tbody> <tr> <td class="title"><b>Image:</b></td> <td><input style="border-width: 1px; border-style: dotted; border-color: rgb(0, 128, 255); padding: 4px 2px; margin-right: 0px;" name="file" type="file"></td> </tr> <tr> <td class="title">or <b>URL:</b></td> <td class="input"><input name="url"></td> </tr> <tr> <td class="submit" colspan="2"><button onclick="getLoader();" type="submit">Generate Rounded Image!</button></td> </tr> </tbody></table> </form> <p><em></em></p> <p><em></em></p> <p><em></em></p> <p><em> </em></p><hr><em>This widget is a coutesy of </em><a href="http://roundpic.com" target="_blank"><em>roundpic</em></a>.

والى هنا ينتهي الموضوع دمتم بود و في أمان الله

الربح من النت:ج2 Commission Junction

noreply@blogger.com (يوسف بجاد) — Sat, 17 Mar 2012 13:18:00 -0700

السلام عليكم ورحمة الله
معنا اليوم شركة رائدة في عالم النشر والاعلان وهي شركة Commission Junction
وهي لا تختلف عن اعلانات ادسنس كثيرا
وتعتمد نفس المنهج الربحي المعتمد من الناشرين والمعلنين
غير انها توفر بعض العروض الخاصة وبعض الحلول للناشرين

يمكنك الاطلاع على دليل من هنا

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

الى هنا ينتهي الموضوع وللموضوع بقية ان شاء الله

رفع ملفات الجافا على بلوجر!!

noreply@blogger.com (يوسف بجاد) — Sat, 17 Mar 2012 11:12:00 -0700

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

معاينة الدرس

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

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

http://youcef-bijed.googlecode.com/files/slider.js

نقوم بتحميله ثم نفتحه باستخدام المفكرة ويكون محتواه كالتالي

$(document).ready(function () {
    $('img.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');
    });
});

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

<script type='text/javascript'>

    //<![CDATA[

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

    //]]>

    </script>

ليصبح الشكل النهائي للكود كالتالي

<script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function () {
    $('img.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');
    });
});

    //]]>

    </script>

وطبعا مكان الكود الناتج يكون مابين الوسمين <head> و <head/>

<head>

هنا كود الجافا

<head/>

والى هنا ينتهي الموضوع نلتقي في مواضيع اخرى قادمة ان شاء الله

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

noreply@blogger.com (يوسف بجاد) — Sat, 17 Mar 2012 10:32:00 -0700

السلام عليكم ورحمة الله
عودة للتدوين مع قالب جديد تم تصميمه بتقنية html 5.css3 والقليل من jquery
مازال القالب قيد الاختبار والتعديل وساضيف بعض الخصائص لاحقا
اهم مايميز القالب الجديد انه سريع التصفح كما انه متوافق جدا مع الجوالات وكذلك المتصفحات الحديثة
قمت بتصميم القالب بناءا على ماتعلمته في عالم الويب كما اني استوحيت بعض الاضافات واللمسات من مصادر عديدة اهمها فريق كوردرب way2blogging

ونرحب بارائكم وانتقاداتكم والسلام عليكم

متوقف عن التدوين

noreply@blogger.com (يوسف بجاد) — Sat, 10 Mar 2012 01:57:00 -0800

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

للاستفادة من المحرر تفضل من هنا

للحصول على باك لينك تفضل من هنا

دروس واضافات بلوجر مدونة تقارب

الربح من النت تفضل من هنا

.......................................................................................
فيما يلي الرد على تعليقات الاخ علي استثنائيا

اولا شكرا لك ولا افتقدتك العافية
لماذا لم تكن تريد التطرق لموضوع؟لا يا اخي تطرق لاي موضوع يعجبك ماعندي مشاكل

اولا راجع هذا الموضوع تفضل من هنا

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

+ حتى في مدونة mybloggertricks لم يتم طرح كيفية عمل محرر html+ css انما صاحبها محمد خليل زاي قام بانشاء المحرر الذي هو عبارة عن صفحة html قام برفعها على استظافة
hostgator اما انا فقد تعبت في اعادة صياغة المشروع خاصة ان بلوجر لا يدعم انشاء صفحات مستقلة المهم اني اقتبست وذكرت الامر
يمكنك ايضا عرض السورس وستفاجأ باني ادرجت ايضا في السورس اني اقتبست من هذه المدونة مع اني عملت عليه ولم اعمل نسخ لصق لا علينا
اذا استعصى عليك امر عرض السورس كود اسفل الموضوع رفعتلك صورة توضيحية
انا نصحتك وكنت متوقع ان تصغي للنصح لا ان تقوم بطرح تعليق مشابه وقد اخطأت التصويب انا لست ناسخ مواضيع ولا مترجم

اما عن قولك

في المرة القادمة(إن كانت هناك مرة قادمة)
فلن تكون هناك مرة قادمة هذا اكيد

.........................................................................

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

في اما ن الله

اربح من النت جزء-1 مئات الدولارات + راتب شهري مقدم من WAZZUB

noreply@blogger.com (يوسف بجاد) — Fri, 2 Mar 2012 10:33:00 -0800

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

كنت قد وعدت بتقديم سلسلة لطرق الربح من النت ولم يكن موضوعي الاول المقرر طرحه هو موقع wazub انما كنت ساطرح بعض برامج affiliate لكن بعض الفرص لا تعوض والوقت المخصص لهذا العرض شارف على الانتهاء لذا قررت طرحه اولا

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

حسنا دون اطالة نبدأ

هل تريد راتب شهرى دائم مدى الحياة .؟؟؟؟

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

أتمنى منكم قراءة هذا الحوار لفهم آلية عمل الموقع:-
سؤال 1 : ما هو موقع Wazzub ؟
جواب : Wazzub هو موقع اجتماعي جديد مثل الفايسبوك وتويتر. موقعنا يستخدم بالضبط نفس التكنولوجيا مثل جوجل مع بعض الاضافات .

........................................................................................................
سؤال 2 : بماذا سأستفيذ منه ؟
جواب : موقع Wazzub موقع ربحي تستطيع من خلاله جني الكثير من المال ، أول
خطوة هي التسجيل لكي يزيد عدد المستخدمين فيه ومن ثم ستعرف كيف تبني
مستقبلك مع هذه الشبكة.سيتم دفع 50 % من جميع الأرباح على الأعضاء. و 50 % الأخرى تذهب إلى المساهمين الذين يستثمرون الكثير من المال لجعل WAZZUB يحدث. ويصبح ثورة المواقع

......................................................................................................
سؤال 3 :بعد التسجيل ، ما هو المطلوب مني ، هل سأضغط على الإعلانات أم سأشتري شيئا ما ؟
جواب : كل ما عليك هو التسجيل فقط ، ولن يطلب منك لا الضغط على إعلانات ولا تنزيل برامج ولا شراء أي شيء.

.....................................................................................................
سؤال 4 : إدا كنت سأجني المال من هذه الشركة ، فما هي مداخيلها هي أصلا ؟ !
جواب : قبل أن أجيبك على هذا السؤال ، انت تعرف موقع الفيس بوك و تويتر و
محرك البحث الشهير جوجل وكلنا نستخدمهم هل دفعت لهم في يوم من الأيام ،
طبعا لا ،، ولكن لأنهم يضمون ملايين المستخدمين مثلي ومثلك أصبحوا يجنون من
ورائنا العديد من المال ،، ولكن دون أن يدفعوا لنا شيئا ، أما موقع wazzub
فهو مختلف تماما وستعرف كل شيء في حينه.
...................................................................................................
سؤال 5 : ادا كيف سأجني أنا المال من موقع Wazzub؟
جواب : كما قلت سابقا فموقع Wazzub سيكون موقع اجتماعي ينافس الفيس بوك و
المواقع الأخرى ، وكل ما يريده الآن هو جمع أكبر عدد من المستخدمين .
..................................................................................................
سؤال 6 : متى سيدفع لي موقع Wazzub ؟؟
جواب : الموقع سيفتح رسميا يوم 9 أبريل ،، لدى يجب على أي شخص أن يقوم
بالتسجيل حاليا ،، و جلب أكبر عدد من الأشخاص ليتسجلوا تحته ويكون شبكة
خاصة به ،، وعند فتح الموقع سيقوم بإرسال المبالغ الصغيرة على حسابات
البنوك الإلكترونية الخاصة بالمستخدمين في حين المبالغ تتم بواسطة شيكات او
تحويل بنكي .لابد ان يكون لديك 3 ريفيرال تحتك لتصبح مؤهلا لسحب اضافة
الأموال
..............................................................................................
و الآن إلى التسجيل بالصور و بالتفصيل :-

الموقع سيبدا الشطر الاول رسميا يوم 1/1/2012- وسينتهى يوم 1/4/2012 وفى هذه الاربع اشهر سيكون كل المشتركين شركاء فيه لهم ارباح شهرية يمكنكم التسجيل باي ايميل ولكن انصحكم بالتسجيل جي ميلGmail

1- للتسجيل تفضل من هنا

2- بعد الضغط على رابط التسجيل ستفتح لك نافذة ، في أسفل النافذة ستجد استمارة التسجيل كالتالي :-

3- بعد ملأ الإستمارة و الضغط على كلمة Join ستشاهد هذه الرسالة
أي أن عملية التسجيل تمت بنجاح:-

4- الآن إذهب إلى بريدك في جوجل وستجد أن الرسالة قد وصلت:-

الرسالة يمكن تجدها في السبام (( البريد المزعج )) ابحث عنها بعد ذلك الرسائل ستأتي بشكل عادي:-

5- بعد فتح الرسالة ستجد رابط ******* إضغط عليه لتنشيط حسابك
هذه أهم خطوة شاهد الصورة:-

6- بعد الضغط على رابط ******* ، ستشاهد رسالة مفادها أنه قد تم تفعيل حسابك بنجاح مبروووووووووووووووك ، شاهد الصورة

7- ستأتيك رسالة أخرى تحتوي على إميلك وكلمة المرور اللذان سجلت بهما:-

طبعا هذه صورة شخصية بي

8- الآن توجه إلى الموقع عن طريق هذا الرابط:-

http://signup.wazzub.info/login.php

9- ادخل الايميل والباسورد مبروووك ، أنت الآن داخل حسابك وستجد رابط الريفيرال الخاص بك لدعوة اصدقائك:-

(( ملاحظة هامة جدا ))
يجب دعوة مجموعة من الاصدقاء للتسجيل فى الموقع على الاقل 5 أصدقاء وكل شخص يقوم بدعوة 5 أصدقاء آخرين وهكذا حتى يزداد دخلنا الشهري بنسبة كبيرة وللتأكد من صحة كلامى ادخلوا على هذا الرابط :-
http://www.wazzub.com/calc/calculator.htm
..................................................................................
الموقع سيبدا الشطر الاول رسميا يوم 1/1/2012
الفترة ماقبل بدا جني الارباح واللتي سيضهر فيها الموقع للوجود
تحقق منطقة الأعضاء العلامة التجارية الجديدة لمشاهدة دوونلين الخاص المتنامي. في WAZZUB، ونحن نسميها FACTOR $ (الدولار عامل).
1 أبريل 2012 هو يوم بدا وابتداء من هذا التاريخ يمكنك التمتع بارباحك من الشبكة والبدء في كسب المال.خطوة بخطوة سوف نضيف المزيد والمزيد من الوظائف التي تجعل WAZZUB الصفحة البيت المثالي :
محرك بحث قوي، وهو قسم الأخبار الشخصية، وأفضل الصفقات على الانترنت وميزات الترفيه مذهلة مثل أشرطة الفيديو وألعاب المهارة،.....
بناء على قوتكم انتم المستخدمين سوف نخلق موقعا متكاملا يجمع المحادثة الترفيه والربـــح والكثير
.........................................................................
من أين تاتي الشركة بالمال ؟
ليس عليك الدفع ، شراء أو بيع أي شيء،اذن ماهي ارباح WAZZUB ؟
دعونا ناخد جوجل كمثال : قوقل أكثر من 1 مليار مستخدم شهريا الذين يستخدمون خدماتها دون دفع ثمن ذلك.
جنت جوجل الربع الأخير 3 مليارات دولار فقط من الأرباح عن طريق عرض
الإعلانات. وهذا يعني انه يكسب في المتوسط ??1 دولار لكل مستخدم شهريا.
فالشركة تزداد ارباحها بازدياد عدد المسجلين بها وكدا مستعليها اي نحن
حتى ابريل مدة جد كافية لتكوين شبكة قوية من خمس مستويات
...........................................................................

هنا لمعرفة ارباحك في الشهر الواحد : متال اذا قمت باستدعاء 5 اشخاص
اذهب الى الموقع وضع 5 ثم 5 وانظر الارباح الهائلة للمستوى الخامس
http://www.wazzub.com/calc/calculator.htm
..................................................................................
متال اذا قمت باستدعاء 5 اشخاص
1st. Generation 5 x $1.00 = $5.00
2nd. Generation 25 x $1.00 = $25.00
3rd. Generation 125 x $1.00 = $125.00
4th. Generation 625 x $1.00 = $625.00
5th. Generation 3125 x $1.00 = $3,125.00
............................................................

الشركة تعطي فرصة للمسجلين لتكوين شبكتهم لانه بعد 9/4/2012 فستبدا الشركة
رسميا. و ستقوم فقط بالدفع للمسجلين قبل هذا التاريخ اي بعد الدفع ليست
هناك فرصة اخرى للربح منها . لابد ان يكون لديك 3 ريفيرال تحتك لتصبح مؤهلا
لسحب اضافة سحب المبالغ الصغيرة تتم بواسطة البنوك الالكترونية في حين
المبالغ تتم بواسطة شيكات او تحويل بنكي

.............................................................

ملاحظة

هامة اشار اليها الموقع فقط الذين سجلو قبل تاريخ 9/4/2012 هم فقط من سيوف يحصلون على الارباح مدى الحياة كل حسب شبكته.
...............................................................

للتسجل

تفضل من هنا

قائمة منزلقة + منسدلة + متحركة بتاثيرات css 3

noreply@blogger.com (يوسف بجاد) — Sun, 26 Feb 2012 13:27:00 -0800

السلام عليكم ورحمة الله متابعي المدونة وزوارها
منذ فترة ليست ببعيدة لمحت هذه القائمة وقد تم طرحها في مدونة عرب بلس نقلا عن مدرسة script-tutorial
طبعا الموقع يعتبر مدرسة لمطوري الويب وهو غني عن التعريف

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

تحميل السورس معاينة

الان انتقل الى المحرر لتقوم بتجربتها مباشرة

محرر اكواد html

كود css قم بطبعه مكان هنا كود css

/* navigation menu styles - main styles */
ul.navi {
    position:relative;
    z-index:100;
    padding:0;
    margin:0 0 0 60px;
    list-style:none;
    width:auto;
    height:30px;
}
ul.navi > li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;

    -moz-transition: -moz-transform 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
ul.navi a {
    display:block;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    line-height:30px;
    text-align:center;
    text-decoration:none;
}
ul.navi a img {
    border:0;
}
ul.navi a span {
    position:absolute;
    left:5px;
    font-size:11px;
    font-weight:bold;
    color:#fff;
}

/* top line - hover styles */
ul.navi:hover {
    height:100px;
}
ul.navi:hover li#n1 {
    -moz-transform: translatex(0px);
    -ms-transform: translatex(0px);
    -o-transform: translatex(0px);
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
}
ul.navi:hover li#n2 {
    -moz-transform: translatex(70px);
    -ms-transform: translatex(70px);
    -o-transform: translatex(70px);
    -webkit-transform: translatex(70px);
    transform: translatex(70px);
}
ul.navi:hover li#n3 {
    -moz-transform: translatex(140px);
    -ms-transform: translatex(140px);
    -o-transform: translatex(140px);
    -webkit-transform: translatex(140px);
    transform: translatex(140px);
}
ul.navi:hover li#n4 {
    -moz-transform: translatex(210px);
    -ms-transform: translatex(210px);
    -o-transform: translatex(210px);
    -webkit-transform: translatex(210px);
    transform: translatex(210px);
}
ul.navi:hover li#n5 {
    -moz-transform: translatex(280px);
    -ms-transform: translatex(280px);
    -o-transform: translatex(280px);
    -webkit-transform: translatex(280px);
    transform: translatex(280px);
}

/* submenus - common styles */
ul.sub {
    padding:0;
    margin:0;
    list-style:none;
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    opacity:0;

    -moz-transition: opacity 0s linear 1s;
    -ms-transition: opacity 0s linear 1s;
    -o-transition: opacity 0s linear 1s;
    -webkit-transition: opacity 0s linear 1s;
    transition: opacity 0s linear 1s;
}
ul.sub li {
    width:48px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;

    -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
    -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
    -o-transition: -o-transform 0.5s ease-in-out 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
    transition: transform 0.5s ease-in-out 0.5s;
}

/* submenus - hover styles */
ul.navi > li:hover ul {
    opacity:1;

    -moz-transition: opacity 0s linear 0.5s;
    -ms-transition: opacity 0s linear 0.5s;
    -o-transition: opacity 0s linear 0.5s;
    -webkit-transition: opacity 0s linear 0.5s;
    transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
    -moz-transform: translatex(-70px) translatey(60px);
    -ms-transform: translatex(-70px) translatey(60px);
    -o-transform: translatex(-70px) translatey(60px);
    -webkit-transform: translatex(-70px) translatey(60px);
    transform: translatex(-70px) translatey(60px);
}
ul.navi li:hover ul li.c {
    -moz-transform: translatey(60px);
    -ms-transform: translatey(60px);
    -o-transform: translatey(60px);
    -webkit-transform: translatey(60px);
    transform: translatey(60px);
}
ul.navi li:hover ul li.r {
    -moz-transform: translatex(70px) translatey(60px);
    -ms-transform: translatex(70px) translatey(60px);
    -o-transform: translatex(70px) translatey(60px);
    -webkit-transform: translatex(70px) translatey(60px);
    transform: translatex(70px) translatey(60px);
}

وطبعا كود html مكانه واضح

<div class="example">

    
    <ul class="navi">
        <li id="n1"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu1</span></a>
            
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu11</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu12</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu13</span></a></li>
            </ul>
        </li>
        <li id="n2"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu2</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu21</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu22</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu23</span></a></li>
            </ul>
        </li>
        <li id="n3"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu3</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu31</span></a></li>
            </ul>
        </li>
        <li id="n4"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu4</span></a>
            <ul class="sub">
                <li class="l"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="c"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
                <li class="r"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Menu41</span></a></li>
            </ul>
        </li>
        <li id="n5"><a href="http://th3experts.com/css3-animated-slide-menu/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdWByqK94Vvr-gpmOpzYZGGYCpvhlw4JpshuxwcHRUam1aNT3et2dlPLqOBR2RxbR6kCAeq6ZnaLeFezTqYjEigZGxzP6Gdab2Tw5u5f0V_M3dUgrD0KpibpSESLOt93X91sAiNNHoSg/s1600/btn.png" alt="" /><span>Tutorial</span></a>
        </li>
    </ul>

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

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

قم بتغيير مايجب تغييره لتلائم القائمة احتياجاتك قبل تركيبها على مدونتك واي استفسارات او مشاكل مع القائمة انا في الخدمة

رابط الموضوع على مدونة عرب بلس

المصدر الاصلي

حصريا ولأول مرة عربيا محرر اكواد html

noreply@blogger.com (يوسف بجاد) — Mon, 13 Feb 2012 10:20:00 -0800

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

اليوم تم انهاء مشروع المحرر وتمت تجربته والحمد لله لاتوجد اخطاء

المحرر مفيد لكل مطور او معرب ويسهل العمل كثيرا

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

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

اولا قم بزيارة المحرر

تفضل من هنا

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

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQEkoPeJiRWg4JqKjFky-gwmQld_5rIAjLLJWBJeX3oYJfZ-C6wjp7KzKg3uCl8KJxV0tN9mdtSUpYpwgSXlfNm4hrCCnoGc3OJrIpRaIb4dq40mm94OJHCBBEqnf42XkE6EZQPEeqH0/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8hTKHSl3OI-OTqSwYzNx0m58YNE51_T6Eh-JMRs9uhtepfFGIDtiozivUDbNtnT1yW8pRiNDmndHzPPkfnmaBTp6-T4OtPpdSA-u_oUTMvpQc2cQx7Y2ldVMNTv7KavAv87_EWLsqS4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV5fwrJzXA53Gysc1WLxs4HMMgxQ2JMl0OSv0qJcOSdjdU23ZItsJo4HG7_-Pnz3YiDNy5jESwASyXNYmXTCfvMvDaOd8E2UIGSwTHAbmJtJk9W6UacCHCR11BXauRBIqSQAHD-gzUa8/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJSCtiiaPlcqMNioaQfQ-nwcOPqI68n0uSdYVCjMthIbjIb97OmDBzmjI5ROtyuTQEZM_Y6kcv7kamiG_rGZNNX_VoBxAKXLQmIUpzsF1D4upNDl4TUEWJVPzDzsnquOt5hqQq6vOWxc/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF0fE9UoeZwqFKY2baECnieUzea5h8bo3C4LjRRLfr5hl3wdQiWr4SaygMkKQkpyh-WSzX3RtnFKqbvYLhm2Zx2Loby0EnOeNpv_NzuH7-sM6_xaxf3v300N38cwDsv5JUzJsbPOhiI8/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc75V_6L6wKmixP-SSpj3S780UBaHS_0cAAlm513Oonznbv2MVUtUJah1NzGPrJTvCNbwJWr4pGxsJiye4ZNiCPX47o1GwtXJjq7ot3tO-LHC2-FHhL9QyIIZ0N1rNnnp-sKJNpFJ9o-A/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGsjpg02zMF0ruyWK-0O9eCAzRAsubwappRow7r8lNL8ohPBl5nBdz1bOBjewFKBVO4YYJX7RVd3SgQbOjWi3VahojOj0re-RAPgd6vSPPcWiWlozYVjncV5pDbNyKfpeohZV-6Al2qA/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFC1OkLlaN5HaHuCNuQ7gsjoU1pJwMuMb7AJYBJfQFuhG8D7nKAIGVwmOcxsmRW9OIKKSN5YOZyFKtXuy-cUryJRp_kHaT2OFb0_Jci0CIDIUpx0Nm4AmQ-X5ajj4eeqzgNUuOtO6vcM/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdBigRAWfMbY6g9D4NluIn0WQvMCK3n9gL_52RLyNs7ypWjbWTC1TPZ9ENUvHXJAH3giakkf0UfmuIvbrYVJVcP5c8bko-RQ8Ej-t_pdohgNi7CodJep9vP8anHAqAEogA4GIFZr2w8k/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQuA6sySxcBR6omZqeH5MJ5cjyuuQR1fWRO24Vtp8NLNOabmZrBjfIb_ooAKlC_JQqnSQNFNYzK4hONUDEVGp0Uzhw5O-ibZb1y8VcLny90PA_rkrvkvxD-HbGdVzvOBY5Ygwk3v8U7E/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcBPKucf6Nr-9WMLSUR2_BqU3wqQowCr-pQ0JbrPtRkuqtCEiklYl5YD78O13LJyZHASoi-jTiF5qCufVpXOKiBOqCuCTOB5-6KtVJAmPnPbltjqmU9ijgRpDl1fxhU5dJpUl74IvZVE/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJV6oBHYSVtiNF6yMp109RsLT_TZF3Te7HzBdPLnK4nNRjBboggZb5PI-7-m8otMnRAm54fkb4jAu1OlStLYvIedm57hoYiI1Jz33N4KDoa2RYB9C79HKw-oj0kIeA0vsHqmHowWPEic/s1600/youtube_32.png'); }

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

عوض ايضا عبارة هنا كود html بهذا الكود وهو كود html

<div class="spinning_icons">
    <a href="الرابط" class="twitter" title="twitter">Twitter</a>
    <a href="الرابط" class="delicious" title="delicious">Delicious</a>
    <a href="الرابط" class="digg" title="digg">Digg</a>
    <a href="الرابط" class="dribbble" title="dribbble">Dribbble</a>
    <a href="الرابط" class="email" title="email">Email</a>
    <a href="الرابط" class="facebook" title="facebook">Facebook</a>
    <a href="الرابط" class="flickr" title="flickr">Flickr</a>
    <a href="الرابط" class="foursquare" title="foursquare">Foursquare</a>
    <a href="الرابط" class="linkedin" title="linkedin">Linkedin</a>
    <a href="الرابط" class="rss" title="rss">RSS</a>
    <a href="الرابط" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="الرابط" class="youtube" title="youtube">YouTube</a>
</div>

الان اضغط زر استعرض واستمتع

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

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

اي استفسار انا في الخدمة ارجو ان يكون المحرر مفيد

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

تنويه واخلاء ذمة

noreply@blogger.com (يوسف بجاد) — Sun, 12 Feb 2012 09:00:00 -0800

تم بالامس سرقة حساب قوقل الخاص بصاحب مدونة تقارب

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

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

مدونة بجاد تحصد البيج رانك 2

noreply@blogger.com (يوسف بجاد) — Sat, 11 Feb 2012 12:56:00 -0800

قامت قوقل بتحديث البيج رانك في السادس من هذا الشهر

وقد حصدت مدونة بجاد على البيج رانك 2

ولم يمر على انشاءها الا اشهر قليلة

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

اجعل ايقونات مدونتك تدور!(spin it )

noreply@blogger.com (يوسف بجاد) — Tue, 7 Feb 2012 12:37:00 -0800

اليوم معنا اضافة او تقنية جميلة وهي ما يعرف ب ال spin

اي الغزل او الدوران المشابه لحركة المغزل

سنطبق على ايقونات المواقع الاجتماعية

وبعيدا عن منهج ابحث على الوسم head

ساطرح مثالا وانت لك حرية التعديل والتغيير

Demo

كود css

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQEkoPeJiRWg4JqKjFky-gwmQld_5rIAjLLJWBJeX3oYJfZ-C6wjp7KzKg3uCl8KJxV0tN9mdtSUpYpwgSXlfNm4hrCCnoGc3OJrIpRaIb4dq40mm94OJHCBBEqnf42XkE6EZQPEeqH0/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8hTKHSl3OI-OTqSwYzNx0m58YNE51_T6Eh-JMRs9uhtepfFGIDtiozivUDbNtnT1yW8pRiNDmndHzPPkfnmaBTp6-T4OtPpdSA-u_oUTMvpQc2cQx7Y2ldVMNTv7KavAv87_EWLsqS4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV5fwrJzXA53Gysc1WLxs4HMMgxQ2JMl0OSv0qJcOSdjdU23ZItsJo4HG7_-Pnz3YiDNy5jESwASyXNYmXTCfvMvDaOd8E2UIGSwTHAbmJtJk9W6UacCHCR11BXauRBIqSQAHD-gzUa8/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJSCtiiaPlcqMNioaQfQ-nwcOPqI68n0uSdYVCjMthIbjIb97OmDBzmjI5ROtyuTQEZM_Y6kcv7kamiG_rGZNNX_VoBxAKXLQmIUpzsF1D4upNDl4TUEWJVPzDzsnquOt5hqQq6vOWxc/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF0fE9UoeZwqFKY2baECnieUzea5h8bo3C4LjRRLfr5hl3wdQiWr4SaygMkKQkpyh-WSzX3RtnFKqbvYLhm2Zx2Loby0EnOeNpv_NzuH7-sM6_xaxf3v300N38cwDsv5JUzJsbPOhiI8/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc75V_6L6wKmixP-SSpj3S780UBaHS_0cAAlm513Oonznbv2MVUtUJah1NzGPrJTvCNbwJWr4pGxsJiye4ZNiCPX47o1GwtXJjq7ot3tO-LHC2-FHhL9QyIIZ0N1rNnnp-sKJNpFJ9o-A/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGsjpg02zMF0ruyWK-0O9eCAzRAsubwappRow7r8lNL8ohPBl5nBdz1bOBjewFKBVO4YYJX7RVd3SgQbOjWi3VahojOj0re-RAPgd6vSPPcWiWlozYVjncV5pDbNyKfpeohZV-6Al2qA/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFC1OkLlaN5HaHuCNuQ7gsjoU1pJwMuMb7AJYBJfQFuhG8D7nKAIGVwmOcxsmRW9OIKKSN5YOZyFKtXuy-cUryJRp_kHaT2OFb0_Jci0CIDIUpx0Nm4AmQ-X5ajj4eeqzgNUuOtO6vcM/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdBigRAWfMbY6g9D4NluIn0WQvMCK3n9gL_52RLyNs7ypWjbWTC1TPZ9ENUvHXJAH3giakkf0UfmuIvbrYVJVcP5c8bko-RQ8Ej-t_pdohgNi7CodJep9vP8anHAqAEogA4GIFZr2w8k/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQuA6sySxcBR6omZqeH5MJ5cjyuuQR1fWRO24Vtp8NLNOabmZrBjfIb_ooAKlC_JQqnSQNFNYzK4hONUDEVGp0Uzhw5O-ibZb1y8VcLny90PA_rkrvkvxD-HbGdVzvOBY5Ygwk3v8U7E/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcBPKucf6Nr-9WMLSUR2_BqU3wqQowCr-pQ0JbrPtRkuqtCEiklYl5YD78O13LJyZHASoi-jTiF5qCufVpXOKiBOqCuCTOB5-6KtVJAmPnPbltjqmU9ijgRpDl1fxhU5dJpUl74IvZVE/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJV6oBHYSVtiNF6yMp109RsLT_TZF3Te7HzBdPLnK4nNRjBboggZb5PI-7-m8otMnRAm54fkb4jAu1OlStLYvIedm57hoYiI1Jz33N4KDoa2RYB9C79HKw-oj0kIeA0vsHqmHowWPEic/s1600/youtube_32.png'); }

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

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

لن اتحدث عن روابط صور الايقونات فهذا امر واضح

في اعلى الكود السابق ستجد

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

width:48px;
height:48px; هذه ابعاد الايقونات اللتي استخدمتها غيرها الى مايناسبك

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

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);

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

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

.اسم العنصر{ background:url('رابط العنصر'); }

ولو واجهتك مشاكل في حفظ القالب اضف العنصر بالطريقة التالية

.اسم العنصر{ background:url('رابط الصورة'); }

نفس الشيء لو اردت الحذف

اسم العنصر يكون بحروف انجليزية طبعا

الان لم يبق الا كود html

<div class="spinning_icons">
    <a href="الرابط" class="twitter" title="twitter">Twitter</a>
    <a href="الرابط" class="delicious" title="delicious">Delicious</a>
    <a href="الرابط" class="digg" title="digg">Digg</a>
    <a href="الرابط" class="dribbble" title="dribbble">Dribbble</a>
    <a href="الرابط" class="email" title="email">Email</a>
    <a href="الرابط" class="facebook" title="facebook">Facebook</a>
    <a href="الرابط" class="flickr" title="flickr">Flickr</a>
    <a href="الرابط" class="foursquare" title="foursquare">Foursquare</a>
    <a href="الرابط" class="linkedin" title="linkedin">Linkedin</a>
    <a href="الرابط" class="rss" title="rss">RSS</a>
    <a href="الرابط" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="الرابط" class="youtube" title="youtube">YouTube</a>
</div>

وطبعا هذا الكود يتماشى مع كود css
الذي وضعته في الاول للاضافة الجاهزة

في حال اردت تخصيصه

الرابط" class="اسم العنصر المدرج في كود css" title="العنوان">المسمى الذي يظهر عند وضع الماوس على الايقونة

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

اضف تعليق .. اتبعك بتعليق -النسخة العربية

noreply@blogger.com (يوسف بجاد) — Mon, 6 Feb 2012 16:18:00 -0800

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

 U Comment .. I Follow

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

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

نريد ان نبدا هذة الخطة معا ولكن مع المدونات العربية .

1- ماذا تعنى U Comment .. I Follow ؟

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

- من الاخر ..  يعني إذا تركت تعليقا فى مدونتى سأترك تعليقا فى مدونتك وتضم الخطة

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

2 - كيف ساعرف ان هذة المدونة معنا فى الخطة ؟

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

3- الا توجد مشاكل فى هذة الخطة ؟

-  واحدة من الآثار السلبية هو أن إزالة العلامة نوفولو قد تؤدى لوجود مواقع السبام .احذر.

4 - لن اشترك حتى اتفادى السبام !

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

قم بتفعيل اشرافك على التعليقات ..

اعدادات > مشاركات وتعليقات > الاشراف على التعليقات

ثم اختر اى الطرق للاشراف على تعليقات المدونة .

5- هل انت غير متحمس ؟

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

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

6- هل هذة الخطة ناجحة ؟

- هذة الخطة ناجحة جدا. اغلب المدونات الاجنبية الاشهر اصحاب البيج رانك الاعلى انضموا لهذة

الخطة التى اثرت بشكل كبير فى زيادة زوار مدوناتهم .

7- ما فوائدها لمدونتى ؟ 

- الفائدة الاولى : بانضمام المدونات اصحاب البيج رانك العالى يعتبر ظهور رابط مدونتك فى صفحة 

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

- الفائدة الثانية : مع وجود عدد من المدونات النشطة لتظهر نتائج البحث فى جوجل بشكل كبير 

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

حيث ان بوجود علامة النوفلو يمنع جوجل من البحث عن الروابط فى مدونتك . 

8 - لا تكون سبام !
- ابعد عن الردود الغير لائقة والرديئة مثل ( شكررررا - مشكوررررر )
اذا حدث هذا لا تقم باتباع لرد لصاحب المدونة.وسيعتبر سبام .

9- كيف انضم U Comment .. I Follow ؟

- بازالة علامة النوفولو وهى اهم نقطة فى الموضوع  .

اولا . ازالة علامة النوفلو :

قالب > توسيع واجهة الاستخدام > قم بالبحث عن اول سطر

<dl id='comments-block'>

<b:loop values='data:post.comments'var='comment'>

<dt class='comment-author'expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" +data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

قم بتغير ما باللون الاحمر الى dofollow

وقم بحفظ القالب .

10 - الان اصبحت مدونتك جاهزة لتطبيق الخطة.

- قم باختيار البانر فى الاسفل لاضافته فى مدونتك

التخطيط > اضافة الاداة >

اضف البانر فى مكان ظاهر وننصح ان يكون فى احد عمود المدونة ليظهر للزائر .

وليعرف الزائر انك قمت بازالة رابط النوفلو .

صاحب الفكرة

ahmed Moly

قائمة عمودية انيقة فقط باستخدام اكواد !css3

noreply@blogger.com (يوسف بجاد) — Mon, 6 Feb 2012 09:20:00 -0800

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

يمكنك معاينة القائمة على مدونتي

اولا كود css

#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : right;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #AA3232;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

لتغيير لون تأثير الهوفر ابحث عن هذا الكود #AA3232

كما يمكنك التحكم في ابعاد القائمة حسب متطلبات موقعك

ثانيا كود html

<div id="top_navigation">
<ul class="nav">
<li><a href="الرابط"> الرئيسية </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط"> تعديل </a></li>
<li><a href="الرابط">تعديل </a></li></ul></div>

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

<li><a href="الرابط"> تعديل </a></li>

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

ملف تعريفك على طريقة الكبار بتقنيتي jquery+css

noreply@blogger.com (يوسف بجاد) — Fri, 3 Feb 2012 08:24:00 -0800

معنا اليوم اضافة ساحرة بتقنية الجيكويري وال css
وهي لوحة منزلقة لملف تعريف لكن على طريقة الكبار

للمعاينة

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

اولا كود html

<div class="panel">
    <h3>Sliding Panel</h3>
    <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
    <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

    <h3>A Little Something About Me</h3>
    <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
    <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div class="columns">
    <div class="colleft">
    <h3>Navigation</h3>
        <ul>
            <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
            <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
            <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
            <li><a href="http://spyrestudios.comcontact//" title="contact">Contact</a></li>
            <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
        </ul>
    </div>

    <div class="colright">
        <h3>Social Stuff</h3>
        <ul>
            <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
            <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
            <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
            <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
            <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
        </ul>
    </div>
</div>
<div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>

ولا تنسى تغيير مايجب تغييره

كود css

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAN2OC91FLfzxcA_KDmtGDZFJYWRtagE9dNh_oIlzAxFBSJYGJApRm0kOrc8Uhm2fPOlwVc9QlAspwvW8NKxYTsbdO6nboTWh_ADJZXj7A76UmeJJ4yxySBm3p_VeHX8qy9TIjbbdSebC8/d/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAN2OC91FLfzxcA_KDmtGDZFJYWRtagE9dNh_oIlzAxFBSJYGJApRm0kOrc8Uhm2fPOlwVc9QlAspwvW8NKxYTsbdO6nboTWh_ADJZXj7A76UmeJJ4yxySBm3p_VeHX8qy9TIjbbdSebC8/d/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdYCZgW45AvMdr137hHZiz6nxe_ZG9hDQRHXhl76oqmbaQDX7WVtVc1ot3L_y0NJhmhROJj1EihQ9uWpw4C3BVEdIAi-Tq7QwpcPzB0W_47KzmOOsm7wC25dOd269d9kW3vm1YYYWe8fD/d/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

واخيرا كود jquery

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

    //]]>

    </script>

المصدر

لقد تم طرح الاضافة من قبل على مدونة الفضاء التكنولوجي لكن صاحب الموضوع نقل اكواد html
بصيغة خاطئة

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

قائمة افقية مع التلاشي وتاثير الضباب بتقنية css3

noreply@blogger.com (يوسف بجاد) — Thu, 2 Feb 2012 12:05:00 -0800

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

وكما ذكرت في اخر تدوينة ساكسر المنهج السخيف القائم على مبدأ ابحث عن الكود head وأسفله تما ضع الكود...الخ

1-قم بزيارة مختبر بجاد لمعاينة الاضافة

من هنـــا

نبدا بسم الله

نبدأ اولا بالسهل عمل القائمة وتكون كما يلي

        <ul class="bmenu">
            <li><a href="#">اختر مايناسبك</a></li>
            <li><a href="#">اختر مايناسبك</a></li>
            <li><a href="#">اختر مايناسبك</a></li>
            <li><a href="#">اختر مايناسبك</a></li>
            <li><a href="#">اختر مايناسبك</a></li>
            <li><a href="#">اختر مايناسبك</a></li>
        </ul>

ولاضافة او حذف عنصر اضف او احذف

<li><a href="#">اختر مايناسبك</a></li>

تقريبا في كل امثلتنا سيكون لدينا نفس النمط لعناصر القائمة فقط عنصر الارتباط سيكون مختلفا(مايعني انه يمكن ان نخرج بنماذج كثيرة من هذا الدرس وانت شطارتك)

النمط المشترك للقائمة غير المرتبة هو كالتالي

    .bmenu{
        padding: 0px;
        margin: 0 0 10px 0;
        position: relative;
    }
    .bmenu li{
        font-size: 50px;
        display: block;
    }

الى الان هذه قائمة عادية

حسنا لنرى الان كيف يمكننا تخصيص الاضافة

بالنسبة لي اريد ان اظهر عناصر القائمة غير واضحة بعض الشيء قبل تمرير الماوس عليها كما ساقوم باضافة انتقالات لجميع الخصائص

تابع معي

    .bmenu li a{
        color: transparent;
        display: block;
        text-transform: uppercase;
        text-shadow: 0px 0px 5px #fff;
        letter-spacing: 1px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

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

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

الان نكمل

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

     bmenu:hover li a{
        text-shadow: 0px 0px 5px #0d1a3a;
    }
    .bmenu li a:hover{
        color: #fff;
        text-shadow: 0px 0px 1px #fff;
        padding-left: 10px;
    }

وهنا نكون قد انهينا وحصلنا على اضافة ساحرة

يمكنك تغيير الالوان حسب رغبتك

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

المدونة مفتوحة لاستفساراتكم

مصادري:مواقع غربية تهتم بتطوير الويب لذا فالموضوع ليس منقولا انما هي تقنية نتعلمها ثم نستثمر ماتعلمنا ونضيف ماامكننا ان نضيفه

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

تم بفضل الله

تغييرات جذرية في مدونة بجاد

noreply@blogger.com (يوسف بجاد) — Thu, 2 Feb 2012 07:23:00 -0800

لقد قمت اليوم بحذف 8 تصنيفات واكثر من 60 موضوع من مدونتي والسبب؟ 

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

اما احدهما فصاحبه غير معرف ولا ارد على من لا يعرف عن نفسه

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

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

لكني غضبت ولما زال مابي من غضب اعدت النظر في التدوين وطريقة التدوين اللتي جعلت امثاله يدونون اصلا  

ساقولها بكل صراحة لا توجد مدونات تقنية ولا هم يحزنزن انما هناك معالم تدوين غربية على رأسها   mybloggertricks 
 abu farhan blog
 allbloggertools
 way2blogging

والحميع يترجم دروسهم بمن في ذلك ذؤيب ابو اياد  وغيرها من المدونات 

ولعلكم لا حظتم مؤخرا كثرة المدونات المقلدة لهؤلاء بدءا من القالب نهاية  بالموضوع وصار الامر اشبه بموضوع واحد يتناقله الجميع خاصة مع نفاذ مالدى  الغرب من اضافات وتوقفت حتى مدونة ذؤيب وابو اياد عن العطاء فقد جفت الضرع 

وفيما سبق كنت احذو  حذو هؤلاء واكتب   وتنقل مواضيعي ولا اجد مبررا  للدفاع عنها لان الموضوع صار موجودا في جميع المدونات  وصار السبق لمن  يترجم اولا  

لذا فقد قررت وضع حد لهؤلاء  وللمبدأ السخيف القائم على  :ابحث عن الوسم head وبعده تماما ضع الكود التالي 

وكانه من برمج الاضافة      

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

وداعا للاضافات البالية

كيف تصنع شريط اد وات مع فقاعات التلميح المتحركة بتأثيرات css3

noreply@blogger.com (يوسف بجاد) — Wed, 1 Feb 2012 07:28:00 -0800

بسم الله السلام عليكم

ساقدم اضافة باحدى تقنيات css 3

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

اولا قم بمعاينة الاضافة من هنـــا

1-القائمة ستكون كما يلي

                                                 <ul class="tt-wrapper">
      <li><a class="tt-google plus" href="#"><span>قوقل بلس</span></a></li>
      <li><a class="tt-twitter" href="#"><span>تويتر</span></a></li>
      <li><a class="tt-youcef-bijed" href="#"><span>مدونة بجاد</span></a></li>
      <li><a class="tt-facebook" href="#"><span>فيس بوك</span></a></li>
      <li><a class="tt- rss" href="#"><span>خلاصات rss</span></a></li>
      <li><a class="tt-youtube" href="#"><span>يوتيوب</span></a></li>
</ul>

2-قائمة العناصر العائمة ستكون الى جهة اليسار وسيكون النمط كالتالي

.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-wyyqIZxavqXjVLqW5Mqu0eQUaMtD9mIbTrrLUC2kuB3yq2R6g8s46VEd8X8Q0NeisrNc3PWZKtU1yWcIRS2wFIis_5RCnfdGuQP5Nyr1cKmlKsGvtHGmU_0zbSM6c08Z9nNz3xEwks/s1600/_gunman_icons.png) no-repeat top left;
    position: relative;
}

3-كما يسكون لكل مرساة موقف مختلف عن خلفية صورة الخلفية

.tt-wrapper li .tt-google plus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-youcef-bijed{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-rss{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-youtube{
    background-position: -340px 0px;
}

4-الان نعمل على تاثير الظهور من أعلى

.tt-wrapper li a span{
    width: 100px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

5-الان نستخدم اسلوب العناصر الزائفة ونعمل ايضا على شفافية الحدود

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}

-6الان نقوم بابعاد العنصر المستعار عن طريق البكسل وسنجعله ابيض مثل حدود التلميحات تماما

.tt-wrapper li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

7-ناتي الى تاثير الهوفر وسنجعل الSPAN يمتد من اعلى ويتلاشى في :

.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 70px;
}

وبهذا نحصل على هذه الاضافة الرائعة انا في هذا النموذج جعلت الاضافة شريط للمفضلات الاجتماعية وليس بالضرورة تعمل مثلي تستطيع ان تغير الايقونات لتجعلها شريط ادوات او قائمة تبويب لاعلى الصفحة

وفي المرات القادمة ساطرح اشكال اخرى مميزة لهذه التقنية

ايقونات الايضافة بواسطة مدونة الريشة

لتحميل سورس الاضافة اضغط هنا

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

عرض مواضيعك باحترافية مع الايجاز باستخدام jquery+css

noreply@blogger.com (يوسف بجاد) — Tue, 31 Jan 2012 09:51:00 -0800

بسم الله السلام عليكم

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

نبدا بسم الله

قم بمعاينة الاضافة اولا من هنـــــا

(اضغط على تابع القراءة )

اولا كود الاستدعاء ويكون دائما بصيغة html

    <a href="#?w=500" rel="popup_name" class="poplight">تابع القراءة</a>

    <div id="popup_name" class="popup_block">

        <h2>اكتب عنوان الموضوع هنا</h2>

        <p>اكتب هنا نص الموضوع</p>

    </div>

ثانيا كود ضبط الانماط القياسية للاضافة وطبعا يكون بصيغة css

    #fade { /*--Transparent background layer--*/

        display: none; /*--hidden by default--*/

        background: #000;

        position: fixed; left: 0; top: 0;

        width: 100%; height: 100%;

        opacity: .80;

        z-index: 9999;

    }

    .popup_block{

        display: none; /*--hidden by default--*/

        background: #fff;

        padding: 20px;

        border: 20px solid #ddd;

        float: left;

        font-size: 1.2em;

        position: fixed;

        top: 50%; left: 50%;

        z-index: 99999;

        /*--CSS3 Box Shadows--*/

        -webkit-box-shadow: 0px 0px 20px #000;

        -moz-box-shadow: 0px 0px 20px #000;

        box-shadow: 0px 0px 20px #000;

        /*--CSS3 Rounded Corners--*/

        -webkit-border-radius: 10px;

        -moz-border-radius: 10px;

        border-radius: 10px;

    }

    img.btn_close {

        float: right;

        margin: -55px -55px 0 0;

    }

    /*--Making IE6 Understand Fixed Positioning--*/

    *html #fade {

        position: absolute;

    }

    *html .popup_block {

        position: absolute;

    }

وأخيرا كود التحكم في شكل الحركة واضفاء اللمسة الجمالية طبعا سيكون بلغة جي كويري الرائعة

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

    <script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function(){



        //When you click on a link with class of poplight and the href starts with a #

        $('a.poplight[href^=#]').click(function() {

            var popID = $(this).attr('rel'); //Get Popup Name

            var popURL = $(this).attr('href'); //Get Popup href to define size



            //Pull Query & Variables from href URL

            var query= popURL.split('?');

            var dim= query[1].split('&');

            var popWidth = dim[0].split('=')[1]; //Gets the first query string value

            //Fade in the Popup and add close button

            $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-krj4EClKvIrIcm_NdtTzRuj0narYFtJnoQKqv0MLKyf6YPIo7tx4owQgAdVIdC1RiSSFsmHLFzLhuWkf2oxakmR76UvkHJoD-ewfwZ_Kc08UMXH5UV6D6PKt0NkCEcp6L5rFp3zlaU/h80/111.png" class="btn_close" title="اغلاق النافدة" alt="اغلاق النافذة" /></a>');



            //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

            var popMargTop = ($('#' + popID).height() + 80) / 2;

            var popMargLeft = ($('#' + popID).width() + 80) / 2;



            //Apply Margin to Popup

            $('#' + popID).css({

                'margin-top' : -popMargTop,

                'margin-left' : -popMargLeft

            });



            //Fade in Background

            $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

            $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer



            return false;

        });





        //Close Popups and Fade Layer

        $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

              $('#fade , .popup_block').fadeOut(function() {

                $('#fade, a.close').remove();

        }); //fade them both out



            return false;

        });



    });

    //]]>

    </script>

ملاحضة :

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

المصدر

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

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

noreply@blogger.com (يوسف بجاد) — Tue, 31 Jan 2012 01:14:00 -0800

بسم الله السلام عليكم

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

السكريبت الاصلي لمحد خليل زاي مع تصرف بسيط

مثال:
أنا رابط متغير الألــــوان

كيفية التركيب 

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

ابحث عن </head>

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

<script type='text/javascript'>
//<![CDATA[
var rate = 18;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }
        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }
        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function ChangeColor()
{
    objActive.style.color = makeColor();
}

function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) {
            elmR = t1; elmB = t2; elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1; elmB = t2; elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1; elmR = t2; elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1; elmR = t2; elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1; elmG = t2; elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1; elmG = t2; elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }
    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;
    return '#' + elmR + elmG + elmB;
}
//]]>
</script>

يمكنك تغيير القيمة var rate = 18    وهي  اللتي تتحكم في سرعة تغيير الألوان

احفظ قالبك وقم بالمعاينة

الى هنا ينتهي الشرح     

تبديل عبارة [ رسالة أحدث ] [ رسالة أقدم ] بصورة

noreply@blogger.com (يوسف بجاد) — Sun, 29 Jan 2012 01:53:00 -0800

بسم الله السلام عليكم

فيما يلي كيفية استبدال عبارة رسائل احدث ورسائل اقدم بصور او أزرار

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

ثم نبحث عن <data:olderPageTitle/>

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

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDS3v3AlbSjw9wKmH_nksT_6fogkJcOqpc_RLZFXUEp4xaY1g-ehPtsxRbbfI-UyixER7i3_tr1wqYzGX-QCxnQ2PuPXGLQ0efWsNxGLp3tMP3fVMm_CkXr3s6psVgF-PyTcyNSjp84Pe/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

الأن نبحث عن

<data:newerPageTitle/>

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

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHF_X5-_uL54JElP9I83X4XDklGsxsL_v-LTHE02g881FRaNSlBdvxB_zwxgvJ9t9FSy35lprzob6Yxm8hTwTG3npJzDBOLCzpFarhH1GOC8bunrnFkCNlWOFMX2m_6TwWMd6bp3TAFEyx/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

الان نبحث عن

<data:homeMsg/>

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

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKpLkSZ_FWd6Dw2gbfIO5ZivwVwmSQTAY7vDvT3yWjhQXjJRAdZAd5KIEU-AAOHjDQKp51HjCWMtPhrT6NMXbQOXH49sLNYx8SuA1PLrFiOeb0Ipc_wu4IfaTdwkbuL6ay5JpLm07xA3it/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

ثم احفظ القالب ليكون الشكل النهائي هكذا:

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

انتهى

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

noreply@blogger.com (يوسف بجاد) — Fri, 27 Jan 2012 05:58:00 -0800

بسم الله السلام عليكم

اسم الكتاب : التدوين مع بلوجر
عن الكاتب : علاء الدين الجرادي
الدولة   : اليمن
البريد   : Aladdin.algaradi@gmail.com
المدونة :    www.aladdintech.blogspot.com
صورة الغلاف :

فهرس الكتاب :

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

رابط التحميل :

ميديا فاير

بالتوفيق

بنود سياسة الخصوصية الجديدة(privacy-policy) من قوقل

noreply@blogger.com (يوسف بجاد) — Fri, 27 Jan 2012 03:22:00 -0800

تسري سياسة الخصوصية هذه ابتداءً من 1 آذار (مارس) 2012، وستحل محل سياسة الخصوصية الحالية. الرجاء الاطلاع على صفحة النظرة العامة لمعرفة المزيد من التفاصيل.

تاريخ آخر تعديل: ١ مارس، ٢٠١٢ (عرض النسخ المؤرشفة)

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

المعلومات التي نجمعها وسبب جمعها،
كيفية استخدام تلك المعلومات،
الخيارات التي نقدمها، بما في ذلك إمكانية الوصول إلى المعلومات وتحديثها.

لقد حاولنا الاحتفاظ تبسيط سياسة الخصوصية قدر الإمكان، ولكن إذا كانت بعض المصطلحات غير مألوفة لديك مثل “ملفات تعريف الارتباط” و“عناوين IP” و“علامات بكسل” و“المتصفحات”، فعليك الاطلاع على هذه المصطلحات المهمة أولاً. تولي Google اهتمامًا كبيرًا لخصوصيتك، ومن ثم يرجى منك التعرف على سياساتنا بعناية سواء كنت مستخدمًا جديدًا أو قديمًا لـ Google، وإذا كانت لديك أسئلة فاتصل بنا.

المعلومات التي نجمعها

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

المعلومات التي تقدمها إلينا: تطلب منك العديد من خدماتنا الاشتراك في حساب Google. وعند إجراء ذلك، سنطلب منك تقديم معلومات شخصية، مثل اسمك أو عنوان بريدك الإلكتروني أو رقم الهاتف أو بطاقة الائتمان. إذا كنت تريد تحقيق أن تستفيد على أكمل وجه من ميزات المشاركة التي نقدمها، فقد نطلب منك أيضًا إنشاء ملف شخصي في Google يكون مرئيًا بشكل عام ويتضمن اسمك وصورتك.
المعلومات التي نحصل عليها من استخدامك خدماتنا: يجوز لنا جمع معلومات حول الخدمات التي تستخدمها وكيفية استخدامك لها، مثل أوقات زيارتك موقع الويب الذي يستخدم خدماتنا الإعلانية أو أوقات مشاهدتك وتفاعلك مع الإعلانات والمحتوى الخاص بنا. وتتضمن هذه المعلومات ما يلي:
- معلومات عن الجهاز
  يجوز لنا جمع معلومات عن جهاز معين (مثل طراز أجهزتك وإصدار نظام التشغيل ومعرِّفات الجهاز الفريدة ومعلومات عن شبكة الجوال بما في ذلك رقم الهاتف). يجوز لـ Google إقران معرِّفات جهازك أو رقم هاتفك بحسابك في Google.
- معلومات السجل
  عند استخدامك خدماتنا أو مشاهدتك المحتوى الذي توفره Google، يجوز لنا جمع معلومات محددة وتخزينها في سجلات الخادم تلقائيًا. وقد يتضمن ذلك ما يلي:
  - تفاصيل كيفية استخدامك لخدمتنا، مثل طلبات البحث،
  - معلومات السجل الهاتفي، مثل رقم الهاتف ورقم الطرف المتصل وأرقام إعادة التوجيه ووقت المكالمات وتاريخها ومدة المكالمات ومعلومات توجيه الرسائل القصيرة SMS وأنواع المكالمات،
  - عنوان بروتوكول الإنترنت،
  - معلومات حول أحداث الجهاز مثل الأعطال ونشاط النظام وإعدادات الأجهزة ونوع المتصفح ولغته وتاريخ الطلب ووقته وعنوان URL للإحالة،
  - ملفات تعريف الارتباط التي قد تحدد متصفحك أو حسابك في Google بشكل فريد،
- معلومات الموقع
  عند استخدامك خدمة في Google مع تمكين اكتشاف الموقع، يجوز لنا جمع ومعالجة معلومات عن موقعك الفعلي، مثل إشارات GPS التي يتم إرسالها بواسطة جهاز جوال. كما يجوز لنا استخدام تقنيات عدة لتحديد الموقع، مثل بيانات المستشعر من جهازك والذي قد يحتوي مثلاً على معلومات حول نقاط دخول Wi-Fi القريبة والأبراج الخلوية.
- أرقام التطبيقات الفريدة
  تتضمن بعض الخدمات المعينة رقم تطبيق فريدًا. قد يتم إرسال هذا الرقم بالإضافة إلى معلومات عن عملية التثبيت التي أجريتها (مثل نوع نظام التشغيل ورقم إصدار التطبيق) إلى Google عند تثبيت هذه الخدمة أو إزالتها أو عند اتصال هذه الخدمة دوريًا بخوادمنا للحصول على تحديثات تلقائية مثلا.
- التخزين المحلي
  يجوز لنا جمع معلومات (بما في ذلك المعلومات الشخصية) وتخزينها بشكل محلي على جهازك باستخدام آليات مثل تخزين معلومات الويب في المتصفح (بما في ذلك HTML 5) وذاكرة التخزين المؤقت لبيانات التطبيق.
- ملفات تعريف الارتباط والمعرفات المجهولة
  نستخدم تقنيات عدة لجمع المعلومات وتخزينها عند زيارتك لإحدى خدمات Google، وقد يتضمن ذلك إرسال ملف تعريف ارتباط واحدًا أو أكثر أو إرسال معرفات مجهولة إلى جهازك. ونستخدم أيضًا ملفات تعريف الارتباط والمعرفات المجهولة عند التفاعل مع الخدمات التي نقدمها إلى شركائنا، مثل الخدمات الإعلانية أو ميزات Google التي قد تظهر على المواقع الأخرى.

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

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

الشفافية والاختيار

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

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

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

المعلومات التي تشاركها

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

الدخول إلى المعلومات الشخصية وتحديثها

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

المعلومات التي نفصح عنها

لا نفصح عن المعلومات الشخصية للشركات والمؤسسات والأفراد خارج Google إلا في إحدى الحالات التالية:

بموافقة منك
سيتم الإفصاح عن معلوماتك الشخصية للشركات أو المؤسسات أو الأفراد خارج Google إذا كنت توافق على ذلك. ونحتاج إلى موافقتك على الإفصاح عن أية معلومات شخصية حساسة.
مع مشرفي النطاق
إذا كانت تتم إدارة حسابك في Google بواسطة مشرف نطاق (على سبيل المثال، لمستخدمي Google Apps) فستكون لدى مشرف النطاق والموردين الذين يقدمون دعم المستخدم لمؤسستك إمكانية الدخول إلى معلومات حسابك في Google (بما في ذلك بريدك الإلكتروني والبيانات الأخرى). قد يتمكن مشرف النطاق مما يلي:
- عرض الإحصاءات المتعلقة بحسابك، مثل الإحصاءات المتعلقة بالتطبيقات التي تثبتها،
- تغيير كلمة مرور حسابك،
- تعليق إمكانية الدخول إلى حسابك أو إنهائها،
- الدخول إلى المعلومات المخزنة كجزء من حسابك أو الاحتفاظ بها،
- تلقي معلومات حسابك التزامًا بقانون معمول به أو لائحة أو إجراء قانوني أو طلب حكومي واجب النفاذ،
- تقييد إمكانية حذف أو تعديل المعلومات أو إعدادات الخصوصية،
للمزيد من المعلومات، يرجى الاطلاع على سياسة خصوصية مشرف النطاق.
للمعالجة الخارجية
نقدم المعلومات الشخصية للشركات التابعة لنا أو غيرها من المؤسسات أو الأشخاص الموثوق بهم ليعالجوها لحسابنا، بناءً على إرشاداتنا وبما يتفق مع سياسة الخصوصية وأية إجراءات سرية مناسبة أخرى.
لأسباب قانونية
سيتم مشاركة المعلومات الشخصية مع الشركات أو المؤسسات أو الأفراد خارج Google إذا كنا نعتقد بنية حسنة أنه من الضروري الدخول إلى المعلومات أو استخدامها أو الاحتفاظ بها أو نشرها لأي من الأسباب التالية:
- الالتزام بأي قانون سارٍ أو لائحة أو إجراء قانوني أو طلب حكومي واجب النفاذ،
- تطبيق بنود الخدمة السارية، بما في ذلك البحث في احتمال صدور انتهاكات،
- اكتشاف احتيال أو مشكلات فنية أو مشكلات أمان أو الحيلولة دون وقوعها أو غير ذلك من إجراءات التعامل معها،
- الحماية من إلحاق ضرر بحقوق أو ملكيات أو سلامة Google أو مستخدميها أو طبقًا لما يقتضيه أو يسمح به القانون،

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

أمن المعلومات

نعمل جاهدين على حماية Google والمستخدمين من الدخول غير المصرح به أو التعديل غير المصرح به أو الإفشاء أو الإتلاف للمعلومات الموجودة في حوزتنا. ويشمل ذلك على وجه الخصوص:

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

التطبيق

تسري سياسة الخصوصية على جميع الخدمات المقدمة بواسطة شركة Google Inc.‎ والشركات التابعة لها، بما في ذلك الخدمات المقدمة على مواقع ويب أخرى (مثل خدماتنا الإعلانية)، باستثناء الخدمات التي تخضع لسياسات خصوصية مستقلة لا تتضمن سياسة الخصوصية هذه.
لا تسري سياسة الخصوصية المتبعة لدينا على الخدمات المقدمة بواسطة شركات أخرى أو أفراد آخرين، بما في ذلك المنتجات أو مواقع الويب التي قد تظهر لك في نتائج البحث أو مواقع الويب التي قد تتضمن خدمات Google أو غيرها من مواقع الويب التي تحتوي خدماتنا على رابط إليها. لا تتضمن سياسة الخصوصية المتبعة لدينا إجراءات المعلومات في الشركات والمؤسسات الأخرى التي تعلن عن خدماتنا والتي قد تستخدم ملفات تعريف ارتباط وعلامات بكسل وغير ذلك من التقنيات في تقديم الإعلانات ذات الصلة وعرضها.

التنفيذ

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

التغييرات

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

السياسات الخاصة بالمنتجات

توضح الإشعارات التالية السياسات الخاصة بالمنتجات فيما يتعلق بمنتجات وخدمات معينة في Google قد تكون تستخدمها:

كيفية عمل فهرسة (sitmap) لمدونة بلوجر

noreply@blogger.com (يوسف بجاد) — Mon, 23 Jan 2012 06:31:00 -0800

بسم الله السلام عليكم

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

وهذه صورة للمعاينة

او اضغط هنــا للمعاينة المباشرة

قبل ان ابدأ الشرح اذكر بكيفة حفظ السكريبتات على google code وكنت قد شرحت الطريقة سابقا هنــا وهذا حتى لا تفقد السكريبت ويضل مرفوعا على برابط مباشر

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

ثم انتقل الى وضع تحرير html

واطبع الكود التالي كما في الصورة السابقة

<script src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js">
</script>
<script src="http://youcef-bijed.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">
</script>

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

انتهى

Image:
or URL: