مـدونــة سـلـطـان زمــانــى

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

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

معاينة

طريقة التركيب

أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل

ثم ادخل الى تحرير القالب

ابحث عن الوسم]]></b:skin> و الصق فوقه الكود التالي

/* ------ mudwnp Slider ------*/
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider { width:700px;height:306px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jjFl1ZIBw1UMV53v80X-a7vNNUMkliGLibZaLDCzmjVS-YI_Y8eHfac7QUdetYEazVNUded3bImTF24KAOVNqZXV9-v-Kcb49UBpLzSHLABfi6nWuKMvAxVg46VtG0gOBEbXwW9juxg1/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left: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;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
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:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left: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/AVvXsEjgZ7FRL6OXraO1cbQ2627HcHyCU_RT9fk4wQDIDJ4i4qjPkMsyBG3Hl0fZCSc5ZgpOppNTDpvwHbDHxJ5crXAHrb2y6piI_quCcvlHFh9-vUSDUz_hrK7l-lruHhJfHr2w0zg2WgWjxTKt/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
#slider
{
transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
/* ------ mudwnp Slider ------*/

تنسيق السلايدر شو

بالنسبة للرقم 700 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 306px هو إرتفاع السلايد يمكنك تعديله
لتغيير الخط و حجمه قم بتغيير كلمة Arial و الارقام التي بجانبها بالحجم و الخط الذي تريده

وأضف الكود التالي تحت هذا الكود <div id='main-wrapper'>

<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B0wTCJB4dkJ7Y3BZMkNWREd5MUk" type="text/javascript"></script>
<div style="display:none;" ><a href="http://www.infotechblogging.com"></a></div>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO83ENqixI4N8MglabsaUwGGwacM6gbiciwiEJIqAEisLd3r2tFPb_jbV5DUKMkNAXvMef2mKatFcS2EqR3rbEXPnxMNJht-TyCHm3VryfWZSfupVlZNz40MlGWIIK-uVB3lVJbikugfU9/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbTmSX_24z6UULR-85kENu6u-kJuUP5Ga002rHxYtO3RekYdG0uN_hI2gOwgszuQY55hJNoKTUwaSrjelH-9SelIa1rByL9dHn5cAdWQvMmEdMo8lBYOnPM5IK0dd8haF2xXCUJvCVMhU/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWZtOODCjvaQ29yQelmmUqCpYsrv19alqrjcV6h3H4xsDjGrfk_sv5u75ZqRtWga09Y8dq-Rd0bt7a9gcZt71uWZKB7KMjxZcVqwEi_7hsrCliPlPnRGc7bWwusbrR_Ig0QKi2tisO1pV/s1600/lamborghini-car-wallpapers1.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaec-ITTSdGbk4-5vqC-AYVvBC15_U4ulaLUZ7-f0gZJofJlzVp2HafG0w_HfzB36fMgg2wRspnLRARNDBwcIylGwHQ3LuqJ1xMQ3KgousYUVoh4xH5NHdH2Z7rjNKAn6SdOsHgsLfpb6/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGzkAHmYPwCn2-5uLpbcPPeU7KjWeQJVdCmMEbat26U2tvs7IyK732o0VKX9vsVaBkTyQ7hrWuEct5l8bwWN-Rdh8KbhkeLkCTk_u-YYuS53CIGp5VjO7yNQT4qqjB3bgkB2qYzJEUwoB/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/></a>
</div>
</div>

اعدادات السلايد شو

استبدل ما هو باللون الازرق برابط الصورة الذي تريده
استبدل ما هو باللون الاحمر باسم الموضوع او القسم الذي تريده
استبدل ما هو باللون الاصفر # برابط الموضوع او القسم الذي تريده

من يواجه مشكلة في تنسيق او تركيب السلايدر ضعها في التعليق

في امان الله

غير معرف

1:26 م

اقرأ المزيد

فى تدوينه اليوم سنشرح اضافه لايت بوكس Lightbox اسمه Orangebox لبلوجر يتميز بانه قادر على احتواء الصور و الفلاش و اليوتيوب و الفرامات و مشغلات الفيديو و الجاليرى .. و الافضل من هذا هو حجمه الصغير 16kb و يحتوى على اضافه لعمل شير للمحتوى اللى المواقع الاجتماعيه المختلفه

قوم باضافه هذا الكود

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/orangebox/css/orangebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/orangebox/js/orangebox.js"></script>

و اضف مكتبه الجى كويرى ان لم تكن تمتلكها

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

كل هذا طبعا تضيفه فى البودى بعد الـ <body>
او فى الهيدر قبل الـ </head>

الان اذا اردت تفعيل هذه الاضافه يدويا

تعدل الكود الموجود بالاسفل

<a href="large3.jpg"><img src="small3.jpg" /></a>

و تجعله هكذا

<a data-ob_caption="الوصف" data-ob_linkText="العنوان" rel="lightbox" href="small.jpg"><img src="small.jpg" /></a>

اى انك تضيف Rel="lightbox" لتفعيل الاضافه على اى صوره تريدها

و يمكن ان تضيف data-ob_caption="وصف الصوره"
data-ob_linkText="عنوان الصوره"

و اذا اردت تطبيق اى اضافه lightbox اوتوماتيك على صور المدونه , ليس عليك الا قرائه هذا الموضوع ..

غير معرف

8:27 م

اقرأ المزيد

السلام عليكم إخواني أخواتي الكرام ، متتبعي مدونة رانديفو ،في هذه الفقرة سوف نتعلم كيفية إضافة عارضه صور على مدونات بلوجر بتأثيرات jQuery الجميلة ، اضافه جميله يمكنك تعديل طولها و عرضها و استخدامها فى اغراض عده كعارضه صور او اعلانات او كاريكاتير , نبدأ بشرح طريقه وضع الاضافه ..

ضع كود الـ css اعلى كلمه ]]></b:skin>

