الخميس، 12 يناير، 2012

تعلم كيف تظيف قائمة اخر مواضيع المدونة مع عرض صور مصغرة ؟

قراءة للموضوع

بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الصادق الامين ، اخواني زوار  المحررون العرب طبعا قد تحدثنا في درس سابق عن كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟ . ولكن درسنا اليوم يختلف عن الدرس السابق ، في هذا الدرس نشرح اسلوب او نمط آخر في كيفية اظافة اداة ( آخر المواضيع ) للمدونة او الموقع ، حيث ان هذه الاظافة تاخذ على شكل قائمة عمودية تحتوي على آخر العناوين الريئسية ( Recent posts ) للمدونة وجزء صغير من المحتوى وايظا صور مصغرة ( Thumbnail )  من صور آخر المواضيع المنشورة ، هذه الاضافة تعطي المدونة مظهر جميل ورائق عند وضعها في السايد بار ( Sidebar ) ، بينما الطريقة السابقة التي اشرنا اليها تاخذ على اسلوب او نمط شريط افقي متحرك لآخر مواضيع المدونة تضعه تحت الهيدر ( Header ) مثلاً . والصورة التالية توضح قائمة ( آخر مواضيع المدونة ) في درسنا هذا : 

كيفية اظافة اخر مواضيع المدونة
قائمة آخر المواضيع

اذاً ، دعونا نبدا بشرح الخطوات :

1 - ادخل على حسابك في بلوجر . 


2 - من لوحة تحكم المدونة انقر من القائمة على ( تخطيط  ) ثم ( اضافة اداة ) كما هو موضح في الصورة التالية :

طريقة اخر مواضع المدونة مع صور مصغرة
لوحة تحكم المدونة

3 - قم باختيار اداة  HTML/Java Script كما هو موضح في الصورة التالي : 


قائمة الادوات 
4 - قم بنسخ ولصق الكود التالي  في الاداة : 




<div class="pipesContainer">
<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"http://www.yourblog.blogspot.com/feeds/posts/default"},"hideHeader":"false","height":"auto","count": 8 }</script>
<div style="font-family: arial, trebuchet; font-size: 9px;">link <a href="http://arab-editors.blogspot.com">Recent Posts Thumbnails</a> by <a href=" http://arab-editors.blogspot.com/search/label/%D8%A7%D8%AF%D9%88%D8%A7%D8%AA%20%D9%88%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1 ">Blogger Widgets</a> </div> <noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.pipesContainer {
margin:10px 0 10px 0;
padding:0px;
background:none;
}
.pipesHolder {
padding: 0px!important;
margin:10px 0px!important;
}
.pipesTitle {
padding-top:0px!important;
line-height:14px;
font-weight:bold!important;
}
/*.pipesDescription,*/
.pipesSmallthumb {
display:none!important;
}
.pipesThumbnail img {
background-color: transparent;
background: url(http://1.bp.blogspot.com/_LqmwslVmHqM/TFQ5FmgcPRI/AAAAAAAAB7M/5nTPNdVga2k/s400/bloggerlogo-4.png) no-repeat top center;
border: none!important;
height:auto!important;
width:72px!important;
}
.yba,.ybf {display:none!important;}
.ygt {margin-top:10px;margin-bottom:10px;font-size:9px;float:left;}
.ybr li {background-color: transparent!important; padding:0px!important;}
</style></div>

توضيح على الكود :

* قم بوضع رابط مدونتك او موقعك مكان اللون الاحمر في الكود اعلاه ،

* اللون الوردي : = 8 يشير الى عدد المواضيع ( العناوين ) الذي تريدهم يظهرون ، هنا عددهم الافتراضي في الكود  = 8 بامكانك تخفيض العدد الى 6 او 5 او اقل على رغبتك .

 5 - واخيرا قم بعمل حفظ للاداة . وصلى الله وسلم على رسولنا الكريم ،،،



تعليقاتكم تهمنا ،، وزيارتكم تسرنا 

7 التعليقات:

محمد عزت يقول...

دائما مواضيعك مميزة بالتوفيق
تم اضافة مدوانتك فى مدونةالبيت السعيد

bahaa ali يقول...

مشكور جدا بعد اذنك كنت عاوز رابط لشرح ربط خاصيه rss لمدونتى على فيس وتويتر وجوجل بلس عاجل

خالد محمد (ابوخلود) يقول...

اخي bahaa ali اشكرك جزيل الشكر على مرورك الكريم بالمدونة... و بناءا على طلبك لقد قم بنشر موضوع جديد بخصوص كيف تربط مواضيع مدونتك او موقعك على الفيسبوك ؟ - ربط المدونة بالفيسبوك .. على الرابط التالي :
http://arab-editors.blogspot.com/2012/01/blog-post_20.html

Shymaa Leo يقول...

من فضلك سؤال؟؟
فعلا مضمون موضوعاتك هائله فنفسى أعرف ليه بيخرج لى الرساله التاليه لما بعمل صفحه جديده فى مدونتى؟؟!!!!

نأسف لتعذر إكمال الطلب.
عند إبلاغ فريق دعم Blogger عن هذا الخطأ أو إرساله من خلال منتدى مساعدة Blogger، الرجاء:
وصف ما كنت تفعله عند ظهور هذا الخطأ.
تقديم رمز الخطأ التالي.
bX-tkarys
ستساعدنا هذه المعلومات في تتبع هذه المشكلة المحددة وحلها. نأسف للإزعاج.
معلش أنا سألت كتيررررررر ومحدش رد أتمنى ترد عليا

http://www.blogger.com/blogger.g?blogID=5325194415343750420#pages

Firmenumzug Wien يقول...

جددوا موضوعاتكم .. رجاءاً :)

Transport Wien يقول...

الله يوفقكم..ع المجهود...:)

Räumung يقول...

Allah grant you success ... Where new themes ?!