السلام عليكم
هناك العديد من إضافات jQuery تقدم حلول تختصر على المبرمج عند قيامه بتطوير واجهة لأي تطبيق،
هناك العديد من إضافات jQuery تقدم حلول تختصر على المبرمج عند قيامه بتطوير واجهة لأي تطبيق،
وتوفّر الإضافات المميزة يزيد من إختصار العمل في أسطر قليلة من الشفرات،
وتوفر المكتبة إمكانية عمل الإضافات
وتوفر المكتبة إمكانية عمل الإضافات
بكل سهولة وهذا يمنح المطورين فرصة لتقديم عمل مبني على مكتبة رائعة
يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.
يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.
معنا في الموضوع عمل بسيط ..بحيث وجدت ضالتي في احد المكتبات
بحيث أنني وضعت اضافة واحدة فقط جمعت فيها 3 اضافات..
قائمة + اخر 6 مواضيعك + اخر مواضيعك مع صورة مصغرة
وسأستخدم صورة سريعة لطرح فكرة الدرس،
في هدا العمل قمت بتجهيز تقويم مصمم بـ html css
و قمت بربطه مع مكتبة jQuery لإنشاء التفاعل مع واجهة مستخدم..
الاضافة هي مازالت في طور التطوير..اترككم مع المشاهدة و الشرح
ثم ابحث عن هذا الوسم
أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثالثا : ضع علامة في خانة توسيع القوالب .
<head>نقوم بتضليله و نعوضه بالكود التالي
<link href='http://blogspacetech.googlecode.com/files/ArticleListblogger.css' rel='stylesheet' type='text/css'/>
<head>أخيرا : استعرض مدونتك ثم احفظ قالبك.
شرح كيفية الإستخدام
الان ننتقل الى اضافة اداة HTML ; ونضع الكود التالي
<style type="text/css">
.top-right
{
background-image:url(http://img28.imageshack.us/img28/5952/bgmenubox.png);
background-repeat:repeat-x;
background-position:left center;
margin-right:5px;
height:33px;
padding-top:1px;
}
.bgList-left
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nx2XC-KkTKyRPLAreQFM9eoyuwe_xfGma19per-iGbgd4k9gJElqaX-J8It5oVZioBvixKLVg0bOSfoZct4ddkf0Yru6gR943R2OSFjVHMOYr1jUqyCBO1fhBHMYnEwEZiLHHYhk9Ho/);
background-repeat:repeat-x;
background-position:left top;
height:8px;
}
.bgList-right
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nx2XC-KkTKyRPLAreQFM9eoyuwe_xfGma19per-iGbgd4k9gJElqaX-J8It5oVZioBvixKLVg0bOSfoZct4ddkf0Yru6gR943R2OSFjVHMOYr1jUqyCBO1fhBHMYnEwEZiLHHYhk9Ho/);
background-repeat:repeat-x;
background-position:right top;
height:8px;
margin-left:10px;
}
</style>
<div class="article-list-bloggerbox">
<div class="top-left">
<div class="top-right" style="padding-left: 7px;">
<div style="float: right; margin-right: 4px; font-size: 11px;cursor: pointer; font-weight: bold" class="is-section"><img src="http://cdn.iconfinder.net/data/icons/rssicons/PNG/021.png" /></div>
<div class="sc_menu" style="float: right; overflow-x: hidden; overflow-y: hidden; ">
<ul class="tab-header sc_menu">
<li class="tab-name" ><a href="http://blogspacetech.blogspot.com/2010/06/about.html">الرئيسية</a></li>
<li class="sep">|</li>
<li class="tab-name" ><a href="http://blogspacetech.blogspot.com/2010/08/archives.html">أرشيف المدونة</a></li>
<li class="sep">|</li>
<li class="tab-name"><a href="http://blogspacetech.blogspot.com/2010/02/contacte-me.html">للمراسلة</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both;" class="zone">
<script type="text/javascript">
home_page = "http://blogspacetech.blogspot.com/";
label = "blogger";
numposts = 11;
sumTitleBox = 40;
sumTitleBox2 = 65;
sumPosts = 151;
textmore = "<< اقرأ المزيد ";
labelURL = "http://blogspacetech.blogspot.com/search/label/blogger?max-results=10";
</script>
<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/ArticleListblogger.js"></script>
</div>
<div class="bgList-left"><div class="bgList-right"></div></div>
</div>
هدا كل شيء أتمنى لكم الاستفادة..
ليست هناك تعليقات:
إرسال تعليق