bloggerarchive
247125322047940
تحميل

اضافة تأثير تكبير الصوره وانزلاق الطبقه الاماميه منها عند تحريك المؤشر فوقها



http://i.imgur.com/mOmQl.png
السلام عليكم ورحمة الله وبركاته.
اقدم لكم في هذا الموضوع كيفية اضافة تأثير جميل على الصوره 
كمت ترا اعلاه فإن الصوره تكبر عند تحريك المؤشر عليها يمكنك

استخدام هذه الاضافة في امور التبادل الاعلاني او قد تستخدم بالنسبه
لمدونات القوالب في عرض تصنيفات القوالب بشكل جميل عبر هذه الاضافه 
وغيرها الاستخدامات المختلفه  تم ترجمة الموضوع من
فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
  ]]></b:skin>
7. قم بلصق الكود التالي فوقه مباشره:
/* The CSS3 image galler by blogger-archive.com */
.photos {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position:relative;}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 70px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 70px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(http://2.bp.blogspot.com/-qVEO5wsEldc/UK2da8k8SoI/AAAAAAAAFrM/fkMs5BixRbU/s1600/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100px;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 15;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 100px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 100px;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 100px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 100px;
}
8. اضغط حفظ.
9.اذهب إلى تخطيط .
10. اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

<div class="photos">
            <div>
                <a href="الرابط" target="blank"><img src="رابط الصوره1" /></a>
                <div></div></div><div>
    
                <a href="الرابط" target="blank"><img src="رابط الصوره2" /></a>
                <div></div><div></div>
           
                <a href="الرابط" target="blank"><img src="رابط الصوره3" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره4" /></a>
                <div></div><div></div>
           
                <a href="الرابط" target="blank"><img src="رابط الصوره5" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره6" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره7" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره8" /></a>
                <div></div> </div>
           
                <div class="pair">
                <a href="الرابط" target="blank"> <img src="رابط الصوره9" /></a>
                <div></div> <div></div>
            </div>
        </div>
 الان عدل " رابط الصوره "  الذي في الكود اعلاه برابط الصوره التي تريدها .
عدل " الرابط  "  الذي في الكود اعلاه برابط الذي تريده ان يفتح عند نقر الشخص على احدى الصور.
واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.
تحياتي.



ما رأيك: 
ويب 4693137402828693073

إرسال تعليق تعليقات الموقع

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!