تحديث إضافة أداة "مواضيع جديدة" مع الصور على بلوجر
السلام عليكم إخواني الكرام , الكثير من المدونين يبحثون على هده الاداة الرائعة والجدابة لمدونات بلوجر,فهي أداة عصرية تعطي للمدونة جمالية واحترافية اكثرحيث تسهل على الزوار اكتشاف المواضيع الجديدة بطريقة اسهل
ما يميز الاداة انها تضهر مواضيع مدونتك بصور متحركة يعني أنها تعرض عدد معين من المواضيع لوقت معين تم تبدا تلقائيا بسحب موضرع من الأسفل واضهار موضوع جديد من الأعلى وهكذا، ،لن أطيل عليكم أعزائي الكرام .
مثال حي للاضافه
كيفية اضافة هذه القطعه الى مدونتك
انتقل إلى لوح تحكم مدونتك،
إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
والآن الصق داخل المستطيل الكود التالي :
إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
والآن الصق داخل المستطيل الكود التالي :
<style type="text/css" >
#spylist-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
font-family:calibri;
}
#spylist-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#spylist-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPA7iDdZu6jmorzVKqaepNUgd6oxnXRtv95Ql-lhvLRKJvgO-O_vkZ2P1iDDHRa1fEanJrndXjhmxvaOapenerMCggEh9TYZou1phZS65u4Em9EhD9izLata8wuPUW5XWn3_kzcSylEA/s320/latesthack.com-.jpg) repeat-x;
border: 1px solid #ddd;
}
#spylist-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#spylist-widget img {
float: left;
margin-top: 5px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
-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);
}
#spylist-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;
}
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRx3lFImVyzN00Ew99KsR7jkHNu2iK7H-lG7hyphenhyphenU1CTM8MUhyPeeVDlemRmwkoG5jY2WdIqDHWY6p0iZLnaOkgboQ7tGJL78VpQII3sYbdy5GjRhogDkG_Wz6sKlf5cjOlq6YJQq-0ZEMc/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://alb33dani.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<center><div id="spylist-widget">
<script src='http://latest-hacks.googlecode.com/svn/gadgets/scrollingrecentposts/scrollingrecentposts.js' type='text/javascript'></script></center>
</div>
تخصيص القطعه
- والان الخطوة الأهم : يجب عليك تبديل عنوان المدونة باللون الورديhttp://alb33dani.blogspot.com بعنوان مدونتك
- لتغيير طول الاضافه height: 385px
- لتغيير عرض القطعة: width: 295px;؛ width: 282px؛
- لتغيير حجم الخط- fntsize
- لتغيير اللون - acolor
- لتغيير سمك الخط - aBold
- numposts = 10; هذه القيمة تمثل عدد المواضيع التي يمكن تؤيتها .
- لتغييرسرعة الانزلاق للقطعه، intervalspy = 4000
وبالاخير أتمنى أن تنال إعجابكم وأنتظر تشجيعاتكم
لعرض هذه الاضافه قبل اضافتها الى مدونتك قم ينسخ الكود والصقه في محرر الكود لمدونة جلال البعداني من هنا
الكود لا يعمل
ردحذفاخي الكريم الكود يعمل بكفائه
حذفولتجربته قبل اضافته لمدونتك قم باستخدام هذه الاداه
http://www.alb33dani.com/p/blog-page_15.html
جزاك الله كل خير وبارك الله فيك
ردحذفلدي مشكلة في القالب اعتقد ؟
ان هذه الاضافة واي اضافة متحركة .. ما تتحرك عندي ...
تكون جامدة .. مالسبب ؟؟
بارك الله فيك . افدنى
الكود يعمل بنجاح ولكن عند تفعيل .. يتوقف الاسلايدر الرئيسى عن العمل ....
ردحذفاخي هذا الكود لا يتوافق مع القالب الذي تستخدمه
حذفتتداخل الاكواد فيما بينها
جزاك الله خيرا :)
ردحذفالله يرضى عليك ,شكرا لك
حذفللاسف اى كود بضيفه بيخلى السلايد شو يتوقف :(
ردحذفالكوــــــــــــــــد لايعمل أخ جلال البعداني أرجوك فعالي الكود سم المدونة mobarmi.blogspot.com
ردحذفGeekazeddine.tk
(p) (p) (p) (p) (p) (p) (p) (p) (p) (p) (p) (p)
ردحذفعندما اقوم بأضافه رابط مدونتي تقوم الاضافه لا تعمل
;-( ;-( ;-( ;-( ;-( ;-( ;-( ;-( ;-( ;-( ;-(
جزاك الله كل الخير
ردحذفالكود يعمل بنجاح على موقع استضافة
أزال المؤلف هذا التعليق.
ردحذفهدا كود جربته على موقع استضافة يعمل بنجاح وبدوون المشاكل .. والحمد الله
ردحذفشكرا جزيلا على مجهودك الرائع
حبايب شهر مبارك عليكم و هذه مدونتي شو رأيكم http://omarali41.blogspot.com
ردحذفاخي عاكد مايتغير الحجم لماذا
ردحذفشكراااااااااااااااااااااااااااااااااااااا تم التطبيق بنجاح
ردحذفمشكور .... الكود يعمل جيدا
ردحذفشكرا كثير
ردحذف