إضافة صنوق الإشتراك مع أداة التواصل الإجتماعي 2014

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

أهلا بكم من جديد في درس رائع سأقدم لكم من خلاله إضافة للبلوجر هذه الإضافة يمكن أن نقول عنها إضافتان في واحدة وهي صنوق الإشتراك في المدونة مدمج مع أدوات التواصل الإجتماعي إضافة رائعة جدا طورتها وعربتها شخصيا هذه الإضافة ستساعدكم في جلب المشتركين للمدونة وأيضا متابعين عبر مواقع التواصل الإجتماعي .
كما يمكنكم إستعمال إضافة أخرى رائعة مشابهة عبر الدرس التالي :
[بلوجر] إضافة روعة تحت الهيدر ( اشترك معنا - تابعنا ) 2014

مثال مباشر:

اشترك معنا وتوصل بأخر الأخبار والتحديثات !!

طريقة إضافتها :

1- إذهب إلى لوحة التحكم .

2- إذهب إلى التخطيط .

3- إضافة javascript/HTML .

4-  أضف الكود التالي .

الكود :

<style type="text/css">#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZUMJnWn7RimG1jwuOs-MdGHdpfZxO8RCNODqai2XOu800zrpOZdASna9nRcrxZFFhRf84QkmL1DgiyV7wfTlUnXD2-c-JtEqyaSSd5ip3CWrin7i1HUw8SvcBQRYx-v_HyFGz6PA2x9c/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSbLUbSip53QiAjTe1gEadINp577HvVtC_pi0DfBpYC8CyEK0Xfab3XfAjHyIlX1XkuN2Ruib7y5_-4UGRxbYes1znY2Uzn7rThrIIVd4eWa7-Stx5pw8X4HzQD_3uPE3rvI4CjhG2boN/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaeS8x818JBmnGVXDsgK8F_1ofCsZEahT1jcmvWFrcVQZqIX1AvvJUi8C-cZKvUlOYNRicBpiTEzOlFia0jZUbaITEhnR-EvGpCkX2USY_J9X-cdVyfqS5H35a2TANRFfCFbyHhbZj_4s/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%;font-family: droidkufi-bold, tahoma;
font-size: 12px;}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:droidkufi-bold, tahoma;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzeDmYw3-GM422_maQhT0M1g_XgS75ljZxGfNqys9mMFrfOp2dGvKcLO2opCToaeDC_eA2HyKBNoNpp7HTn-tIiFwU-zRVFrHpsGigojlwTpdnvPgSb7i6QTLHs7c96sfdLdKHbKM1I6yS/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:droidkufi-bold, tahoma;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>اشترك معنا وتوصل بأخر الأخبار والتحديثات !!</p><center>
<table>
<tbody><tr><td><a href="http://youtube.com/user/blogproayoub" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4w3Cy-bUqiziW1V3MtUulxXlyb5N9U4X519LIQkAmAr0kwZR36urJ9xgM4sl5RWB84WITCVtdXy0si71fAXNjJmURNoE9-05DnLZTryn4vXYgx-MriQAMpaqoqkbh30aD-3tY2WsZOg/s1600/youtube.png"></a></td>
<td>
<a href="http://www.facebook.com/blogproayoub" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7MKUVzmrhOzQ_jExsU2pX3ArCcoLCk3hoOs8uZCgw6iK9QsSU89kK-Juz7qRFhkDrnsVsy96kYuMpYgA_R87ufe8mLfXkZMTpWYzfvNJyko20ejQwsVeVWsCn3626hh8uidQciUOJ9Mo/s1600/facebook.png"></a>
</td>
<td>
<a href="http://twitter.com/blogproayoub" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGvBWTsvTKh2VrvQ4dmSd11Z8L-KjeVw_qOsDmhFdbxKaiGCBVDo51IMnIAsPBhpDY8ETcImBqmkppsIB_N7emCJZyB8KV87yRizEFupsrCLTrG0nxAyx5BbGKA1xp-P3LvFrQ501Hz4/s1600/twitter.png"></a>
</td>
<td>
<a href="http://plus.google.com/+ayoubboulaich" class="linkopacity" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0O-ysxH56TvIy7RqV44Q6ds2fd2mtgPcGZjNEWZ2ZLCKuYJUcUY4a501V7JK6-nG21ExcCah6SofRVDxTJPfcq22k11Hn6amEQ9rf4_yCQ8I68DEUmsTkBHryRS5SdFX3veRAG4E3Jdo/s1600/google+.png"></a>
</td>
</tr></tbody></table>
</center><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=blogproayoub" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingbolt', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggingbolt"><input name="loc" type="hidden" value="en_US"><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="ضع إيميلك هنا ^_^"><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="قم بالتسجيل الأن !"></form></div></div></div>

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

Unknown

12:25 م

اقرأ المزيد

[بلوجر] أفضل إضافة تحت الهيدر للبلوجر 2014

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

مثال مباشر من هنا

طريقة الإضافة :

● إذهب للقالب ثم تحرير HTML .

● أبحث عن الكود التالي :

]]></b:skin>

● أضف فوقه الكود التالي :

