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

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

بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الصادق الامين ، اخواني زوار  المحررون العرب طبعا قد تحدثنا في درس سابق عن كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟ . ولكن درسنا اليوم يختلف عن الدرس السابق ، في هذا الدرس نشرح اسلوب او نمط آخر في كيفية اظافة اداة ( آخر المواضيع ) للمدونة او الموقع ، حيث ان هذه الاظافة تاخذ على شكل قائمة عمودية تحتوي على آخر العناوين الريئسية ( 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhOitNP3qck5kI8W-N9rxxealxxPkWrOase6sxgGKu-8O94DKsFNP1n5ceOE2d3cmQmznCYkBLANjXV959y0npKw61P3djba6TgxCREF8mr2Awtx1HEwTrHOrWTovBdKMKIVUTxXF8uI/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 - واخيرا قم بعمل حفظ للاداة . وصلى الله وسلم على رسولنا الكريم ،،،

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