03‏/07‏/2014

السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله
شرح طريقة التركيب
1. توجه إلى التخطيط وأضف أداة HTML/JAVASCRIPT وضع بها الكود
<style>
.works{
position:relative;
display:block;
width:940px;
height:240px;
overflow:hidden;
margin:18px auto 18px;
}
.works .slide-works{
width:972px;
}
.works h2{
display: inline-block;
height: 20px;
font-family: JFR,"gesstolight" ,Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
font-weight: normal;
line-height: 20px;
padding-right: 15px;
border-right: 3px solid #e71a1f;
float: right;
background: #332F2F;
}
#nav-work{
position:absolute;
left:0; top:0;
z-index:999;
width:38px;
height:18px;
}
#nav-work #prev{ width:18px; height:18px; float:left; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0;  }
#nav-work #prev:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0;  }
#nav-work #next{ width:18px; height:18px; float:right; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
#nav-work #next:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
.list-works{
width:972px;
height:210px;
margin-top:45px;
}
.list-works .work{
position:relative;
display:block;
width:210px;
height:200px;
float:right;
margin-left:33px;
text-decoration:none;
}
.list-works .work .pic{
display: table-caption;
width:210px;
height:140px;
overflow:hidden;
background:#F9F8F8;
text-align:center;
vertical-align:middle;
}
.list-works .work .hover-pic{
position:absolute;
left:0; top:0;
z-index:99;
display: block;
width:210px;
height:140px;
overflow:hidden;
transition: all 0.5s ease-out;
}
.list-works a.work:hover .hover-pic{  background:url(http://khadamatplus.com/wp-content/themes/alwan/img/hover_work.png) center no-repeat, url(http://khadamatplus.com/wp-content/themes/alwan/img/b-work2.png);}
.list-works a.work:hover .detail-work{ background:#505050;}
.list-works a.work:hover .detail-work .titre-work{ color:#fff;}
.detail-work{
display:block;
width:200px;
height:50px;
padding:5px;
background: #FFFFFF;
margin-top:3px;
font-family:ges;
font-size:12px;

line-height:11px;
text-align:center;
transition: all 0.5s ease-out;
}
.detail-work .titre-work{
font-family:ges;
font-size:15px;
color:#575757;
font-weight:normal;
line-height:26px;
text-align:center;
transition: all 0.5s ease-out;
width: 100%;
display: table;
}
.works2 { display:none; width:748px;}
.works2 .list-works{width: 804px; }
.works2 .list-works .slide-works {width: 804px;}
.works2 .list-works .work{ margin-left:58px;}
</style>
<div class='works'>

<div id='nav-work'>
</div>
<div class='list-works' id='works'>
<div class='slide-works'>
<a class='work fancybox' href='#' title=' شارك وربح قالب خيالي  '>
<span class='pic'>
<img alt='8' class='attachment-list-work wp-post-image' height='140' src='http://im43.gulfup.com/fEw5QB.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>المسابقة الأولى </span>
                                                        شارك وربح قالب احترافي                                              </span>
</a>
<a class='work fancybox' href='#' title='المفاجئة الكبرى ترقبوها قريبا'>
<span class='pic'>
<img alt='7' class='attachment-list-work wp-post-image' height='140' src='http://im74.gulfup.com/jVjpuf.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'> قريبا</span>
                                                        المفاجئة الكبرى                                                 </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='6' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/BDMi5f.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
                                                         قيد التطوير                                                  </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='5' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/swdeNw.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
                                                        قيد التطوير                                                  </span>
</a>
</div>
</div>
</div>
2. غير الكلمات والصور بما يخصك وضع رابط الموضوع بدل #
السلام عليكم اخواني اخواتي في موضوع اليوم سأشارككم اضافة رائعة مثل التي بالمدونة في الأعلى وهي قريبة لسلايدر إلا أنها بصور ثابتة من أربع خانات متفرقة ، تتميز بالبساطة والأنقة ، وأنصح كل من يود أن يستعملها فل يحاول أن يضع بكل خانة شيئ مغاير يعني لا تضع مقالات سبق وأن طرحتها بمدونتك أو موقعك فوضيفتها أن تضع شيئ يجذب الزائر أو تضع موضوع معين .. سنبدأ على بركة الله
شرح طريقة التركيب
1. توجه إلى التخطيط وأضف أداة HTML/JAVASCRIPT وضع بها الكود
<style>
.works{
position:relative;
display:block;
width:940px;
height:240px;
overflow:hidden;
margin:18px auto 18px;
}
.works .slide-works{
width:972px;
}
.works h2{
display: inline-block;
height: 20px;
font-family: JFR,"gesstolight" ,Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
font-weight: normal;
line-height: 20px;
padding-right: 15px;
border-right: 3px solid #e71a1f;
float: right;
background: #332F2F;
}
#nav-work{
position:absolute;
left:0; top:0;
z-index:999;
width:38px;
height:18px;
}
#nav-work #prev{ width:18px; height:18px; float:left; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0;  }
#nav-work #prev:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0;  }
#nav-work #next{ width:18px; height:18px; float:right; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
#nav-work #next:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
.list-works{
width:972px;
height:210px;
margin-top:45px;
}
.list-works .work{
position:relative;
display:block;
width:210px;
height:200px;
float:right;
margin-left:33px;
text-decoration:none;
}
.list-works .work .pic{
display: table-caption;
width:210px;
height:140px;
overflow:hidden;
background:#F9F8F8;
text-align:center;
vertical-align:middle;
}
.list-works .work .hover-pic{
position:absolute;
left:0; top:0;
z-index:99;
display: block;
width:210px;
height:140px;
overflow:hidden;
transition: all 0.5s ease-out;
}
.list-works a.work:hover .hover-pic{  background:url(http://khadamatplus.com/wp-content/themes/alwan/img/hover_work.png) center no-repeat, url(http://khadamatplus.com/wp-content/themes/alwan/img/b-work2.png);}
.list-works a.work:hover .detail-work{ background:#505050;}
.list-works a.work:hover .detail-work .titre-work{ color:#fff;}
.detail-work{
display:block;
width:200px;
height:50px;
padding:5px;
background: #FFFFFF;
margin-top:3px;
font-family:ges;
font-size:12px;

line-height:11px;
text-align:center;
transition: all 0.5s ease-out;
}
.detail-work .titre-work{
font-family:ges;
font-size:15px;
color:#575757;
font-weight:normal;
line-height:26px;
text-align:center;
transition: all 0.5s ease-out;
width: 100%;
display: table;
}
.works2 { display:none; width:748px;}
.works2 .list-works{width: 804px; }
.works2 .list-works .slide-works {width: 804px;}
.works2 .list-works .work{ margin-left:58px;}
</style>
<div class='works'>

<div id='nav-work'>
</div>
<div class='list-works' id='works'>
<div class='slide-works'>
<a class='work fancybox' href='#' title=' شارك وربح قالب خيالي  '>
<span class='pic'>
<img alt='8' class='attachment-list-work wp-post-image' height='140' src='http://im43.gulfup.com/fEw5QB.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>المسابقة الأولى </span>
                                                        شارك وربح قالب احترافي                                              </span>
</a>
<a class='work fancybox' href='#' title='المفاجئة الكبرى ترقبوها قريبا'>
<span class='pic'>
<img alt='7' class='attachment-list-work wp-post-image' height='140' src='http://im74.gulfup.com/jVjpuf.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'> قريبا</span>
                                                        المفاجئة الكبرى                                                 </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='6' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/BDMi5f.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
                                                         قيد التطوير                                                  </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='5' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/swdeNw.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
                                                        قيد التطوير                                                  </span>
</a>
</div>
</div>
</div>
2. غير الكلمات والصور بما يخصك وضع رابط الموضوع بدل #
9 Blogger تعليقات
Disqus
9 التعليقات
المشرف
avatar

شكرا اضافة رائعة

المشرف
avatar

يشرفني ان اعلق على مثل هذه المواضيع

احسنت الى الامام يا بطل

المشرف
avatar

العفو اخي

المشرف
avatar

شكراً لك رائعة جداً لكن لدي مشكلة أخي الخطوط في الإضافة غير متناسقة بمعنى أنها غير جيدة إنظر إليها في موقعي www.Ebda2.net

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

المشرف
avatar

ابحث عن : .detail-work .titre-work
ستجد تحتها : font-family: ges
غير : ges إلى خط مدونتك وهو : droidkufi-bold,tahoma
ثم إبحث عن :.detail-work
وغير الخط .
موفق

المشرف
avatar

أخي الغالي كيف غير الهوفر ، إلى شكل العين مثل موقعك ممكن الكود لكي أستبدله بالحالي ؟!

كيف أقوم بتعريض مستطيل النصوص ؟! شاهد في الموقع هي صغيرة أصغر من عرض الصورة ! كيف أقوم بتعريض الصندوق ؟! إلى عرض الصورة .

وكيف أتحكم بالمسافة الفاصلية بين الهيدر والمربعات وبين المربعات ورسائل المدونة ؟!

المشرف
avatar

ابحث عن : .list-works a.work:hover .hover-pic
ستجد رابط الصورة وهو الأول غيره بـــ الصورة التالية :
http://1.bp.blogspot.com/-y5LtgxiDcC0/U4YwDt-qrSI/AAAAAAAADSk/y49RCT68mcA/s1600/eye.png

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

المشرف
avatar

اخي ممكن
كيف بدي احط صورة في HTML/JAVASCRIPT و اربطها برابط
لو سمحت اخي

المشرف
avatar

لقد حضرته لك ما عليك إلا وضعه وتغيير الكتابة بالمطلوب :
<a href="رابط الصفحة" rel="nofollow" target="_blank" title="عنوان"><img border="0" src="رابط الصورة" /></a>

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة