طريقة اضافة المواضيع الحصريه للمدونه بتقنية ال css

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


مثال حى على الاضافة

ان اعجبتك اضافة اليوم تستطيع تطبيقها باتباع الخطوات والتعليمات التي بالاسفل


قم باضافة اداه من نوع جافا سكربت وضع فيها الكود التالى
<div id='mbtboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 1 LINK'>
<img height='100' src='POST 1 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 2 LINK'>
<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>

</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>

قم بالتعديل على المتغيرات الموجوده داخل الكود كما هو موضح به


الان قم بالذهاب الى تحرير القالب وابحث عن الكود التالى
]]></b:skin>


وضع قبله الكود الموجود بالاسفل


/*----------- MBT Gallery -----------------*/

#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}

#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

الان قم بحفظ قالب مدونتك ومبروك عليك الاضافه ويمكنك ازاحه الاداه فوق منطقة الفوتر او تحت الهيدر او فوق رسائل المدونه مع مراعاة تعديل المتغيرات داخل الكود الاول من روابط مواضيع وصور وموجز لها ..
أصدقاء(تطوير ويب)
تعليقات Facebook
5تعليقات Blogger

5 عدد التعليقات على موضوع طريقة اضافة المواضيع الحصريه للمدونه بتقنية ال css

نورس الشط يقول...

جربتها بس للأسف مانجحتش علي مدونتي http://a7sa2ya.blogspot.com

فياريت تشرح المقصود بالعناصر التالية:-

رابط الموضوع الأول POST 1 LINK
رابط صورة الموضوع الأول POST 1 IMG LINK
وصف مختصر للموضوع الأول POST 1 DESCRIPTION
لم أستطيع تحديد المقصود بـ POST 1 PARAGRAPH

ولك مني عميق الشكر والتقدير علي مجهودك المتميز في خدمة مدوني بلوجر :)

غير معرف يقول...

احدهم غيريه بعنوان الموضوع والاخر خاص بوضع وصف مختصر للموضوع ..
تقبلي تحياتى واشكرك على كلامك الطيب..

نورس الشط يقول...

انا أقصد ان تدلني علي ما المقصود بالمتغير POST 1 PARAGRAPH
أسفة علي الإزعاج، وأشكرك علي سرعة الرد، مع خالص تحياتي :)

غير معرف يقول...

عزيزتي شيماء لا شكر على واجب
والخطا هنا يكمن فيالعباره نفسها التي سالتي عنها ولتعمل الاضافه بشكل سليم يجب تغييرها بعنوان الموضوع
فالاضافه ككل تعمكل بشكل يدوي دون تدخل الجافا سكربت فهي تعتمد اعتمادا كليا علي ال Css والتالي يجب وضع رابط صوره للموضوع وعنوان له ومختصر يدل علي محتواه
ارجو ان اكون قد افدتك تقبلي مودتي ..

غير معرف يقول...

هل يمكن حذف الارقام من الاداة و الاكتفاء بالاسهم ؟

محمد

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .