گیفت کارت آیتونز
نمایش نتایج: از 1 به 6 از 6

موضوع: » آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Mar 2012
    ورژن ویبولتین
    4.1
    نوشته ها
    55
    مورد پسند
    36 بار
    نوشته های وبلاگ
    3
    اطلاعات
    میزان امتیاز
    13

    Thumbs up » آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery

    در برخی سایت ها دیده اید که تبلیغی در سمت راست یا چپ (بالای سایت) به صورت Flash قرار داده شده است و به محض نگه داشتن موس بر روی تبلیغ, به صورت برگه ای کنار زده می شود و تبلیغ به صورت کامل دیده می شود. در این مطلب قصد داریم نحوه ساخت چنین سیستمی با استفاده از jQuery و CSS را به شما آموزش دهیم.

    در مرحله اول در قسمتی که قرار است تبلیغ نمایش داده شود کد div مورد نظر را قرار می دهیم

    pageflip قالب کلی تبلیغ و msg_block برای نمایش تبلیغ هنگامی که موس بر روی تبلیغ قرار میگیرد می باشد

    مرحله اول: کد نمایش تبلیغ

    فایل subscribe.png تصویر تبلیغ شما می باشد که شما میتوانید تصویر دلخواه خود را قرار دهید.
    کد PHP:
    <div id="pageflip">
        <
    a href="#">
            <
    img src="page_flip.png" alt="" />
            <
    span class="msg_block">Subscribe via RSS</span>
        </
    a>
    </
    div

    مرحله دومایجاد CSS
    [PHP]#pageflip {
        
    positionrelative;
    }
    #pageflip img {
        
    width50pxheight52px;
        
    z-index99;
        
    positionabsolute;
        
    right0top0;
        -
    ms-interpolation-modebicubic;
    }
    #pageflip .msg_block {
        
    width50pxheight50px;
        
    positionabsolute;
        
    z-index50;
        
    right0top0;
        
    backgroundurl(subscribe.pngno-repeat right top;
        
    text-indent: -9999px;

    [/PHP]


    مرحله سوم: جی کوئری

    در ابتدا آخرین نسخه جی کوئری را در قالب خود قرار می دهیم. سپس با استفاده از شناسه class مشخص میکنیم که اندازه تصویر برای نمایش چند پیکسل باشد

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

    //Page Flip on hover

        $("#pageflip").hover(function() {
            $("#pageflip img , .msg_block").stop()
                .animate({
                    width: '307px',
                    height: '319px'
                }, 500);
            } , function() {
            $("#pageflip img").stop()
                .animate({
                    width: '50px',
                    height: '52px'
                }, 220);
            $(".msg_block").stop()
                .animate({
                    width: '50px',
                    height: '50px'
                }, 200);
        });

    });
    </script> 

    شما میتوانید اسکریپت را به صورت آماده دریافت نمایید
    منبع: پرشین اسکریپت


    2 تشکر توسط:

    {امکانات ZGig}

    اگر مطالب این بنده حقیر بدرد شما خورد * می پسندم * یادتون نره .

    +++++++++++++++++++++++++++++++++++++++++

    **************
    انجمن پشتیبانی ( وردپرس ، نیوک ، نصب اسکریپت و )





  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Jul 2012
    ورژن ویبولتین
    2
    نوشته ها
    1
    مورد پسند
    0 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 13.0.782.109
    میزان امتیاز
    0

    پیش فرض

    درود بر شما دوست عزیز
    آقا من این کد ر. باید کجا قرار بدم
    میشه لطفن کمکم کنید
    برا گوشه ی سایتم احتیاج به یه تبلیغات مثلثی دارم مثل همین سایت
    موضوعاتتونم خوندم اما نتونستم
    میشه راهنماییم کنید
    تو فایل استایل که سی اس اس هست باید قرار بدم کدا رو؟

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Oct 2012
    ورژن ویبولتین
    4
    نوشته ها
    1
    مورد پسند
    0 بار
    اطلاعات
    Windows 7/Server 2008 R2 MS Internet Explorer 9.0
    میزان امتیاز
    0

    پیش فرض

    دوستان عزیز چجوری می توانم تبلیغ مثلثی بزارم تو سایتم
    مثل شما چجوری میشه گذاشت

  5. Top | #4
    مدیر بازنشته

    تاریخ عضویت
    Aug 2012
    ورژن ویبولتین
    6 ;)
    سن
    25
    نوشته ها
    1,725
    مورد پسند
    1,535 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 17.0
    میزان امتیاز
    210

    پیش فرض

    درود

    در مورد این اسکریپت اطلاعی ندارم میتونید از کد هایی که در پست اول قرار داده شده استفاده کنید

    ولی اگر کد تبلیغات گوشه سایت مانند وی بی ایران رو میخواین اینم کدش:

    کد:
    <div style="position:fixed;bottom:0px;right:0px;z-index:9999999999;"> <a target="_blank" href="LINK" target="_blank"><img src="LINK AKS" alt="tozihat" height="130" width="130"></a>
    به جای link لینک مقصد قرار میگیره
    به جای link aks لینک بنرتون رو بزارید

    به جای tozihat هم متنی که با قرار گرفتن موس روی بنر نمایان میشه رو مینویسید

    به جای width و height طول و عرض بنر رو مشخص میکنید


    برای مکان های مختلف مثل چپ و راست بودن و بالا و پایین بودن هم کد های bottom:0px;right:0p رو د رکدهای تبلیغات ویرایش کنید

    برای مثال کد های تبلیغاتی که قرار دادم برای پایین سمت راسته اگر بخواین بالا سم چپ بزارید کافیه به جای bottom بنویسید top و به جای right بنویسید left

    2 تشکر توسط:

    گیرم که باخته ام !!!

    اما کسی جرات ندارد به من دست بزند

    یا از صفحهء بازی بیرونم بیندازد

    شوخی نیست من شاه شطرنجم ...
    !!!


    کوروش تو نخواب که ملتت در خواب است آرامگهت غرق به زير آب است اينبار نه بيگانه که دشمن ز خود است صد ننگ به ما که روح تو بيتاب است

    تاپیک ها و آموزش های برتر وی بی ایران نخستین مرجع رایگان وی بولتین در ایران

    http://www.vbiran.ir/thread61255.html

    http://www.vbiran.ir/thread64031.html


  6. Top | #5
    کاربر سایت

    تاریخ عضویت
    Mar 2014
    ورژن ویبولتین
    4.2.2
    نوشته ها
    50
    مورد پسند
    6 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 28.0
    میزان امتیاز
    11

    پیش فرض

    دوستان یکم بیشتر توضیح بدین چطوری باید اینو اضافه کرد؟

  7. Top | #6
    کاربر سایت

    تاریخ عضویت
    Sep 2011
    ورژن ویبولتین
    5
    نوشته ها
    5,336
    مورد پسند
    4,796 بار
    اطلاعات
    Windows XP Firefox 29.0
    میزان امتیاز
    647

    پیش فرض

    نقل قول نوشته اصلی توسط moas نمایش پست ها
    دوستان یکم بیشتر توضیح بدین چطوری باید اینو اضافه کرد؟
    در پست اول توضیح داده شده و اسکریپت آماده هم قرار دادند .

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. اموزش کامل قرار دادن تبلیغات
    توسط Overlord در انجمن آموزش های وی بولتین
    پاسخ: 97
    آخرين نوشته: 2014/08/13, 01:25 PM
  2. پاسخ: 2
    آخرين نوشته: 2013/09/10, 03:33 PM
  3. آموزش کد قرار دادن تبلیغات متنی در سایت
    توسط Zirmizi در انجمن آموزش های وردپرس
    پاسخ: 3
    آخرين نوشته: 2012/07/11, 08:03 PM
  4. پاسخ: 3
    آخرين نوشته: 2012/02/07, 12:33 PM
  5. پاسخ: 9
    آخرين نوشته: 2011/12/15, 09:57 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •