السلام عليكم و رحمة الله تعالى و بركاته اليوم سوف نقم لكم اداة جديدة في عالم بلوجر مختلفة تماما عن ما تعرفه من الادوات المنتشرة هنا و هناك بعد تعب و جهد كبير في البحث عن اداة تتيح لي عمل وصف على صورة و رابط للانتقال انطلاقا منها منذ اشهر عديدة بدأت العمل و البحث الجاهد الى ان كانت النتيجة و كما هي واضحة للعيان الذين يتواجدون بالمدونة الان و يرون القائمة الجانبية في
الصفحة الرئيسية فالاداة موجودة هناك باسم صورة و تعليق عند تمرير الماوس يظهر لك نص عوض الصورة و رابط قراءة المزيد
طبعا هناك الكثير ممن يبحث عن مثل هته الاضافة فهي تصلح للعديد من الاشياء جعلها للمواضيع المهمة كما فعلت انا او ارجاعها للتبادل الاعلاني بنكهة جديدة او.. على حسب ذوقك و الجميل في الاداة انها لا تتطلب الكثير من الجهد لوضعها فقط قم باضافة اداة من تخطيط المدونة و ضع بها كود الاضافة التالي:
<style>
.image-box-wrapper {
width:300px;
margin:10px auto;
}
.image-box {
width:145px;
height:160px;
background-color:white;
border:1px solid #ccc;
overflow:hidden;
float:right;
margin:1px 1px;
font:normal normal 12px/1.4 'droid arabic kufi',"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {
height:150px;
border:5px solid white;
background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:200px;
height:150px;
padding:0 0;
margin:0 0;
border:none;
outline:none;
max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;
padding:0 0;
height:70px;
}
.image-details h4 {
font-size:120%;
height:auto;
}
.image-details .details {
padding:10px 12px;
overflow:hidden;
}
.image-details .more {
color:white;
text-decoration:none;
display:block;
text-align:center;
font-weight:bold;
background-color:#f9a;
height:26px;
line-height:26px;
margin:10px 0 0;
}
.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الموضوع">المزيد</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الصورة">المزيد</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الموضوع">المزيد</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الموضوع">المزيد</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الموضوع">المزيد</a></p>
</div>
</div>
</div>
<div class="image-box">
<div class="image-container">
<img width="200" height="150" src="رابط الصورة" alt="وسم الصورة" />
</div>
<div class="image-details">
<div class="details">
<h4>العنوان</h4>
<p>النص</p>
<p><a class="more" href="رابط الموضوع">المزيد</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
ما عليك الان سوى تغيير الكلمات في الاضافة باشيائها كالصور و العناوين... إذا اردت التحكم بعرض الاضافة ما عليك سوى تغيير الرقم 300 الى القياس المناسب لك.
إعلانك هنا
إعلانك هنا
إعلانك هنا
إعلانك هنا
إعلانك هنا
ليست هناك تعليقات :
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى الإتصال بنا , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.