Ayana tech | ايانا تيك

انشاء صفحة اعادة توجيه الروابط + عداد تنازلي

2016-01-13T03:20:00.000-08:00

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

اعزائنا المتابعين

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

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

معاينه

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

ثم الى الصفحات

ثم قم بإنشاء صفحه جديده وقم بإضافه الكود التالي في تبويب

Html

بعد حذف ما بداخله

<meta http-equiv="Refresh" content="5; URL=http://ayanatech.blogspot.com">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="timer" style="color:#000;display: block;background-color: #d9edee; margin: 0 auto; padding: 10px; text-align: center; width: 200px;">
جاري تحويلك بعد 5 توان ....</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
 var count=5;
 var counter=setInterval(timer, 1000);
 var timerDiv = document.getElementById('timer');
 var link = document.getElementById('link');
 function timer()
 {
  count=count-1;
  if (count <= 0)
  {
   clearInterval(counter);
  
   link.style.display = '';
   timerDiv.innerHTML="";
  
   return;
  }
  timerDiv.innerHTML=count + " ث";
 }
}
</script>

قم بتغيير الرابط المحدد بالرابط الذي تريد التوجيه اليه
ثم ستجد رقم 5 محدد 3 مرات قم بتغييرهم لعدد الثوان المراد انتظارها

الان قم بتغيير خيارات القالب من القائمه الجانبيه
الي هذه الخيارات

الان قم بنشر الصفحه واحصل على الرابط الخاص بها

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

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

شكرا لكم للمتابعه

كيفيه استخدام الجداول وتخصيصها داخل الموضوع

2016-01-08T03:46:00.003-08:00

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

اليوم اقدم لكم افضل طريقه يمكنك من خلالها انشاء الجداول

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

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

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

اولا التعديل على الجدول من الموقع الاول

بعد انشاء الجدول ستحصل على كود مثل هذا

<style type="text/css">
.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}
</style>

<table class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>Row:1 Cell:1</td><td>Row:1 Cell:2</td><td>Row:1 Cell:3</td><td>Row:1 Cell:4</td><td>Row:1 Cell:5</td></tr>
<tr><td>Row:2 Cell:1</td><td>Row:2 Cell:2</td><td>Row:2 Cell:3</td><td>Row:2 Cell:4</td><td>Row:2 Cell:5</td></tr>
<tr><td>Row:3 Cell:1</td><td>Row:3 Cell:2</td><td>Row:3 Cell:3</td><td>Row:3 Cell:4</td><td>Row:3 Cell:5</td></tr>
<tr><td>Row:4 Cell:1</td><td>Row:4 Cell:2</td><td>Row:4 Cell:3</td><td>Row:4 Cell:4</td><td>Row:4 Cell:5</td></tr>
<tr><td>Row:5 Cell:1</td><td>Row:5 Cell:2</td><td>Row:5 Cell:3</td><td>Row:5 Cell:4</td><td>Row:5 Cell:5</td></tr>
<tr><td>Row:6 Cell:1</td><td>Row:6 Cell:2</td><td>Row:6 Cell:3</td><td>Row:6 Cell:4</td><td>Row:6 Cell:5</td></tr>
</table>

<p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p>

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

اولا الكود العلوي هناك اكواد محدده
الاكواد التي تكون بهذا الشكل
Header 1

الى Header 5

تعبر عن

والاكواد التي تكون بهذا الشكل
Row:1 Cell:1

الى Row:6 Cell:5

تعبر عن

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

ثم وضع الكود اين ما تريد في الموضوع بعد التغير الى html بدل تأليف

اما بخصوص الموقع الثاني

ستحصل على كودين

Html , Css

كود ال Css

يتم وضعه اعلى الكود التالي بعد البحث عنه داخل القالب

]]></b:skin>

اما كود Html

فستحصل على الكود بهذا الشكل

<div class="CSSTableGenerator" >
                <table >
                    <tr>
                        <td>
                            Title 1
                        </td>
                        <td >
                            Title 2
                        </td>
                        <td>
                            Title 3
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                    </tr>
                </table>
            </div>

الكود به عده اكواد محدده

اولا ستجد 3 اكواد بهذا الشكل

Title1

Title2

Title3

فهم يعبران عن عناوين الاعمده

وستجد اكواد علي شكل

Row 1

