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

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

1- ادخل إلى مدونتك / واختر تحرير قالب 

2- ابحث عن الوسم </head>

3- ضع الكود التالي والذي ترغب فوقه

4- ثم احفظ القالب

- النموذج الأول :

• 
• 
• 
• 
• 

الكود :

<style type='text/css'>

#image-gallery {display: none;}

  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}

  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }

#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}

  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}

  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}

</style>

 <script type='text/javascript'>

//<![CDATA[

var gal = {

init : function() {

if (!document.getElementById || !document.createElement || !document.appendChild) return false;

if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';

var li = document.getElementById('jquery-gallery').getElementsByTagName('li');

li[0].className = 'active';

for (i=0; i<li.length; i++) {

li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';

li[i].title = li[i].getElementsByTagName('img')[0].alt;

gal.addEvent(li[i],'click',function() {

var im = document.getElementById('jquery-gallery').getElementsByTagName('li');

for (j=0; j<im.length; j++) {

im[j].className = '';

}

this.className = 'active';

});

}

},

addEvent : function(obj, type, fn) {

if (obj.addEventListener) {

obj.addEventListener(type, fn, false);

}

else if (obj.attachEvent) {

obj["e"+type+fn] = fn;

obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }

obj.attachEvent("on"+type, obj[type+fn]);

}

}

}

gal.addEvent(window,'load', function() {

gal.init();

});

//]]>

</script>

- النموذج الثاني :

الكود :

<style type='text/css'>

#image-gallery { display: none; }

#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }

#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }

#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }

#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }

#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}

</style>

 <script type='text/javascript'>

//<![CDATA[

var gal = {

init : function() {

if (!document.getElementById || !document.createElement || !document.appendChild) return false;

if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';

var li = document.getElementById('jquery-gallery').getElementsByTagName('li');

li[0].className = 'active';

for (i=0; i<li.length; i++) {

li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';

li[i].title = li[i].getElementsByTagName('img')[0].alt;

gal.addEvent(li[i],'click',function() {

var im = document.getElementById('jquery-gallery').getElementsByTagName('li');

for (j=0; j<im.length; j++) {

im[j].className = '';

}

this.className = 'active';

});

}

},

addEvent : function(obj, type, fn) {

if (obj.addEventListener) {

obj.addEventListener(type, fn, false);

}

else if (obj.attachEvent) {

obj["e"+type+fn] = fn;

obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }

obj.attachEvent("on"+type, obj[type+fn]);

}

}

}

gal.addEvent(window,'load', function() {

gal.init();

});

//]]>

</script>

-  بعد ذلك اذهب إلى تخطيط / إضافة أداة  وأضف الكود التالي :

الكود

 <div style="position:relative;">

<ul id="image-gallery">

<li><img src="رابط الصورة1" /></li>

<li><img src="رابط الصورة2" /></li>

<li><img src="رابط الصور3" /></li>

<li><img src="رابط الصورة4" /></li>

<li><img src="رابط الصورة5" /></li>

</ul>

</div>

- في حال كنت بحاجة إلى إضافة وصلات إلى الصور الخاصة بك، وإضافة هذا الهيكل HTML بدلا من ذلك:

الكود

<div style="position:relative;">

<ul id="image-gallery">

<li><a href="رابط الوصلة"><img src=" رابط الصورة" /></a></li>

<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>

<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>

<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>

<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>

</ul>

</div>

- احفظ الإضافة

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر