تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

مقاله: Tooltip بسیار زیبا در ویبولتین | ریپ شده

    1. Tooltip بسیار زیبا در ویبولتین | ریپ شده »

      Tooltip بسیار زیبا در ویبولتین | ریپ شده

      نگارش: , by (کاربر سایت)
      2014/06/24 03:49 PM
      امتیاز: 

      با عرض سلام خدمت دوستان عزیز وی بی ایران

      خب بریم سراغ آموزش:

      دمو: موس رو روی لوگوی دو استاد ببرید مشاهده میکنید--> انجمن تخصصی و آموزشی دواستاد
      البته با یه افکت خاصی نمایان میشه
      شات:




      آموزش:

      1. به قالب headinclude بروید و آخرش اضافه کنید :

      کد:
      <script type='text/javascript'  src='http://www.dl.2ostad.ir/uploads/140360197860712.js'></script><script  type="text/javascript"  src="http://dl.2ostad.ir/uploads/140360213960972.js"></script>
      فایل جاوا اسکریپ موجود در کد بالا رو میتونید در یک جای دیگه (آپلودر خودتون) آپلود و لینک رو تغییر بدید.

      2 . به قالب Additional.css بروید و تهش اضافه کنید :

      کد:
      #tooltip {
          
      -webkit-border-radius: 3px;
          
      -moz-border-radius: 3px;
          
      -ms-border-radius: 3px;
          
      -o-border-radius: 3px;
          
      border-radius: 3px;
          
      -webkit-box-shadow: 0px 0px 5px rgba( 0,0,0,.3 );
          
      -moz-border-box-shadow: 0px 0px 5px rgba( 0,0,0,.3 );
          
      -ms-box-shadow: 0px 0px 5px rgba( 0,0,0,.3 );
          
      -o-box-shadow: 0px 0px 5px rgba( 0,0,0,.3 );
          
      box-shadow: 0px 0px 5px rgba( 0,0,0,.3 );
          
      background: rgba(50, 50, 50, 0.76);
          
      font: 13px CssNevis,Tahoma;
          
      color: #f3f3f3;
          
      position: absolute;
          
      z-index: 100;
          
      padding: 2px 8px;
          
      animation: rubberBand 1s;
          
      -webkit-animation: rubberBand 1s;
          
      -moz-animation: rubberBand 1s;
          
      -ms-animation: rubberBand 1s;
          
      -o-animation: rubberBand 1s;
          
      
      }
      
      
      @-webkit-keyframes rubberBand{
          0%{
              -webkit-transform:scale(1);
              transform:scale(1)
          }
      
          30%{
              -webkit-transform:scaleX(1.25) scaleY(0.75);
              transform:scaleX(1.25) scaleY(0.75)
          }
      
          40%{
              -webkit-transform:scaleX(0.75) scaleY(1.25);
              transform:scaleX(0.75) scaleY(1.25)
          }
      
          60%{
              -webkit-transform:scaleX(1.15) scaleY(0.85);
              transform:scaleX(1.15) scaleY(0.85)
          }
      
          100%{
              -webkit-transform:scale(1);
              transform:scale(1)
          }
      
      }
      
      @-moz-keyframes rubberBand{
          0%{
              -moz-transform:scale(1);
              transform:scale(1)
          }
      
          30%{
              -moz-transform:scaleX(1.25) scaleY(0.75);
              transform:scaleX(1.25) scaleY(0.75)
          }
      
          40%{
              -moz-transform:scaleX(0.75) scaleY(1.25);
              transform:scaleX(0.75) scaleY(1.25)
          }
      
          60%{
              -moz-transform:scaleX(1.15) scaleY(0.85);
              transform:scaleX(1.15) scaleY(0.85)
          }
      
          100%{
              -moz-transform:scale(1);
              transform:scale(1)
          }
      
      }
      
      @keyframes rubberBand{
          0%{
              -webkit-transform:scale(1);
              -ms-transform:scale(1);
              transform:scale(1)
          }
      
          30%{
              -webkit-transform:scaleX(1.25) scaleY(0.75);
              -ms-transform:scaleX(1.25) scaleY(0.75);
              transform:scaleX(1.25) scaleY(0.75)
          }
      
          40%{
              -webkit-transform:scaleX(0.75) scaleY(1.25);
              -ms-transform:scaleX(0.75) scaleY(1.25);
              transform:scaleX(0.75) scaleY(1.25)
          }
      
          60%{
              -webkit-transform:scaleX(1.15) scaleY(0.85);
              -ms-transform:scaleX(1.15) scaleY(0.85);
              transform:scaleX(1.15) scaleY(0.85)
          }
      
          100%{
              -webkit-transform:scale(1);
              -ms-transform:scale(1);
              transform:scale(1)
          }
      
      }

      3. حالا به Div یا img یا ul یا li که خواستید تولتایپ به خودش بگیره ، به این صورت ایجاد کنید:

      کد:
      rel="tooltip" title="متن مورد نظر شما"
      به طور مثال:

      کد:
      <div  rel="tooltip" title="این متن به حالت تولتایپ نمایش داده میشود !"></div>



      لازم به ذکر است این تولتایپ رو امروز ریپ زدم از انجمن سی اس اس نویس --> مرجع تخصصی سی اس اس در ایران

      / MahdiYar

      موفق باشید !!!!
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.2.2 DGT
    نوشته ها
    96
    میزان امتیاز
    15

    پیش فرض

    توی استایل VBIran V5 یا V6 این بود نیازی به ریپ نبود !

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

    ورژن ویبولتین
    4.2.0
    نوشته ها
    313
    میزان امتیاز
    35

    پیش فرض

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

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

    ورژن ویبولتین
    4.2
    نوشته ها
    12
    میزان امتیاز
    0

    پیش فرض

    دوست عزیز ریپ زدی؟

    این تولتیپ رو خودشون گذاشتن که

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

    ورژن ویبولتین
    1.1
    نوشته ها
    20
    میزان امتیاز
    0

    پیش فرض

    داداش من این قسمتو متوجه نشدم ( ای قسمتو کجا باید وارد کرد )

    3. حالا به Div یا img یا ul یا li که خواستید تولتایپ به خودش بگیره ، به این صورت ایجاد کنید:

    کد:

    rel="tooltip" title="متن مورد نظر شما"

    به طور مثال:

    کد:

    <div rel="tooltip" title="این متن به حالت تولتایپ نمایش داده میشود !"></div>





  5. Top | #6
    مدیر بخش

    ورژن ویبولتین
    4.2.1
    نوشته ها
    6,595
    میزان امتیاز
    808

    پیش فرض

    نقل قول نوشته اصلی توسط razmjo نمایش پست ها
    داداش من این قسمتو متوجه نشدم ( ای قسمتو کجا باید وارد کرد )

    3. حالا به Div یا img یا ul یا li که خواستید تولتایپ به خودش بگیره ، به این صورت ایجاد کنید:

    کد:

    rel="tooltip" title="متن مورد نظر شما"

    به طور مثال:

    کد:

    <div rel="tooltip" title="این متن به حالت تولتایپ نمایش داده میشود !"></div>




    درود

    قالب فعلی وی بی ایران رو مثال میزنم و شما میخواید به لوگو هدر تولیپ بدید باید به صورت زیر عمل کنید :

    کد:
    <div class="logo-container" rel="tooltip" title="متن مورد نظر شما"></div>
    دیگه نمیتونم از این واضح تر بگم

    یه ذره از کدنویسی سر در بیارید میتونید اوکی کنید
    ویرایش توسط FoX FuN : 2014/07/03 در ساعت 10:34 AM

    3 تشکر توسط:


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

    ورژن ویبولتین
    4.2.2
    نوشته ها
    93
    میزان امتیاز
    12

    پیش فرض

    درودکارآمد بود فقط یه مشکل دارم چرا یه بار نشون میده مثلا من میرم سر بنر
    موس رو نگه میدارم تولتیپ مینویسه بنر بعد موس رو میبرم پایین دوباره
    میبرم سرش نشون نمیده تولتیپو امیدورم فهمیده باشید و کمکم کنید

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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 301
    آخرين نوشته: 2016/07/08, 02:06 AM
  2. پاسخ: 43
    آخرين نوشته: 2014/04/29, 10:58 AM
  3. پاسخ: 21
    آخرين نوشته: 2013/04/03, 09:39 AM
  4. پاسخ: 14
    آخرين نوشته: 2012/04/29, 07:04 PM

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

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

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

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