إضافة أزرار المشاركة الاجتماعية لجميع صور بلوجر ووردبرايس | مدونة هوم بلوجر

إضافة أزرار المشاركة الاجتماعية  لجميع صور بلوجر ووردبرايس 

طريقة تركيب الإضافة

1- ادخل إلى مدونتك | ثم أختر تحرير قالب .

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

3- ضع كود الإستايل الذي أخترته فوق الوسم  السابق .

4- احفظ القالب  وتمتع بالإضافة .

- Default Theme

الكود

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.slingpic.com/js/slingpic.plugin.js"></script>
<script>
jQuery(window).load(function(){
jQuery("img").slingPic();
});
</script>

- Dark Theme

الكود

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.slingpic.com/js/slingpic.plugin.js"></script>
<script>
jQuery(window).load(function(){
jQuery("img").slingPic({
theme: "dark"
});
});
</script>

- Light Theme

الكود

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.slingpic.com/js/slingpic.plugin.js"></script>
<script>
jQuery(window).load(function(){
jQuery("img").slingPic({
theme: "subtle"
});
});
</script>

كود الزووم بالتأثير على صور بلوجر | مدونة هوم بلوجر

طريقة تركيب الإضافة

1-  ادخل إلى مدونتك | ثم أختر قالب | ثم أختر تخصيص كما بالصورة :

2- بعد ذلك أختر متقدم | ثم إضافة CSS |  ومن ثم الصق الكود في الصندوق .

الكود

/* CSS image zoom effect http://www.expertsprogram.tk */
.post img {
height:50%;
width: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height: 100%;
}
/*CSS image zoom effect http://www.expertsprogram.tk */

كود التأثير على صور| مدونة هوم بلوجر

طريقة تركيب الإضافة 

1- ادخل إلى مدونتك  | ثم أختر قالب | ثم أختر تخصيص كما بالصورة .

2- بعد ذلك أختر متقدم  | ثم أختر إضافة CSS |  ثم الصق الكود في الصندوق كما في الصورة .

الكود

/* CSS Image Morph http://www.expertsprogram.tk */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.expertsprogram.tk */