مكرره ثلاث مرات

وهي تعبر عن السطر الاول

Row 2

تعبر عن السطر الثاني

وعلى نفس النهج

شكرا لك من تابعنا

انتهى موضوع اليوم

سناب شات : @mohamed_ayana

فيديو | طريقة جعل القالب متوافق مع جميع الشاشات

2015-12-12T11:41:00.001-08:00

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

ملحوظة : الفيديو اسفل الموضوع

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

توافق القالب مع جميع الشاشات Responsive Web Design

الان نبدأ الشرح

المهم

هذا الكود المسؤل عن توافق القالب اضفه في اكواد Css وتابع معي

/* CSS Global Responsive */
@media screen and (max-width:960px) {
}
@media only screen and (max-width:768px){
}
@media (min-width:768px) and (max-width:979px) {
}
@media (max-width:767px) {
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:640px){
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:480px){
}
@media screen and (max-width:320px){
}

الان يجب التعديل علي الكود

مثلا نقوم بإحضار الجزء الاول من الكود

@media screen and (max-width:960px) {
}

الان هذا الكود يعني الشاشه من 768 حتي مقاس 960

نقوم بإضافه الاكواد بداخله مثلا القالب الاساسي والعادي يتكون من

قائمه علويه

ثم الهيدر

ثم القائمه الثانيه

تم مكان المشاركات

ثم القائمه الجانبيه

ثم الفوتر

نقوم بإحضار معرف كل عنصر من العناصر

القائمه العلويه menu-top

الهيدر header

القائمه الثانيه menu-2

مكان المشاركات main

القائمه الجانبيه sidebar

الفوتر footer

ملحوظه : المعرفات تختلف من قالب الي اخر

طريقه احضار المعرف

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

ثم تقوم بإختيار فحص العنصر او Inspect element

تم تجد نافذه ظهرت تجد بها المعرف كما هو موضح

اقوم الان بالتعديل كما قلت الجزء الاول من الكود يعني مقاس الشاشه 768 حتي مقاس 960

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

اجعلها بعرض 100% حتي تكون بعرض الشاشه بالكامل

الهيدر ايضا اجعلها بعرض 100%

والقائمه الثانيه ايضا

اما المشاركات فلا تجعلها 100% بل قم بتصغير عرضها قليلا وكذلك مع القائمه الجانبيه

حتي احصل علي كود كل من العناصر مثلا

#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}

ثم تضيفها الي الجزء الاول من الكود ليصبح بهذا الشكل

@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}

نقوم بتكرار العمليه حتي نصل الي الجزء الثامن

نقوم بإخفاء القائمه الجانبيه ثم نجعل مكان المشاركات بعرض 100%

مثلا

#main { width:100%;}
#sidebar { display:none;}

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

@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}

الان بعد ان قمت بالتعديل علي كل الاجزاء سيصبح الكود هكذاد

/* CSS Global Responsive */

@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:768px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (min-width:768px) and (max-width:979px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (max-width:767px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}

الان انتهي الشرح
سناب شات : @mohamed_ayana

تجربة لعبة Asphalt 8 على الايفون 6s

2015-12-10T10:44:00.001-08:00

السلام عليكم

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

تجربة اللعبة الرائعة Asphalt 8 على جهاز ايفون 6s

اترككم مع الفيديو

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

اضافة آداة في التخطيط بعرض القالب في المكان الذي تريد

2015-12-10T09:22:00.001-08:00

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

كل شخص يريد ان يضيف اداه بعرض المدونه لإستخدامها في عده امور

مثل اضافه اعلان او اداه معينه في مكان معين يريده هو

هذا هو الكود الخاص بالاضافه

<div style='clear: both;'/>
<b:section class='ayanawid' id='ayanawid' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>

كلمة ayanawid المتواجدة داخل الكود والمكررة مرتين

هو المعرف الخاص بالاداه

لذا اذا اردت ان تقوم بأضافه اداه اخرى قم بتغيير المعرف

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

داخل الاداه بحد زاتها

مثل هذه انا قمت بإضافه اداتين داخلها

فالرقم يعبر عن اقصى جد لإضافه الادوات داخلها

أين يضاف الكود ؟؟

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

لو اضفته بعد الوسم <body>

هذا يعني انها ستكون في اعلى القالب

لو اضفتها قبل الوسم </body>

هذا يعني انها ستكون في اسفل القالب

مثلا منطقة المواضيع كثير من المصممين يعطي لها معرف

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

مثلا منطقة الفوتر ايضاً يعطيى لها غالباً

لو اضفته فوق الكود ستكون الآداة فوق الفوتر

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

وجرب فوق كل كود تجده بشكل كالأشكال السابقه مهما اختلف الإسم الذي بعد الـ id او ان كان حتى مكتوب class وليس id

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

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

]]></b:skin>

