إضافة القطعة المتحركة المشاركات الأخيرة إلى مدونة Blogger

 

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

الآن يتيح لك معرفة كيفية إضافتها إلى مدونتك بلوجر

 

 

كيفية إضافة القطعة التحريك المشاركات الأخيرة إلى Blogger؟

الخطوة 1: -

هذه القطعة  تعمل مع تأثير jQuery spy حتى تكون لديك لإضافة يجب إضافة  مكتبة jQuery  إلى مدونتك (ملاحظة - تجاهل هذه الخطوة إذا كنت قد قمت بالفعل بإضافة  مكتبة jQuery  المدونة الخاص بك) 

 

     1- انتقل إلى لوحة تحكم في blogger > قالب

     2- انقر على تحرير HTML

     3- انقر على زر المتابعة

     4- البحث عن الكود أدناه في القالب

 

</head> 

 

إضافة كود أدناه تماما فوقه،

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

الآن أضيفت لك مكتبة jQuery في المدونة الخاص بك.والآن معرفة كيفية إضافة القطعة المتحرك  لمشاركة الأخيرة لبلوجر  .

 

الخطوة 2: -

    1- انتقل إلى لوحة التحكم الرئيسية > التخطيط بلوجر 

    2- انقر على إضافة أداة

    3- اختر HTML / JavaScript 

 

لصق كود أدناه في داخله،

 

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By stupcomp.blogspot.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By Stupcomp.blogspot.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.stupcomp.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

 

الآن استبدال http://www.Stupcomp.blogspot.com مع URL  مدونتك .

 

تخصيصات القطعة

أدناه أصفه بعض القيم الهامة،

 

numposts = 10؛ مجموع عدد المشاركات التي تريد تمرير بواسطة هذه القطعة

limitspy = 4؛ عدد من المشاركات لتظهر على القطعة

intervalspy = 4000؛ سرعة التمرير من القطعة، وإذا انخفضت سرعة قيمة القطعة يزيد.

 

حفظ التغييرات التي قمت بها أخيرا

اسمحوا لنا أن نعرف رأيك في هذه القطعة.