إضافة كود سلايد شو احترافي لعرض الصور لمدونات بلوجر Blogger

-z@iiid -10:45 ص 0

طريقة سهلة جدا لإضافة أداة سلايد الى مدونات blogger التي تقوم بعرض مواضيع المدونة بشكل الي ومميز مثلما نراه تماما في مواقع الأخبار الكبيرة والتي تعطي طابعا احترافي للمدونة.

أنتقل ألى لوحة تحكم مدونتك.
إختر "تخطيط" ثم قم بإضافة أداة جديدة أختر HTML/javaScript.
أدخل الكود داخل المربع .

نقوم بلصق الكود التالي:

<style type="text/css">
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 468px;
 margin: 0 auto;
        border:3px solid #E1E0E2;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 right: -4px;
}
#slider {
 width: 468px;
 height: 260px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDY-3-f7f_mZPxGEbi8ZunYc8qlqF8W6xoPFUCpXw13bCgl4AIGBatWRzssd_nfYE2tpTOPeQMA8VMOZ5fk60vbVIg6H1NRPmyKYgrCbmoPpLMQOVqnY5yw3PThjSXcgayarcJDzp3A/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px 010007;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 right: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 right: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: #0066CC;
}
div.mc-caption {
 font: bold 25px/21px traditional arabic ;
 color:  #0000;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
div.navBulletsWrapper {
 top: 250px;
 right: 190px;
 width: 150px;
 background: none;
 padding-right: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2NZX43CNUdtw11mnj0JU2njVQVDJOUuP4L18mewfdt_tKtEVIGL8ORr5gjvSbyzWTiRRu11Va4zIsaKM7g3HQApkeHtQk190thzOTb1LiDgj0d1MgwX8-EAcwUOGxqW-Ken9ISJc9A/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
 float: right;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 11px;
 _position: relative;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 
<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon">
</div>
<div id="slider">
<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>
<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>
<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>
<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>
<a href="xxxxxx"><img src="ppppp"alt="ttttt"/></a>
                </div>
</div>

قبل حفظ الأداة نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :

نضع مكان الرمز xxxxx رابط الموضوع (الرابط الإلكتروني للموضوع )

نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)

نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )

ثم نقوم بحفظ الإضافة

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

#slider {

width: 468px;

height: 260px;

لتغيير عرض الأداة width

لتغيير ارتفاع الأداة height

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي :

background-color: #0066CC;

4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :

font: bold 25px/21px traditional arabic ;

الرمز traditional arabic لإستبدال نوع الخط

الرمز 25px حجم الخط .

إرسال تعليق