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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 14

مقاله: آموزش قرار دادن +1 گوگل و لایک فیس بوک در تمام صفحات با Jquery و CSS3

    1. آموزش قرار دادن +1 گوگل و لایک فیس بوک در تمام صفحات با Jquery و CSS3 »

      آموزش قرار دادن +1 گوگل و لایک فیس بوک در تمام صفحات با Jquery و CSS3

      نگارش: , by (مدیر بازنشسته)
      2012/05/11 01:12 PM
      امتیاز: 

      سلام

      می تونین +1 و لایک اف بی رو به صورت کشویی در حاشیه ی فرومتون به صورت position:fixed بذارید تا تو همه ی صفحات باهاتون بیاد

      این کد هایی که می خوام بذارم بستگی به پهنای doc تون داره ! واسه همین در صورت نیاز باید خودتون کمی در کد های CSS تغییر ایجاد کنین ! فایل HTML ش رو هم پیوست می کنم که ببینید چطور کار می کنه این زبون بسته

      خوب:

      1- برید توی قالب header ، بعد <div class="above_body"> رو پیدا کنید و این کد هارو زیرش اضافه کنید :

      کد:
      <!------------------SideLinks starts here-------------------->
      
      <span class="slide"  name="" id="clicky"><span class="sideicons"><img src="http://www.youSITE.com/forum/images/sidelinks.png" ></span></span><br> <br>
      
      <div id="slide">
      
      <div id="open">
      <div>
                          <!-- Place this tag where you want the +1 button to render -->
      
      ******************************************************************************
      
                      <!-- Place this render call where appropriate -->
                      
      </div>
      
      
      </div>
      
      <div id="open">
      
      ##########################################################
      
      </div>
      
      </div>
      
      
      
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(function(){
          var s = $('#slide'), w = $(s.find('#open')[0]).width();
          s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
          $('#clicky').toggle(function(){
                  s.stop().animate({width: w}, {duration: 'slow', queue: false});
              }, function(){
                  s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
          });
      });
      </script>
      
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      
      <script type="text/javascript">
                        (function() {
                          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                          po.src = 'https://apis.google.com/js/plusone.js';
                          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                        })();
      </script>
      
      
      
      
      <!------------------SideLinks ends here-------------------->
      2- به جای **** ها کد +1 گوگل خودتون رو بذارید و به جای #### هم کد لایک فیس بوکتون رو بذارید.

      واسه گرفتن کد +1 به این لینک برید : +1 Your Website - Google

      و برای گرفتن کد لایک اف بی به این لینک : Improve Your Experience | Facebook

      توجه : وقتی کد لایک رو می گیرید ( وقتی روی Get Code کلیک می کنید ) 3 تا کد می ده که ترجیحا کد های iframe شو قرار بدید.



      3- حالا برید توی Additional.css و این کد هارو پایینش اضافه کنید :


      کد:
      #slide {
      
      float:right;
      width:60px;
      height:300px;
      background:none;
      margin-right:1000px;
      margin-top:256px;
      position:fixed;
      
      }
      
      #next {
      
      float:right;
      width:50px;
      height:200px;
      background:red;
      margin-left:20px;
      
      }
      
      .slide {
      
      height:100px;
      width:0px;
      margin-top:40px;
      margin-right:968px;
      margin-top: 277px;
      position:fixed;
      
      
      
      }
      
      .sideicons {
          
          white-space:nowrap;
          font-family:Tahoma;
          font-size: 15px;
          margin-left:-15px;
          margin-bottom:-40px;
      }

      4- تموم شد

      همونطور که گفتم، بعد از اینکه این کد هارو گذاشید شاید جای این toggle slide خوب نباشه که باید کد های CSS رو دست کاری کنید.
      از این Toggle Slide می تونین واسه کذاشتن خیلی چیز های دیگه توش استفاده کنید هر چیزی که توی <div id="open"> </div> قرار بدید داخل این اسلاید میره. مثلا می تونید لینک های صفحه ی FB یا G+ یا RSS تون رو توش بزارید ! واسه همین اسمشو گذاشتم SideLinks

      اگر دیدبن اسلاید ، لایک فیس بوکتون رو نشون نمیده، width شو که تو خود کد های HTML لایک فیس بوکتون هست ،دست کاری کنید درست می شه. البته حتما می دونید که لایک فیس بوک رو بدون هیلتر *** نمی بینید ...

      -- این فایل HTML ی که گذاشتم توش لایک و +1 2 تا سایت رو برای مثال گذاشتم
      -- عکس رو هم در فولدر images تون کپی کنید. البته در کد های HTML به جای www.yourSITE.com/forum لینک انجمن خودتون رو بزارید.
      تصاویر پیوست شده
      فایل های پیوست شده
      ویرایش توسط HolyMOoN : 2012/05/11 در ساعت 05:34 PM
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    5,334
    میزان امتیاز
    645

    پیش فرض

    ممنون

    لطفا یه دمو یا شات میدید؟

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

    ورژن ویبولتین
    4.1.2
    نوشته ها
    32
    میزان امتیاز
    0

    پیش فرض

    فایل هاش چی ؟! عکس نداره!!!؟؟

    کاربر مقابل از Pure بابت این پست مفید تشکر کرده است:


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

    ورژن ویبولتین
    4.1.10
    نوشته ها
    175
    میزان امتیاز
    26

    پیش فرض

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

    -- عکس رو هم در فولدر images تون کپی کنید. البته در کد های HTML به جای www.yourSITE.com/forum لینک انجمن خودتون رو بزارید.
    ممنون

    لطفا یه دمو یا شات میدید؟
    فایل HTML شو گذاشتم. چشم دمو آنلاین هم می ذارم فقط صبر کنید من یک جا وی بی نصب کنم
    ویرایش توسط HolyMOoN : 2012/05/11 در ساعت 05:33 PM

    کاربر مقابل از HolyMOoN بابت این پست مفید تشکر کرده است:


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

    ورژن ویبولتین
    4.2
    نوشته ها
    569
    میزان امتیاز
    65

    پیش فرض

    چرا نمیشه کد google +1 و گرفت؟

  5. Top | #6
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,667
    میزان امتیاز
    3114

    پیش فرض

    یعنی چی نمیشه گرفت ؟

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

    ورژن ویبولتین
    4.2
    نوشته ها
    569
    میزان امتیاز
    65

    پیش فرض

    جایی نداره که سایتمو بهش معرفی کنم

  7. Top | #8
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,667
    میزان امتیاز
    3114

    پیش فرض

    نیازی نیست سایتتون رو معرفی کنید خودش URL پیج رو میفهمه دیگه .

    کاربر مقابل از VBIran بابت این پست مفید تشکر کرده است:


  8. Top | #9
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    569
    میزان امتیاز
    65

    پیش فرض

    خب اگه زحمتی نیست داخل این لینک برین بگین من باید کدوم کد رو بگیرم تو پستاول گفته:

    توجه : وقتی کد لایک رو می گیرید ( وقتی روی Get Code کلیک می کنید ) 3 تا کد می ده که ترجیحا کد های iframe شو قرار بدید.

    اما ifrme توش پیدا نکردم

    این لینکهشه که تو پست اولم هست

    +1 Your Website - Google

    کلا بگین چه جوریه اون طصفه نمیفهمم چی کار کنم

  9. Top | #10
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,667
    میزان امتیاز
    3114

    پیش فرض

    لایک که واسه فیس بوکتون هست !

صفحه 1 از 2 12 آخرینآخرین

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

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

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

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

  1. » آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery
    توسط رضوان در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 5
    آخرين نوشته: 2014/05/11, 08:00 AM
  2. -XMedia Darkness- with *CSS3 Fonts* - Vb English Style - 4.1.12
    توسط P4NiSh3R در انجمن استایل انگلیسی 4.1 | English Style
    پاسخ: 2
    آخرين نوشته: 2012/05/10, 11:04 PM
  3. پاسخ: 3
    آخرين نوشته: 2012/02/07, 01:33 PM
  4. پاسخ: 9
    آخرين نوشته: 2011/12/15, 10:57 PM
  5. پاسخ: 1
    آخرين نوشته: 2011/04/27, 05:50 PM

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

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

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

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

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