#ayanawid {width:100%; display:block; margin:10px 5px;}
#ayanawid h2 {display:none;}

شكرا لكم

تم نقل معظم الموضوع للإفادة

حساباتنا على تطبيقات التواصل (سناب شات و تيلجرام وبيرسكوب و يو ناو)

2015-12-08T11:45:00.000-08:00

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

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

اليوم اقدم لكم حساباتنا علي تطبيقات التواصل الاجتماعي

سنقوم بإذن الله بعمل بث مباشر دائما معكم

وطرح افكار ونناقشها على سناب شات

يمكنكم الان اضافتنا على هذه التطبيقات .

سناب شات : @mohamed_ayana

بيرسكوب : @ayana_tech

تيلجرام : /ayanatech

يو ناو : /mohamed_abouayana

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

يمكنك تحميلها ستستفيد منها

snapchat

periscope

YouNow

تابع الفيديو لتعرف اكثر

مسابقة قالب البداية نت

2015-12-06T08:46:00.002-08:00

اهلا بكم زوارنا الكرام

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

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

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

وكل التفاصيل من هنا

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

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

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

2015-12-05T02:15:00.001-08:00

بسم الله الرحمن الرحيم

بناء على طلب بعض الاخوه الكرام

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

قررت اليوم ان اقدم لكم المحرر جاهز للإستخدام

معاينة محرر الاكواد

اولا قم بالذهاب الى المدونة

ثم صفحات

ثم تقوم بإنشاء صفحة جديدة

تقوم بتحويل التبويب العلوي من "تأليف"

الى "Html"

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

واضف الكود التالي

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<button class="ayanabutton" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()" style="float: left; padding: 9px;">معاينه الكود</button> <button class="ayanabutton" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()" style="float: left; padding: 9px;">اِفراغ المحتوي</button><br />
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="wrapper" style="margin: auto;">
<table 0="0" border="0" cellpadding="0" style="width: 1000px;"><tbody>
<tr>     <td><table style="padding: 2px; width: 900px;"><tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="background: none repeat scroll 0% 0% rgba(3, 3, 3, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0px 2px 16px #000 inset; color: #555555; direction: ltr !important; float: left; font-family: arial; font-size: 17px; font-weight: bold; height: 600px; margin-left: 6px; margin-top: -34px!important; margin: 0px; padding: 5px; text-align: right; width: 250px;"> أضف هنا الكود المراد مشاهدته او التعديل عليه
</textarea></form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4), 0px 2px 16px #000 inset; color: #555555; direction: ltr !important; float: left; height: 598px; margin-top: -15px; padding: 5px; text-align: left; width: 715px;"></iframe></td></tr>
</tbody></table>
<br /></td></tr>
</tbody></table>
</div>
</div>
</div>

الان قم بالضغط على حفظ

انتهى موضوع اليوم

شكرا لمتابعتكم

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

2015-12-03T11:49:00.004-08:00

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

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

لقد كانت الخدمه الافضل في استضافه ملفات برمجيه مثل css و html و js

وغيرها...

ولكن قد يتساءل البعض ؟ لماذا جوجل قامت بغلق هذه الخدمه والتي قد تجني

زوار ومستخدمين كثر وان جوجل في الاول والاخير تريد مصلحتها؟

لا تفعل جوجل مثل هذه الامور إلا لوضع بديل

والبديل هو Github

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

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

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

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

وبدوره يقوم بإستدعاء الكود

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

ويبعد عنك عناء تبعثر القالب من الداخل من كثره الاكواد

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

شاهد الفيديو

رابط الموقع :
https://github.com/

رابط موقع rawgit تحويل الرابط الي رابط مباشر :
https://rawgit.com/

للمبتدئين : كيف تضيف الرابط داخل القالب وتستخدمه؟

كل ماعليك فعله هو تغيير الرابط الموجود في الكود هذا الى رابط الاستضافه المباشر

اذا كان الكود جافا سكريبت js

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

واذا كان الكود سي اس اس css

ضع الرابط في الكود الثاني

<script src='هنا رابط استضافه جافا سكريبت' type='text/javascript'/>

<link href='رابط استضافه سي اس اس' rel='stylesheet'/>

انتهى موضوع اليوم والسلام عليكم

عودة للإرتقاء الى الافضل + الرد على تعليقاتكم

2015-12-03T05:29:00.000-08:00

بسم الله الرحمن الرحيم

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

استعداد تام للرد على اسألتكم والانطلاق مره اخرى والنهوض

حتي نعود الى المنافسة.

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

واليوم مستعد للرد على من يريد ان يطرح سؤال او فكرة

ونتمنى منكم مساعدتنا للارتقاء والعودة للمنافسة

واعتذر عن اي تقصير في الاونه الاخيرة :)

شكرا لكم

الفائزين في المسابقه الرمضانيه || Ayana tech

2015-06-29T09:31:00.000-07:00

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

جاء اليوم للإعلان عن نهايه المسابقه الرمضانيه

وكانت جوائزها كالتالي

جوائز المسابقه

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

وقد تم ارسال رسائل الي الفائزين

لذا قم بتفحص بريدك الالكتروني فقد تجد نفسك الفائز

وعلي الفائز وضع تعليق بأنه توصل بالرساله

مسابقه وجوائز قيمه بمناسبه شهر رمضان | إشترك الان

2015-06-19T09:36:00.001-07:00

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

بمناسبه شهر رمضان الكريم

تتقدم مدونه Ayana tech بالمسابقه الرمضانيه

جوائز المسابقه

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

الاشتراك بالمسابقه

الانضمام لاعضاء المدونه من هنا
اترك تعليق به بريدك الالكتروني
سيتم السحب وفوز 3 مشتركين والعدد قابل للزياده

بعد قرائتك للجوائز وخطواط الاشتراك

ماذا تنتظر اشترك الان

قالب Ayana tech الاصدار الثامن ( الحالي ) | رمضان كريم

2015-06-18T05:02:00.001-07:00

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

بعد طلب القالب الحالي كثيرا قررت ان

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

قبل البدء نتعرف علي مميزات القالب

ـــــــــــــــــــــــ

مميزات القالب:

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

تحميل القالب :

تحميل القالب

ــــــــــــــــــــــــــــــــــــــــــــ

لتحميل القالب اتبع الشروط

1- انضم الي المدونه من هنا

2- اترك تعليقا به بريدك الالكتروني ليتم ارسال القالب لك

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

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

ورمضان كريم علينا وعليكم

اللهم تقبل منا صيامنا وقيامنا

وكل عام وانتم بخير

تغيير الوان أداه إنضم لأعضاء المدونه + حل المشاكل

2015-06-04T10:25:00.000-07:00

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

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

موقعك للمتابعين ولكن كثير من المستخدمين يتمني تعديل

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

ولكن اليوم لدينا حل لجميع هذه المشاكل

يمكنك تغير لون الاداه واضافتها في اداه Javascript

الان نتابع الموضوع من اجل ان نحصل علي الفائده

اولا هذا الكود هو كود الاضافه اضفه في اداه Html/javascript

وتابع

<!-- ayanatech.blogspot.com -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-BID" style="width:296px;border:1px solid #000000;"></div>
<!-- Render the gadget into a div. -->
<a href='http://ayanatech.blogspot.com'/>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#DDEEF6';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-BID',
   site: 'SID' },
  skin);
</script>

BID نستبدله بــ معرف المدونه ( مكرر مرتين داخل الكود )

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

يكون علي هذا الشكل

اما بالنسبه لـ SID وهو الاهم و للحصول عليه

اولا يجب ان تكون الاداه الاصليه موجوده بمدونتك ان لم تكن موجوده اضفها

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

واضغط كلك يمين او Right-click

ونختار View page source او عرض مصدر الصفحه

ستفتح لك صفحه اضغط من لوحه الكيبورد Ctrl+f

ليفتح لك شريط البحث اكتب به كلمه site :

وانسخ الرقم الذي بجوارها واضفه مكان SID

