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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 14 از 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 | #11
    کاربر سایت

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

    پیش فرض

    نه برای گوگل میخوام
    گیج شدم که چی کار کنم

    در ضمن اگه این روش خوبه استفاده کنم اگه روش بهتر و جالبتری هست لطفا معرفی کنین




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

  3. Top | #12
    مدیریت کل سایت

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

    پیش فرض

    من پست اول رو خوندم خیلی خوب توضیح داده شده . شما توی اون صفحات برید و کد خودتون رو بگیرید و جای اون قسمت ها قرار بدید .

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


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

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

    پیش فرض

    اخه تو لینک گوگل میرم برای دریافت کد کدی با سربرگ iframe نداره

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

    ورژن ویبولتین
    4.2
    نوشته ها
    2,262
    میزان امتیاز
    266

    پیش فرض

    لینک گرفتن کد فیسبوک و گوگل خرابه لطفا درستش کنید یا راه حل دیگه ای معرفی کنید....

صفحه 2 از 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)

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

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