السلام عليكم أحبائي أعضاء وزوار مدونة أقرب
طريق
من اضافاتنا في الدروس السابقه (اضافة خاصية
القائمه المنزلقه لأخرالمواضيع)لمراجعة الدرس عبر هذا الرابط
أما اضافتنا اليوم فهي مميزه وبتقنية cssتضيف احترافيه وروعه لمدونتك وهي المشاركات الشائعه
لموقعك أو اخر مواضيعك تتيح لزوارك التعرف على العديد من مواضيعك شكلها أنيق
والوان جميله وتظهرفيها مصغرات الصور لمواضيعك وعند وضع الماوس على أي صوره يظهر
ملخص لموضوع الصوره
الان الطريقه
1_لوحة التحكم
2_اختار تخطيط
3_اضافة أداة
والان ضع الكود التالي في المحتوى
<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#333333;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#999999;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #FA7C19;
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "آخر المشاركات", // Widget Title
numposts = 20, // The number of thumbnail / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "http://softglad.at.ua/images/no-img.png", // Image that show up if the post doesn't have a image
blogURL = "http://ljhlg.blogspot.com/"; // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
والان مايجب عليك تغييره
1_ما مظلل باللون الأزرق غيره بما يناسبك من عنوان للأضافه أو تتركه على ماهو عليه
2_ما مظلل باللون الأحمر هو رابط مدونة أقرب طريق أستبدله برابط مدونتك
والان اضغط حفظ ومبروك عليك الأضافه
أي استفسار أو سؤال نحن بخدمتكم
والان عزيزي الزائر تعليقك هو تشجيع لنا لتقديم الأفضل
والى جديد من الأضافات
تحياتي لكم
أقرب طريق
: من
العراق
,
اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ماأحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته
,
اهتماماتي للتدوين جعلني أتحدى العمل ، للأكواد ، والتعديل عليها وتكويدهالتخرج بالأشكال المناسبه .
تسلم استاذنا الفاظل على هذا الابداع
ردحذفربي يوفقك وسدد خطاك استاذي على هذه المعلومات الرائعة
ردحذف