الرئيسية / blogger / شرح طريقة إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات الblogger

شرح طريقة إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات الblogger

درس اليوم  سبق وأن شرحته و هو شرح كيفية إضافة آخر المواضيع على الblogger مع مصغرات الصور بشكل متحرك رائع – بتقنية jQuery، وذلك بعد أن تلقيت عدد مهم من طلبات الزوار حول هذه الأداة
و كَوْن أن الكود الخاص بها في الموضوع السابق لم يعد يشتغل عند معظم المدونين.

و كما هو معلوم فأداة أحدث المواضيع تساهم بشكل كبير على إبقاء الزائر لأطول مدة ممكنة في تصفح مدونتك، حيث يتم عرض المواضيع بطريقة متحركة و منزلقة بشكل جديد وجذاب مع مصغرات الصور، يمكن ملاحظة مثال حي لهذه الإضافة على هذه المدونة مدونة أفكار Pro، أو على الصورة المتحركة أسفله.

شرح طريقة إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات الblogger
شرح طريقة إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات الblogger

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

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

 

<style type=”text/css” media=”screen”>
<!–
/*
* Recent Post with Spy effect for blogger.com
* Widget Bloggerized By – Rachid El Mokhtari
* URL –  http://www.afkarpro.blogspot.com
* === Scrolling Recent Posts Widget By AfkarPro == */#afkarpro-widget {
overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 285px;
}
#afkarpro-widget ul {
width: 310px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px;
}
#afkarpro-widget li {
float: none; height: 80px; list-style-type: none; margin: 0 0 5px; overflow: hidden; width: 288px; border-bottom: 2px dotted #DDDDDD; border-radius: 10px 10px 10px 10px; border-right: 2px solid #DDDDDD; padding: 5px;
}
#afkarpro-widget li:hover {
border-bottom: 2px dotted #E3671F; border-right: 2px solid #E3671F;
}
#afkarpro-widget li a {
text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px;
}
#afkarpro-widget li a:hover {
color: #e3671f;
}
#afkarpro-widget img {
float: right; margin-top: 10px; margin-right: 0px; background: #EFEFEF; border: 0; margin-left: 10px;
}
#afkarpro-widget img {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 1px; 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: 30px; -moz-border-radius: 30px; border-radius: 30px; -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);
}
#afkarpro-widget img:hover {
-moz-transform: scale(1.1) rotate(-350deg); -webkit-transform: scale(1.1) rotate(-350deg); -o-transform: scale(1.1) rotate(-350deg); -ms-transform: scale(1.1) rotate(-350deg); transform: scale(1.1) rotate(-350deg); -webkit-box-shadow: 0 0 10px #e3671f, inset 0 0 5px rgba(255,255,255,1); -moz-box-shadow: 0 0 10px #e3671f, inset 0 0 5px rgba(255,255,255,1); box-shadow: 0 0 10px #e3671f, 0 0 5px #FFFFFF inset;
}
.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;
}
#mashable a:hover{
color: #e3671f;
}

/* ========== Scrolling Recent Posts Widget By AfkarPro ======== */
–>
</style>

<script language=’JavaScript’>
imgr = new Array();
imgr[0] = “http://4.bp.blogspot.com/-n4ezdD6Hp3s/UhPikJ_jl_I/AAAAAAAAD7E/NBUEK_JmDPw/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png”;
imgr[1] = “http://4.bp.blogspot.com/-n4ezdD6Hp3s/UhPikJ_jl_I/AAAAAAAAD7E/NBUEK_JmDPw/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png”;
imgr[2] = “http://4.bp.blogspot.com/-n4ezdD6Hp3s/UhPikJ_jl_I/AAAAAAAAD7E/NBUEK_JmDPw/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png”;
imgr[3] = “http://4.bp.blogspot.com/-n4ezdD6Hp3s/UhPikJ_jl_I/AAAAAAAAD7E/NBUEK_JmDPw/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png”;
imgr[4] = “http://4.bp.blogspot.com/-n4ezdD6Hp3s/UhPikJ_jl_I/AAAAAAAAD7E/NBUEK_JmDPw/s1600/No-Thumbnail+-+afkarpro.blogspot.com.png”;
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = “#232c35”;
bgTD = “#000000”;
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = “#666″;
aBold = true;
icon = ” “;
text = “هو عدد التعليقات”;
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = “#666″;
icon2 = ” “;
numposts = 15;
home_page = “http://www.xxxxxx.blogspot.com/“;
limitspy=3;
intervalspy=4000;
</script>

