اضافة سلايدر تلقائي جميل الى مدونة بلوجر

اضافة سلايدر تلقائي جميل الى مدونة بلوجر

اضافة سلايدر تلقائي جميل الى مدونة بلوجر

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

الأن نذهب الى كيفية اضافة هذا السلايدر

ندخل الى لوحة التحكم بلوجر نختار المدونة التي تريد اضافة هذا السلايد شو ثم نمر الىقائمة التخطيط 
بعد ذلك نختار مكان ظهور السلايدر ثم نضغط على اضافة أداة ثم HTML/JavaScipt كما هو موضع في الصورة التالية

الأن الكود الخاص بالسلايدر 

<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
"/var AutoCoinConfig = { url_blog: "http://www.elmotamaize.co.vu
 MaxPost: 8,
 cmtext: "تعليقات",
 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "comment number",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'السابق',
 nextText: 'التالي'
};
</script>
<script src="https://dl.dropboxusercontent.com/s/ps6ipd33yf46hti/slider-www-madad2-com.js" type="text/javascript"></script>
غير رابط مدونتي الملون بالأحمر الى رابط مدونتك
اضغط على حفظ 
ان شاء الله عجبكم الشرح اذا وجدت أي مشكل اطرحه في تعليق و سأحاول حله 
الى اللقاء

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة ل موسوعة المعلوميات 2017