كيفية عرض آخر المواضيع/التدوينات/المشاركات مع مقتطفاتها بشكل متحرك و احترافي

سيسمح لك هذا الكود بعرض آخر تدويناتك مرفقة باسم الكاتب، تاريخ التدوينة، رابطها و مقتطف منها بشكل متحرك و احترافي. ستجد أسفله مثال حي للإضافة يوضح كل ما سبق و أكثر.

مثال حي :

Loading...

طريقة تركيب الإضافة :

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على تخطيط و أضف HTML/JavaScript.

2- قم بنسخ و لصق الكود التالي داخل الأداة :

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : right;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : right;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://afkarpro.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'آخر التدوينات', numResults : 10, displayTime : 5000});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

3- قم بتعديل الكود كمايلي :

أ- غيِّر الرابط التالي http://afkarpro.blogspot.com برابط مدونتك الخاص.

ب- تاليا لدينا start-index=1 هذا الرقم يدل على المشاركة التي تريد إظهارها أولا في القائمة، تبعا للإعدادات الافتراضية هذه المشاركة هي المشاركة الأخيرة لك في المدونة، لذا إن أردت أن تبدأ بمشاركة أقدم ما علي إلا تغيير الرقم 1.

ج- max-results=10 تدل على أقصى عدد من المشاركات التي سيتم استحضارها من التغذية "feed"، بداية بالذي اخترته في الخاصية أعلاه. وجب ذكر أنه كلما كان الرقم المختار كبيرا كلما تباطأت الأداة.

د- و أخيرا إليكم بعض المتغيرات في الكود :

'آخر التدوينات' :title هو عنوان الأداة

numResults : 10 هي عدد المشاركات التي ستظهر في قائمة الأداة

displayTime : 5000 هي المدة الزمنية المستغرقة في كل حركة (بالملي ثانية / 5000ms=5s)

text-align : right إن كانت مدونتك عربية فاترك هذه الخاصية كما هي و إن كانت أجنبية فغيِّر right إلى left في كلا الموضعين

4- و أخيرا قم بحفظ الإضافة.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ؛) 

و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

و دمتم في رعاية الله وحفضه