<div id=”afkarpro-widget”>
<script src=’http://yourjavascript.com/18159421223/recentposts-afkarpro-blogspot-com.js’ type=’text/javascript’></script>
</div>
<div arial=”arial” helvetica=”helvetica” id=”mashable” sans-serif=”sans-serif” style=”background: #fefefe; border-image: initial; border-top: 2px dotted #e9e9e9; border-bottom: 2px dotted #e9e9e9;font-size: 10px; padding: 1px 8px 1px 3px; text-align: right; border-radius:5px; margin-bottom:0px”>
<a href=”http://afkarpro.blogspot.com/2013/08/Animated-Scrolling-Recent-posts-for-Blogger-with-Thumbnails.html” target=”_blank”> Get it here </a>
</div>

3- قبل حفظ الإضافة قم ببعض التعديلات على الكود حسب رغبتك :

+ قم بتغيير مايلي : http://www.xxxxxx.blogspot.com برابط موقعك أو مدونتك.
+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها.  
+ limitspy: 3 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.
+ showPostDate = true : من هنا يمكنك إظهار أو إخفاء تواريخ المواضيع و ذلك بتغيير القيمة true بـ false.
+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيمة التالية : intervalspy=4000

ملاحظة :
* يستحسن وضع صورة على الأقل في كل موضوع للحصول على مظهرجيد للإضافة.
* تتميزهذه الإضافة بعدم تعارضها مع أي إضافات أخرى على مدونتك.

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

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

 

شاهد أيضاً

قالب بلوجر Sora Tasty

قوالب بلوجر مجانية- قالب بلوجرSora Tasty المعرب

السلام عليكم ورحمة الله وبركاتهمرحبا بزوار ومتابعي مدونة الشهادة مع دقال جديد بعنوان قالب بلوجر …

قالب بلوجر Bpress من أفضل قوالب بلوجر الإخبارية والتقنية والمجلات 2021

قالب بلوجر Bbpress من أفضل قوالب بلوجر الإخبارية والتقنية والمجلات 2023

قالب بلوجر Bpress من أفضل قوالب بلوجر الإخبارية والتقنية والمجلات 2023 قالب بلوجر Bpress من …

قالب nojom من أفضل قوالب بلوجر 2021-BloggerTemplate

قالب nojom من أفضل قوالب بلوجر 2021

قالب nojom من أفضل قوالب بلوجر 2021-BloggerTemplate قالب nojom أفضل قالب بلوجر مجاني بمواصفات مدفوعة …

قالب hot games بلوجر

قوالب بلوجر تحميل اجمل قالب بلوجر hot games

أنت بحاجة إلى قالب بلوجر لمدونتك على شبكة الإنترنت لعملك والتدوين عليها. تحميل اجمل قوالب …

5 تعليقات

  1. Thanks for the intihgs. It brings light into the dark!

  2. I di’ndt know where to find this info then kaboom it was here.

  3. At last! Something clear I can untrdseand. Thanks!

  4. Cialis 40 Mg Amoxicillin Eg https://www.facebook.com/ Vente Lioresal Kamagra Per Nachnahme Achat Lioresal En France

  5. Fantastic items from you, man. I have understand your
    stuff prior to and you’re simply extremely excellent.
    I really like what you’ve received here, certainly like
    what you are saying and the way during which you say
    it. You’re making it enjoyable and you still care for to keep it sensible.

    I can’t wait to read much more from you. That is really a
    terrific site.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.