أحد ادوات المهمة التي يفترض لكل اصحاب المدونات بشكل عام التي تطرح مواضيع ساخنة بشكل يومي أو شهري أو اسبوعي او ما يكون ان يقوم بتركيب هذي الاداة التي تلعب دور كبير لجذب الزوار لقرائة المواضيع وهي اداة جديده قد طرحت سابقا في بلوجر بشكل فعلي من لوحة التحكم ولكنها لازالت تحتاج الى تطوير لأن مظهرها ليس كما يتطلب من وجهة نظري في كل حالات لن اطيل بكثير هذي اداة تقوم بنفس الوظيفة ولكن اضافاتها يدوي وبشكل سهل
من التخطيط قم بفتح اداة جافا جديدة واضف الكود التالي
<style>
.animate { transition: all .5s ease-in-out; }
.thumb {
float: left;
height: auto;
margin: 0 10px 10px 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
font: 1em/1.2em Segoe UI, sans-serif;
}
.thumb .link {
display: block;
position: relative;
overflow: hidden;
width: 320px; height: 180px;
}
.thumb .image {
position: absolute;
width: 100%;
}
.thumb .blend {
position: absolute;
bottom: 0; left: 0;
width: 100%;
font-weight: normal;
background: rgba(91, 160, 239,0.8);
color: #fff;
transition-duration: .4s;
}
.thumb .head {
height: 1.2em;
padding: 10px;
margin: 0;
display: block;
font-weight: normal;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.thumb .text {
display: none;
position: relative;
overflow: hidden;
height: 8.5em;
padding: .5em 10px;
font-size: .7em;
}
.thumb .link:hover .image {
left: -125%; top: -125%;
width: 300%;
}
.thumb .link:hover .blend {
height: 100%;
}
.thumb .link:hover .text {
display: block;
}
</style>
<div class="thumb">
<a href="رابط الموضوع" class="link">
<img src="https://dl.dropbox.com/u/97962632/some.jpg" class="image animate" />
<span class="blend animate">
<strong class="head">عنوان التدوينة</strong>
<span class="text">
تفاصيل عن التدوينة المميزه
</span>
</span>
</a>
</div>
ملاحضة لا يسمح بنقل الموضوع من دون ذكر مصدر
اسم الكاتب
????????????????????