#slider-bg {
margin: 0;
width : 960px;
background:#fff;
}
#slider-wrapper {
height: 324px;
margin: 0;
padding: 0;
position : relative;
width : 960px;
z-index: 1;
}
#slider {
position :relative;
width : 960px;
height:324px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGo7O0vajOyPHfL_2hoCg0QFdfysda2Cv9M1SOdmLaZQ1HXzvBLvNfKOfYdUKa0flUrMGcX4SiwDY46sxT0h_m-oHrfm5aiYK0_C3V52dtKTalIeUs5QviGvqKEpy3uNxWSPZ49XWy3Ec/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position :absolute;
top:0px;
right:0px;
display :none;
}
#slider a {
border:0;
display :block;
}
.nivo-controlNav {
position :absolute;
right:260px;
bottom:-42px;
display :none;
}
.nivo-controlNav a {
display :block;
width : 22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixcTpzK_dsn2h3rMWRsZqlUfqqlTmnAUiEf9q5qwtb3ZOb9Pj_z0y-hXvZbhMDD5TMl_ucSvA2xZo3dOKRJa87sJSq7Tn8F6B7ZGWbeiiaLOX6EGu357Axm5hLu5P_Ygcowec7pZgXIgA/s1600/l-slider-bullet-normal.png) no-repeat;
text-indent:-9999px;
border:0;
margin-left:3px;
float :right;
}
.nivo-controlNav a.active {
background-position :0 -22px;
}
.nivo-directionNav a {
display :block;
width : 50px;
height:61px;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
left:-18px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJilI8DWfKYXuIp5Vjt74juCND1uSXSzCoThRYjd4xQEB5qB-6TNOJypdE2z4G2X1gu_JHBww6pEzgoDcD_PCLaQnNEzG8enA0Ys5nLREbVOCacY6mKu_V9L9AWSLz5ajNk37731m1qtg/s1600/l-slidernav-right.png') no-repeat;
}
a.nivo-nextNav:hover{
background-position :0 -61px;
}
a.nivo-prevNav {
right:-18px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkxAIDjDQq_KRN93GvTpF4x5b9cdmlzHHhgUM91uoRA0vuNGuEoSFK33wz4WShH9g0VH3TOyi5Pzk_4xVXg7tofiSJWMvvGgV2MI6LYES002YskAGkRpyJ-YSX8kzw8faCPLxHUifRRHU/s1600/l-slidernav-left.png') no-repeat;
}
a.nivo-prevNav:hover{
background-position :0 -61px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
#sliderContent {
margin:50px 50px 0 0;
position : absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#openCloseWrap a {
display : block;
font-size: 13px;
font-weight: bold;
height: 22px;
margin: 0;
position : absolute;
left: 22px;
text-indent: -10000px;
top: 59px;
width : 26px;
}
.nivoSlider {
position :relative;
}
.nivoSlider img {
position :absolute;
top:0px;
right:0px;
}
.nivoSlider a.nivo-imageLink {
position :absolute;
top:0px;
right:0px;
width : 100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display :none;
}
.nivo-slice {
display :block;
position :absolute;
z-index:5;
height:100%;
}
.nivo-box {
display :block;
position :absolute;
z-index:5;
}
.nivo-caption {
position :absolute;
right:0px;
bottom:0px;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width : 100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
text-align:center;
font:italic 29px/32px Georgia;
color:#fff;
font-weight:bold;
}
.nivo-caption p h3{
font-size:22px;
font-style:italic;
color:#f23a66;
font-weight:bold;
line-height:30px;
}
.nivo-caption a {
display :inline !important;
}
.nivo-html-caption {
display :none;
}
.nivo-directionNav a {
position :absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
right:0px;
}
.nivo-nextNav {
left:0px;
}
.nivo-controlNav a {
position :relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

كود الجافا سكربت اسفل <body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: false, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
//]]>
</script>

ضع هذا الكود فى اضافه Html الموجوده فى الهيدر ان اردت لتكون بانر متحرك , او يمكنك اضافتها مباشره من تحرير القالب بعد كلاس الهيدر

تضع الكود هنا <div class="header"><div>

<div id='slider-bg'>
<div id='slider-wrapper'>
<div class='nivoSlider' id='slider'>
<a href='#Link'>
<img height='324' src='http://www.dresshealthytoday.com/wp-content/uploads/2010/11/2-960x360.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquvakMIlq4oeHf0ccNopsRg4HyXnD_AoFCqm829qqp7bTQeLSG-9Hz_1Y8G-p_08z5dSWYsInk8SAjdnuv9I8EfDIw0YtR71qrG9_CSl7aTzY8YtVZadndM20d9GXZS3KMtpMG_4mdJA/s1600/nivo-960-340-2.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.whartonmedia.com/images/960x360_rocksunset.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.shdwi.com/wp-content/uploads/Greens-1155-21-960x360.jpg' width='960'/>
</a>
</div>
</div>
</div>

المشاهده التحميل

غير معرف

8:20 م

اقرأ المزيد

مـدونــة سـلـطـان زمــانــى

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

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

طريقة التركيب

تنسيق السلايدر شو

اعدادات السلايد شو

اضافه سلايد شو Orangebox فى بلوجر

سلايد شو Nivo Slider تصلح كبانر متحرك