قم بحذف الاضافه الاصليه واضف كود الاضافه الجديده

الان اصبحت جاهزه للتعديل

ولتخصيص الالوان تابع كل سهم اين يتجه

اضغط هنا اذا اردت الحصول علي اكواد الالوان

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

واقل شئ صفين يمكن زيادته

والــ Width:296 يعبر عن عرض الاداه

تم الانتهاء من الموضوع لاتنسي الانضمام لأعضاء المدونه ليصلك كل جديد

اضافه syntax highlighter صندوق الاكواد الملون بميزات احترافيه

2015-05-31T13:45:00.003-07:00

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

بناء علي طلب بعض الاخوه الكرام

اقدم لكم صندوق الاكواد المرقم والملون

ميزه تحديد الكل

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

اعتذر عن التأخر في تنفيذ الطلب

الان نبدأ

اولا قم بالبحث عن

</head>

واضف فوقه الكود التالي

<style>
/*----------------------CSS Prism Syntax Highlighter----------------------*/
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;position:relative;border-radius:4px;max-height:500px}pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;text-align:left}pre::after{content:&#39;اضغط مرتين لتحديد الكود&#39;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out}pre:hover::after{opacity:0;top:-8px;visibility:visible}code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px}pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold}code .token.punctuation{color:#ccc}pre code .token.punctuation{color:#fafafa}code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777}code .namespace{opacity:.8}code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56}code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad}pre code .token.selector,pre code .token.attr-name{color:#fafafa}pre code .token.string{color:#40ee46}code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc}code .token.operator{color:#1887dd}code .token.atrule,code .token.attr-value{color:#009999}pre code .token.atrule,pre code .token.attr-value{color:#1baeb0}code .token.keyword{color:#e13200;font-style:italic}code .token.comment{font-style:italic}code .token.regex{color:#ccc}code .token.important{font-weight:bold}code .token.entity{cursor:help}pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}.comments pre{padding:10px 10px 15px 10px;background:#2c323c}.comments pre::before{content:&#39;Code&#39;;font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none}.comments pre::after{font-size:11px}.comments pre code{color:#eee}.comments pre.line-numbers{padding-left:10px}pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber}pre.line-numbers &gt; code{position:relative}.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0}.line-numbers-rows &gt; span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows &gt; span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms}pre[data-codetype=&#39;CSSku&#39;]:before{background-color:#00a1d6}pre[data-codetype=&#39;HTMLku&#39;]:before{background-color:#3cc888}pre[data-codetype=&#39;JavaScriptku&#39;]:before{background-color:#75d6d0}pre[data-codetype=&#39;JQueryku&#39;]:before{background-color:#e5b460}
</style>
<script src='https://ayana-tech1.googlecode.com/svn/trunk/code-box-num-2-new-prism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

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

بقي طريقه استخدام الصناديق

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

من تأليف الي Html

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

ثم عد مره اخري الي تأليف ستجد كلمه Here

قم بإستبدالها بالكود المراد إظهاره داخل الصندوق

تأكد من العوده الي تأليف

كود الصندوق للغه Html

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">Here</code></pre>

كود الصندوق للغه Css

<pre title="CSS" data-codetype ="CSSku"><code class="language-css">here</code></pre>

كود الصندوق للغه Javascript

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">Here</code></pre>

كود الصندوق للغه JQuery

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">Here</code></pre>

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

لاتنسوا دعمنا

كود تأثير السباحه Css

2015-05-16T01:57:00.000-07:00

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

اليوم اقدم لكم موضوع رائع

اضافه تأثير السباحه كما بالصوره فوق

او يمكن المعاينه مباشره من خلال هذا الرابط

http://ayanatech.blogspot.com

نأتي الان الي شرح التركيب

اولا قم بالبحث داخل القالب عن

</head>

واضف فوقه الكود التالي

<style>
@keyframes inky-float {
0% {transform: translateY(0%);}
50% {transform: translateY(2%);}
100% {transform: translateY(0%);}
}
@-webkit-keyframes inky-float {
0% {-webkit-transform: translateY(0%);}
50% {-webkit-transform: translateY(2%);}
100% {-webkit-transform: translateY(0%);}
}
</style>

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

يكون علي هذا الشكل

.here { }

واضف له الكود التالي

animation-name:inky-float;
-webkit-animation-name:inky-float;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;

ليصبح بهذا الشكل

.here { animation-name:inky-float;
-webkit-animation-name:inky-float;
animation-duration:5s;
-webkit-animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite; }

الان قم بالضغط علي حفظ

إفتتاح الموقع والإنطلاقه الاولي بعد المده التجريبيه :)

2015-05-15T08:47:00.001-07:00

اهلا بكم الزوار الكرام

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

وبإذن الله في الفتره السابقه انتظرونا بأحلي الموضوعات الحصريه والجديه

والسلام عليكم

لاتنسوا دعمكم للمدونه

تحميل قالب X10 الرائع من تصميمي

2015-02-07T04:39:00.000-08:00

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

اليوم اتيت لكم بموضوع جديد

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

قررت ان اضع القالب بين ايديكم مجانا

معاينه القالب

صور من القالب

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

تحميل القالب :

تحميل القالب

ــــــــــــــــــــــــــــــــــــــــــــ

لتحميل القالب اتبع الشروط

1- انضم الي المدونه من هنا

2- اترك تعليقا به بريدك الالكتروني ليتم ارسال القالب لك

اضافه دائره مواقع التواصل الاجتماعي بتاثير احترافي

2015-02-07T03:03:00.000-08:00

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

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

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

معاينة

قم بالذهاب الي التخطيط

اضافه اداه

Html/javascript اختر اداه

قم بلصق الكود التالي

<style>
/* CSS Author Widget */
.iuauthor-item {padding:15px 10px;text-align:center;}
.iuauthor-item .image-wrap {position:relative;overflow:hidden;border-radius:50%;
-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;
height:auto;margin:0 auto;margin-bottom:15px;}
.iuauthor-item .image-wrap:before {content: '';display:block;position:absolute;
border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;
-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}
.iuauthor-item .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;
background-color:#333;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.7);transform: scale(0.7);transition:all 0.3s linear;}
.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;
border-radius:50%;}
.image-wrap:hover .social.linear-3s {opacity:0.9;-webkit-transform: scale(1);transform: scale(1);}
.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
.iuauthor-item h4.iuauthor-name a {font-size:18px;margin-bottom:10px;display:block;
color:#666;}
.social-inner .fa-google-plus {background:#d64431!important;}
.social-inner .fa-twitter {background:#00aced!important;}
.social-inner .fa-facebook {background:#3b5998!important;}
.social-inner .fa-pinterest {background:#cb2027!important;}
</style>
<div class='iuauthor-item'>
<div class='image-wrap'>
<a href='http://ayanatech.blogspot.com'/>
<img alt='Arlina Design' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzP4zoK21fULMyZnylz8o5Uq0OdbtOwKVocCfmjXzzWGPpdEtDAnNf9MhAcpri3Mz80DOkKTPPegdB7TrkW6bAnANuMp4MuUGVX38VswVpjfrUZBBlpzJJIHqkpCAmF3ZnlqsJRmzEPxBj/s1600/Arlina+Logo.png'/>
<div class='social linear-3s'>
<div class='social-inner'>
<a href='https://www.facebook.com/ayanatech' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a>
<a href='https://plus.google.com/+ayanatech' target='_blank' title='Google Plus'><i class='fa fa-google-plus'></i></a>
</div>
</div>
</div>
</div>
</div>

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

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

اضافه اداه الاشتراك في القائمه البريديه احترافيه

2015-02-07T02:43:00.000-08:00

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

اليوم اقدم لكم اداه الاشتراك في القائمه البريديه

شكل احترافي وحصري

اولا قم بالذهاب الي التخطيط

اضافه اداه

Html/javascript قم بإختيار اداه

ثم قم بوضع اي عنوان

واضف الكود التالي في الصندوق

<style>
#subscribe-css {margin:0;padding:0;float:right;display:block;position:relative;}
.subscribe-wrapper {background:#525c6b;width:260px;height:200px;color:#fff;font-size:14px;font-family:'Open Sans';line-height:20px;padding:40px 20px 10px 20px;text-align:center;border-radius:3px;}
.subscribe-wrapper p {margin:0;margin-bottom:30px;}
.subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;}
form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;}
.subscribe-css-email-field {background:#454e5b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QJt0RiJ5OT8lik2Q7Si30C1X1iZs-l1yct4bUF7t-KuAxnjVeoQ-2dMe9pWtmK0q7b_osy5FAKohH6BqgvjgOvJycGt_DNbM9Sg_oV8gLbCoFPOvOnzlWnVXlo3vA35JMQYHKNP1TGEX/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button {background:#f0b26f;color:#fff;cursor:pointer;font-weight:700;
padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}
.subscribe-css-email-button:hover {background:#e5a054;color:#fff;}
</style>
<div id='subscribe-css'>
<a href='http://ayanatech.blogspot.com/'/>
<div class='subscribe-wrapper'>
<p style='font-family:ge_dinar;'>اشترك في القائمه البريديه يصلك كل جديد</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=ayanatech' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=ayanatech&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ArlinaDesign'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='ادخل بريدك الالكتروني'/><input class='subscribe-css-email-button' title='' type='submit' value='اشتراك الان'/></form>
</div>
</div>
</div>

قم بالبحث داخل الكود عن اي كلمه

Ayanatech

وغيرها بمعرف فيدبارنر

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

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

تغير شكل المشاركات الشائعه الي شكل مترو احترافي

2015-02-06T03:22:00.001-08:00

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

اليوم اقدم لكم طريقه حصريه لتغير شكل المشاركات الشائعه الي شكل مترو احترافي

مقدم من مدونه Ayana tech حصريا لكم

معاينه الشكل الجديد

الان نأتي الي تغيير شكلها القديم الي الشكل الجديد

اولا قم بالذهاب الي قالب ثم تحرير Html

ابحث عن الاكواد القديمه للأداه اذا كان هناك اكواد قديمه لها داخل القالب

قم بحذف اي اكواد لها علاقه بالاداه

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

.PopularPosts

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

الان قم بالحث عن

</haed>

ثم قم بإضافه الكود التالي فوقه

<style>
/*-----------------------------CSS Popular Post--------------*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul li img{display:none;margin:2px;margin-left:10px;padding:0;width:60px;height:60px;float:right}.PopularPosts ul li{background-color:#fff;margin:0;padding:0;position:relative;box-shadow:inset 4px 0 0 rgba(255,255,255,0.0);transition:all 0.1s ease-out}.PopularPosts ul li:hover{background:#cf8860;transition:0.5s}.PopularPosts ul li:last-child{border-bottom:none}.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:400;color:#fff;text-decoration:none;transition:all 0.1s ease-in-out}.PopularPosts ul li a:hover{color:#fff!important}.PopularPosts ul li:before{display:none;list-style:none}.PopularPosts .item-thumbnail{display:none;float:left;margin:0 0 0 0}.PopularPosts .item-snippet{display:none;font-size:10px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.PopularPosts .item-title{padding-bottom:.2em;margin:3px 10px}.profile-img{display:inline;opacity:1;margin:0 0 3px 6px}.PopularPosts .widget-content ul li{padding:.5em 0 .5em 0}.PopularPosts ul li:nth-child(1){margin-top:2px;background:#3498db}.PopularPosts ul li:nth-child(2){margin-top:2px;background:#9b59b6}.PopularPosts ul li:nth-child(3){margin-top:2px;background:#e74c3c}.PopularPosts ul li:nth-child(4){margin-top:2px;background:#FF8032}.PopularPosts ul li:nth-child(5){margin-top:2px;background:#1abc9c}.PopularPosts ul li:nth-child(6){margin-top:2px;background:#3498db}.PopularPosts ul li:nth-child(7){margin-top:2px;background:#9b59b6}.PopularPosts ul li:nth-child(8){margin-top:2px;background:#e74c3c}.PopularPosts ul li:nth-child(9){margin-top:2px;background:#FF8032}.PopularPosts ul li:nth-child(10){margin-top:2px;background:#1abc9c}.PopularPosts ul li:hover:nth-child(even),.PopularPosts ul li:hover:nth-child(odd){background:#DA4A3B}</style><a href='http://ayanatech.blogspot.com'/>

الان قم بالضغط علي حفظ واذهب الي المعاينه

طريقه جعل القالب متوافق مع جميع الشاشات Responsive web design

2015-01-26T09:16:00.002-08:00

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

توافق القالب مع جميع الشاشات Responsive Web Design

الان نبدأ الشرح

ملحوظه سيتم رفع الفيديو الذي سأشرح فيه الطريقه قريبا بإذن الله

بسبب الانشغال

المهم

هذا الكود المسؤل عن توافق القالب اضفه في اكواد Css وتابع معي

/* CSS Global Responsive */
@media screen and (max-width:960px) {
}
@media only screen and (max-width:768px){
}
@media (min-width:768px) and (max-width:979px) {
}
@media (max-width:767px) {
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:640px){
}
@media only screen and (min-width:640px){
}
@media only screen and (max-width:480px){
}
@media screen and (max-width:320px){
}

الان يجب التعديل علي الكود

مثلا نقوم بإحضار الجزء الاول من الكود

@media screen and (max-width:960px) {
}

الان هذا الكود يعني الشاشه من 768 حتي مقاس 960

نقوم بإضافه الاكواد بداخله مثلا القالب الاساسي والعادي يتكون من

قائمه علويه

ثم الهيدر

ثم القائمه الثانيه

تم مكان المشاركات

ثم القائمه الجانبيه

ثم الفوتر

نقوم بإحضار معرف كل عنصر من العناصر

القائمه العلويه menu-top

الهيدر header

القائمه الثانيه menu-2

مكان المشاركات main

القائمه الجانبيه sidebar

الفوتر footer

ملحوظه : المعرفات تختلف من قالب الي اخر

طريقه احضار المعرف

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

ثم تقوم بإختيار فحص العنصر او Inspect element

تم تجد نافذه ظهرت تجد بها المعرف كما هو موضح

اقوم الان بالتعديل كما قلت الجزء الاول من الكود يعني مقاس الشاشه 768 حتي مقاس 960

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

اجعلها بعرض 100% حتي تكون بعرض الشاشه بالكامل

الهيدر ايضا اجعلها بعرض 100%

والقائمه الثانيه ايضا

اما المشاركات فلا تجعلها 100% بل قم بتصغير عرضها قليلا وكذلك مع القائمه الجانبيه

حتي احصل علي كود كل من العناصر مثلا

#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}

ثم تضيفها الي الجزء الاول من الكود ليصبح بهذا الشكل

@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}

نقوم بتكرار العمليه حتي نصل الي الجزء الثامن

نقوم بإخفاء القائمه الجانبيه ثم نجعل مكان المشاركات بعرض 100%

مثلا

#main { width:100%;}
#sidebar { display:none;}

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

@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}

الان بعد ان قمت بالتعديل علي كل الاجزاء سيصبح الكود هكذاد

/* CSS Global Responsive */
@media screen and (max-width:960px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:768px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (min-width:768px) and (max-width:979px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media (max-width:767px) {
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (min-width:640px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
}
@media only screen and (max-width:480px){د
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}
@media screen and (max-width:320px){
#menu-top {width:100%;}
#header {width:100%; }
#menu-2 {width:100%;}
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}
#footer {width:100%;}
#main { width:100%;}
#sidebar { display:none;}
}

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

لمن لم يفهم انا بإذن الله سأقوم بشرح الموضوع بالفيديو ورفعه قريبا

اجعل الشعار الخاص بك 3D ثلاثي الابعاد

2015-01-22T06:53:00.002-08:00

السلام عليكم متابعي مدونه Ayana tech

اليوم اقدم لكم لكم خدمه اخري من الخدمات السابقه

تحويل الشعار الخاص بك الي 3D ثلاثي الابعاد

خطواط الحصول علي الشعار

1. اختر الشعار الذي تريده يسمح بتعدد اللوجوهات
2. اترك تعليقا به بريدك الالكتروني والشعار
3. سيتم ارسال لك الشعار في اقرب وقت بإذن الله

دعم فني كامل لمدونات بلوجر ( مجاني )

2015-01-22T05:49:00.002-08:00

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

اليوم اقدم لكم خدمه جديده لزوار المدونه

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

صفحه الدعم الفني

طريقه الحصول علي رابط مختصر مميز بإسمك bit.ly/mohamed

2015-01-21T11:28:00.000-08:00

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

اقدم لكم طريقه الحصول علي رابط مختصر مميز بإسمك bit.ly/mohamed

هذه الطريقه تم شرحها علي هذه المدونه فقط

انتجت فيديو يشرح الطريقه ليسهل الامر

رابط الموقع اسفل الفيديو

اضغط للذهاب للموقع