.container5 {
width: 970px;
height: 178px;
background-color: #333;
padding: 10px;
margin: 0 auto;
margin-top: 12px;
margin-bottom: -8px;
}
.post111 {
opacity: 1;
animation: load1 2s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
background-image: url(http://im88.gulfup.com/snE0LI.jpg);
-webkit-animation: load1 7s;
-moz-animation: load1 7s;
-o-animation: load1 7s;
transition: all 400ms ease-in-out 0s;
}
.post111:hover {
opacity: 0.7;
}
.post111title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post111title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post222 {
opacity: 1;
animation: load1 3s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/9bBnBH.png);
-webkit-animation: load1 6s;
-moz-animation: load1 6s;
-o-animation: load1 6s;
transition: all 400ms ease-in-out 0s;
}
.post222:hover {
opacity: 0.7;
}
.post222title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post222title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post333 {
opacity: 1;
animation: load1 4s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/bQpgrs.png);
-webkit-animation: load1 5s;
-moz-animation: load1 5s;
-o-animation: load1 5s;
transition: all 400ms ease-in-out 0s;
}
.post333:hover {
opacity: 0.7;
}
.post333title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
border-radius: 5px;
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post333title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post444 {
opacity: 1;
animation: load1 5s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/vqohFc.png);
-webkit-animation: load1 4s;
-moz-animation: load1 4s;
-o-animation: load1 4s;
transition: all 400ms ease-in-out 0s;
}
.post444:hover {
opacity: 0.7;
}
.post444title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post444title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post555 {
opacity: 1;
animation: load1 6s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/VcCrKD.png);
-webkit-animation: load1 3s;
-moz-animation: load1 3s;
-o-animation: load1 3s;
transition: all 400ms ease-in-out 0s;
}
.post555:hover {
opacity: 0.7;
}
.post555title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post555title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.title5 {
animation: load1 7s;
opacity: 1;
float: left;
width: 45px;
height: 180px;
background-color: #5FCECE;
border-radius: 5px;
margin-left: 5px;
transition: 1s;
-webkit-animation: load1 2s;
-moz-animation: load1 2s;
-o-animation: load1 2s;
}
.title5 a{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #fff;
position: relative;
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
font-size: 30px;
left: 25px;
}

● الأن ابحث عن الكود التالي :

<div class='main-outer'>

● أضف فوقه الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container5'>
<div class='post111'>
<div class='post111title'><a href='http://www.proayoub.com/search/label/programation' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس البرمجة'>دروس البرمجة</p></a>
</div>
</div>
<div class='post222'>
<div class='post222title'><a href='http://www.proayoub.com/search/label/seo' style='text-decoration:none;color:#fff;'>
<p style='font-size:17px;margin-top:auto;padding:5px;' title='دروس السيو'>دروس السيو</p></a>
</div>
</div>
<div class='post333'>
<div class='post333title'><a href='http://www.proayoub.com/search/label/photoshop' style='text-decoration:none;color:#fff;'>
<p style='font-size:16px;margin-top:auto;padding:5px;' title='دروس الفوتوشوب'>دروس الفوتوشوب</p></a>
</div>
</div>
<div class='post444'>
<div class='post444title'><a href='http://www.proayoub.com' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس مصورة'>دروس مصورة</p></a>
</div>
</div>
<div class='post555'>
<div class='post555title'><a href='http://www.proayoub.com/search/label/blogger' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس البلوجر'>دروس البلوجر</p></a>
</div>
</div>
<div class='title5'><h3 style='-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);color:#fff;position:relative;top:80px;-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);' title='اضغط للمزيد'><a href='http://www.proayoub.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA' style='color:#fff;'>حصريات</a></h3></div>
</div>
  </b:if>

● الأن ما عليك سوى تغيير الروابط بروابطك ويمكنك تغيير الصور إلى صور أخرى عبر كود css الأول .

أتمنى أن تعجبكم الإضافة لا تبخلوا علينا بكلمة شكر وإعجاب ومشاركة

Unknown

12:21 م

اقرأ المزيد

سامسونغ تخسر قضيتها امام آبل و تدفع 120 مليون دولار كغرامة

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

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

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

و للتذكير فإنه و حسب موقع (The Verge) المتخصص فإن جوجل مستعدة لتحمل جانبها من التعويضات في حالة حكمت المحكمة بتغرييم سامسونغ لصالح آبل في هذه القضية.

Unknown

5:40 ص

اقرأ المزيد

كيف تصلح ملفاتك المعطوبة أو التالفة في نظام ويندوز؟

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

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

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

أنواع الملفات التي يمكن إصلاح بهذا البرنامج هي كالتالي :

ملفات الوورد (.doc, .docx, .docm, .rtf)
جداول البيانات إكسل (.xls, .xla, .xlsx)
الملفات المضغوطة (.zip, .rar)
مقاطع الفيديو  (.avi, .mp4, .mov, .flv, .wmv, .asf, .mpg)
الصور (.jpg, .jpeg, .gif, .tiff, .bmp, .png)
ملفات PDF
ملفات قاعدة البيانات (. MDB. MDE. ACCDB،. ACCDE)
العروض التقديمية(.ppt, .pps, .pptx)
الصوت (.mp3, .wav)

عملية تسطيب البرنامج لا تحتاج شرح ، فقط انتبه ألا تقول بتثبيت البرامج الإضافية أثناء عملية التثبيت !

كذلك عملية استخدام البرنامج سهلة جدا ، بعد تتبيث البرنامج وفي الواجهة الرئيسية تقوم باختيار الملف المراد إصلاحه من خلال النقر على زر1 الموضح في الصورة ثم من خلال change يمكن تعيين مكان حفظ الملف. وبعد ذلك تقوم بالنقر على زر  Start Repair.

البرنامج يدعم ويندوز 7 وكذلك 8 للتحميل من هنا

Unknown

5:05 ص

اقرأ المزيد