مدرن اسکین

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

gplus-IMG

 

سلام خدمت همه و همه دوستان عزیز !!!

یکی از کاربران عزیز در قسمت نظرات درخواست کرده بودن کد گوگل پلاس رو تو سایت قرار بدیم برای همین امروز براتون این کد و اموزش رو قرار دادیم که هم میتونین رو وبلاگ خودتون و هم سایت خودتون ازش استفاده کنین امیدوارم لذت ببرین 😉

آموزش  :

– برای ایجاد دکمه گوگل پلاس کد زیر رو قبل تگ <body/> قرار بدین ( کاربران وردپرس میتونن تو فایل Footer.Php  تگ <body/> رو پیدا کنن )

<script src="http://apis.google.com/js/plusone.js" defer>{lang: 'fa'}</script>
<div class="gplus non-mob">
<span><i class="icon"></i></span>
<div><g:plusone size="medium" href="http://modernskin.ir"></g:plusone></div>
</div>

یادتون باشه بجای http://modernskin.ir ادرس سایت خودتون رو باید قرار بدین .

خب فقط کافیه کدهای زیر رو هم به فایل css قالبتون اضافه کنین

/* Start Google Plus */
.gplus {width:130px;text-align:center;margin:0 auto;height:35px;position:fixed;bottom:30px;left:30px;background:#e74c3c;border-bottom:3px solid rgba(0, 0, 0, 0.1);direction:ltr;}
.gplus span:before {content:"";position:absolute;left:30px;top:0px;border-top:35px solid rgba(0, 0, 0, 0.1);border-right:10px solid transparent;}
.gplus span {display:inline-block;width:30px;height:35px;padding-left:5px;padding-top:5px;color:#fff;background:none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);position:absolute;left:0px;top:0px;text-align:center;font-size:25px;}
.gplus span .icon {background: url(http://dl.modernskin.ir/googleplus.png);-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;width:25px;height:30px;display: inline-block;position: absolute;left: 5px;top: 2px;}
.gplus div {margin-top:7px;margin-left:15px ;}
/* End Google Plus */

کاربران وبلاگ یا کسانی که به فایل css قالبشون دسترسی ندارن میتونن بجای کد بالا از کد زیر در داخل تگ <head> </head> قالب خودشون استفاده کنن

<style type="text/css">
.gplus {width:130px;text-align:center;margin:0 auto;height:35px;position:fixed;bottom:30px;left:30px;background:#e74c3c;border-bottom:3px solid rgba(0, 0, 0, 0.1);direction:ltr;}
.gplus span:before {content:"";position:absolute;left:30px;top:0px;border-top:35px solid rgba(0, 0, 0, 0.1);border-right:10px solid transparent;}
.gplus span {display:inline-block;width:30px;height:35px;padding-left:5px;padding-top:5px;color:#fff;background:none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);position:absolute;left:0px;top:0px;text-align:center;font-size:25px;}
.gplus span .icon {background: url(http://dl.modernskin.ir/googleplus.png);-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;width:25px;height:30px;display: inline-block;position: absolute;left: 5px;top: 2px;}
.gplus div {margin-top:7px;margin-left:15px ;}
</style>

 

 

امیدوارم از اموزش لذت برده باشین و ازتون خواهش میکنم درخواست ها , نظرات , پیشنهادات خودتون رو در قسمت نظرات سایت با ما در میان بگزارید 😉 تا دیداری دیگر بدرود . . .

 

به اشتراک بگذارید

  1. مرتضی می‌گه:

    سلام دستتون درد نکنه خیلی ممنونم ازتون . میتونید واسم کد گوگل پلاس سایت بیگ تم .آی آر رو هم آموزشش رو بزارید ؟ از خودشون خواستم یه چیزایی گفتن نفهمیدم .

    • کریم دستیاری می‌گه:

      سلام مرتضی جان خواهش میکنم .
      کد که ما قرار داریم همان کد سایت بیگ تم هس فرق چندان زیادی نمیکنند فقط در سایت بیگ تم دو گزینه هس یکی فقط برای اون صفحه و دیگری هم برای کل سایت .
      برای این که همچین چیزی بسازین فایل زیر رو دانلود کنید
      http://www.modernskin.ir/dl/gplus.txt
      انشالله که مشکلتون حل بشه اگه سوالی بود حتما مطرح کنین فعلا یا علی موفق باشید !

  2. مرتضی می‌گه:

    با سلام
    ممنونم ازتون ولی نمیدونم چرا مثل گوگل پلاس شما کادر نداره و نمایش نمیده کادره +g رو

  3. omid می‌گه:

    Khili KHob bod 😀

  4. RedGFX می‌گه:

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

    • کریم دستیاری می‌گه:

      سلام دوست عزیز .
      کد ها مشکلی ندارن احتمالا شما یه چیزی رو انجام ندادین .
      بخش دوم کدهای css رو حتما در اخر فایل css خودتون قرار بدین و بخش اول یعنی کد های html رو قبل از بسته شدن تگ html سایتتون بزارین اگر وردپرسی باشین میتونین تگ html رو در فایل footer.php خودتون پیدا کنین .

  5. سئو سایت می‌گه:

    خیلی مفید بود . از شما سپاسگزارم .

  6. طراحی سایت می‌گه:

    مطالب بسیار مفید بود ممنون از سایت خوب شما

  7. محمد می‌گه:

    عالی بود 🙂

  8. مینا می‌گه:

    سلام. میتونید واسم کد گوگل پلاس سایت پی سی دانلود رو بسازید ؟
    هم صفحه اول رو میشه ۱+ کرد و هم ضفحه دوم. ممنون میشم اگه امکانش هست برام کدش رو ارسال کنید.


ما را در گوگل حمایت کنید!