السلام عليكم ورحمة اللة وبركاتة
اضافة اداة مواضيع جديدة مع الصور على بلوجر
أداة عصرية تعطي للمدونة جمالية واحترافية اكثرحيث تسهل على الزوار اكتشاف المواضيع الجديدة بطريقة اسهل
ما يميز الاداة انها تضهر مواضيع مدونتك بصور متحركة يعني أنها تعرض عدد معين من المواضيع لوقت معين ثم تبدا تلقائيا بسحب موضرع من الأسفل واضهار موضوع جديد من الأعلى وهكذا.
مثال حي للاضافه
كيفية اضافة هذه القطعه الى مدونتك
انتقل إلى لوح تحكم مدونتك،
إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
والآن الصق داخل المستطيل الكود التالي :
#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/AVvXsEjhFSgDDJabrVoGNJOhB1GC623ps2sGjRSg4V8L5AS4B0_o1q60ypV8EZkO9Mp1dsij4WgPkRV1FEiKXCK1ANaqPCdOKzPkVJh3vuPDL0Il7rICKu8foseTDv50xtEAOWAn-sOlMHiCpco/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;
}
تخصيص القطعه
- والان الخطوة الأهم : يجب عليك تبديل عنوان المدونة باللون الورديhttp://school-asrar.blogspot.com/ بعنوان مدونتك
- لتغيير طول الاضافه height: 385px
- لتغيير عرض القطعة: width: 295px;؛ width: 282px؛
- لتغيير حجم الخط- fntsize
- لتغيير اللون - acolor
- لتغيير سمك الخط - aBold
- numposts = 10; هذه القيمة تمثل عدد المواضيع التي يمكن تؤيتها .
- لتغييرسرعة الانزلاق للقطعه، intervalspy = 4000
ارجو ان تنال القطعة اعجابكم
لعرض هذه الاضافه قبل اضافتها الى مدونتك قم ينسخ الكود والصقه في محرر الكود لمدونةمدرسة اسرار الانترنت من هنا
مواضيع ذات صله
اضافات بلوجر
اذا لم تجد المطلوب في الصفحة يمكنك البحث هنا في جوجل للتحويلك الي موضوع اخر
الرئيسية تحويل الاكوادإخفاء الابتساماتإخفاء