• الرئيسية صور إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

    إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

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


    انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
    قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F). 
    ]]></b:skin>


    ثم قم بإضافة هذا الكود قبله مباشرة :
    ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 10px;
    width: 360px;
    }
    ul.thumb li {
    margin: 0; padding: 5px;
    float: left;
    position: relative; 
    width: 110px;
    height: 110px;
    }
    ul.thumb li img {
    width: 100px; height: 100px; 
    -ms-interpolation-mode: bicubic; 
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;
    }
    ul.thumb li img.hover {
    background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;  
    border: none; 
    }
    بعد ذلك إبحث عن هذا الكود :

    </head>
     ثم ألصق الكود التالي قبله :

    <script src='http://code.jquery.com/jquery-latest.js'
    type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){

    //Larger thumbnail preview

    $(&quot;ul.thumb li&quot;).hover(function() {
    $(this).css({&#39;z-index&#39; : &#39;10&#39;});
    $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
    .stop()
    .animate({
    marginTop: &#39;-110px&#39;,
    marginLeft: &#39;-110px&#39;,
    top: &#39;50%&#39;,
    left: &#39;50%&#39;,
    width: &#39;174px&#39;,
    height: &#39;174px&#39;,
    padding: &#39;20px&#39;
    }, 200);

    } , function() {
    $(this).css({&#39;z-index&#39; : &#39;0&#39;});
    $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
    .stop()
    .animate({
    marginTop: &#39;0&#39;,
    marginLeft: &#39;0&#39;,
    top: &#39;0&#39;,
    left: &#39;0&#39;,
    width: &#39;100px&#39;,
    height: &#39;100px&#39;,
    padding: &#39;5px&#39;
    }, 400);
    });

    //Swap Image on Click
    $(&quot;ul.thumb li a&quot;).click(function() {

    var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
    $(&quot;#main_view img&quot;).attr({ src: mainImage });

    });

    });<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
    </script>
     والآن قم بحفظ القالب

    انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

    <ul class="thumb">
    <li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
    </ul>
    مع إدخال رابط المعلن ورابط البنر الخاص به مكان الرابط الأزرق
    في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء كان  معكم محمد بقلوله

    وفى الختام اذا أعجبك الموضوع اترك بصميك من فضلك ( بتعليق و شارك الموضوع ) مع أصحابك لا تجعل العلم يتوقف عندك

    + مشاركه

    الكاتب : Unknown

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

    ليست هناك تعليقات:

    إرسال تعليق

    الاشتراك في: تعليقات الرسالة (Atom)

    تابعنا على الفيس بوك

    آخر تعليقات الزوار


    جميع الحقوق محفوظة لمدونة gffgggggggggg 2015 - 2016
    تطوير : مدونة الموســوعة