اضافه کردن دکمه +1 گوگل پلاس گوشه سایت یا صفحه

در اين بخش مي‌توانيد در مباحث مربوط به برنامه نويسي تحت وب به بحث بپردازيد

مدیران انجمن: athlon64x2, abbas.m.k, شوراي نظارت

ارسال پست
Captain II
Captain II
نمایه کاربر
پست: 734
تاریخ عضویت: پنج شنبه 8 اسفند 1387, 1:21 am
سپاس‌های ارسالی: 4039 بار
سپاس‌های دریافتی: 2783 بار
تماس:

اضافه کردن دکمه +1 گوگل پلاس گوشه سایت یا صفحه

پست توسط Erratic » شنبه 23 شهریور 1392, 12:27 pm

همونطور که میدونید یکی دیگر از سرویس های گوگل، دکمه +1 گوگل پلاس اون هستش که میتونه یکی از رکن های سایت شما در زمینه سئو باشه.
کاربران شما بدینوسیله به سایت یا صفحه شما امتیاز میدهند و این امر باعث میشه که شما در گوگل محبوب بشید.
برای قرار دادن این دکمه شیوه های متفاوتی وجود داره اما در اصل همه شون یکی هستن. قصد من اینه که به شما یکی از زیباترین این دکمه ها رو همراه با توضیحات برای تغییر دادنش به شما آموزش بدم پس همراه ما باشید.
روشی که قراره یاد بگیریم روش استایل داخلی این دکمه هست بنابراین:


ابتدا این کد رو:

کد: انتخاب همه

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

در تگ:

کد: انتخاب همه

</head>

و در پایانش قرار میدیم میتونید اون رو زیر این تگ هم قرار بدید که از نظر شخصی من اینکارو بکنید بهتره


بعد کد زیر رو:

کد: انتخاب همه

<p align="center"><font face="tahoma">دموی دکمه گوگل پلاس</center></font></p>
<div style="position:fixed; right:92.7%; top:85.8%; float:left; border:1px #111 solid; padding:7px; background:#e8e8e8; width:64px; border-radius: 10px;
-moz-border-radius: 10px; font-family:tahoma; font-size:11px; "><div><center>امتیاز دهید</center></div> &nbsp<center><g:plusone size="tall"></g:plusone></a></center></div>


قبل از این تگ:

کد: انتخاب همه

</body>


در صفحه مون قرار میدیم


اگر از وردپرس استفاده میکنید میتونید تگ <head> رو در فایل header.php و تگ </body> رو در داخل فایل footer.php جستجو کنید.

این مثال قرار گرفتن این کد رو در یک صفحه معمولی html نشون میده:

کد: انتخاب همه

<html>
<head><title>دموی دکمه گوگل پلاس</title>
</head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'fa'}
</script>
<body>
<p align="center"><font face="tahoma">دموی دکمه گوگل پلاس</center></font></p>
<div style="position:fixed; right:92.7%; top:85.8%; float:left; border:1px #111 solid; padding:7px; background:#e8e8e8; width:64px; border-radius: 10px;
-moz-border-radius: 10px; font-family:tahoma; font-size:11px; "><div><center>امتیاز دهید</center></div> &nbsp<center><g:plusone size="tall"></g:plusone></a></center></div>
</body>
</html>

که به این صورت در میاد:
  تصویر 
 حالا چطور این کد رو شخصی سازی کنیم؟ 

  کدی که میان تگ </body> قرار گرفت، این کد: 
 

کد: انتخاب همه

right:92.7%; top:85.8%;
 
  مکان قرار گیری این دکمه رو تغییر بده. top از بالا و پایین و right از چپ و راست؛ با تغییر دادن شماره ها میتونید به مکان دلخواهتون نزدیک بشید که برحسب درصد هم محسابه میشه همچنین اعداد اعشار رو هم میپذیره. 
این کد:

کد: انتخاب همه

border:1px

برای دور خط دار کردن این دکمه به کار میره میتونید با بالابردن این عدد دور خط اون رو زخیم تر کنید

این کد:

کد: انتخاب همه

#111 solid

میتونه رنگ دور خط تون رو تغییر بده, با عوض کردن اعداد

این کد:

کد: انتخاب همه

background:#e8e8e8

رنگ پس زمینه این کد رو تغییر میده با عوض کردن e8e8e8 .

تعدادی از رنگ ها
000000 مشکی
ff0000 قرمز
00ff00 لیمویی
0000ff آبی
ffff00 زرد
00ffff آبی کمرنگ
ff00ff بنفش
ffffff سفید
________
با این شیوه هم میتونید روشنایی رنگ هارو تنظیم کنید به عنوان مثال سیاه رو مثال میزنیم
000000 مشکی
404040 مشکی کمرنگ تر
808080 مشکی کمرنگ تر
c0c0c0 طوسی
e8e8e8 طوسی کمرنگ تر
ffffff سفید

این کد:

کد: انتخاب همه

width:64px;

اندازه پس زمینه و کلا همون دکمه رو افزایش یا کاهش میده, با تغییر عدد

این کد:

کد: انتخاب همه

border-radius: 10px;

گردی دور خط دکمه رو تغییر میده با تغییر عدد 10

این کد:

کد: انتخاب همه

font-family:tahoma;

فونت نوشته "امتیاز دهید" رو تغییر میده

این کد:

کد: انتخاب همه

font-size:11px;

اندازه نوشته مون رو تغییر میده

در اینجا میتونید با تغییر نوشته امتیاز دهید نوشته خودتون رو قرار بدید که البته هر چی نوشته تون طولانی تر باشه به نسب باید روی اندازه ش هم کار کنید

کد: انتخاب همه

<center>امتیاز دهید</center>


همچنین برای تغییر خود دکمه +1 داخل کادر میتونید به جای این کد:

کد: انتخاب همه

<g:plusone size="tall"></g:plusone>

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

کد: انتخاب همه

<g:plusone href=”<?php the_permalink(); ?>”></g:plusone>

یا

کد: انتخاب همه

<g:plusone size=”medium” href=”<?php the_permalink(); ?>”></g:plusone>

یا

کد: انتخاب همه

<g:plusone size=”small” href=”<?php the_permalink(); ?>”></g:plusone>

کدهای فوق انواع اندازه های متفاوت از دکمه های +1 هستن که به سلیقه خودتون میتونید ازشون استفاده کنید.

دموی این اسکریپت رو از [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید] مشاهده کنید. امتیاز هم بدید تصویر
[لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

فقط یادتون نره برای اینکه بتونید به وسیله این دکمه ها امتیاز بدید میبایست ابتدا با مرورگرتون وارد حساب جیمیلتون شده باشید و جیمیل ست شده باشه روی مرورگر.
امیدوارم از این آموزش لذت برده باشید.
 [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید][لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید] 

New Member
پست: 1
تاریخ عضویت: دو شنبه 1 تیر 1394, 2:23 pm

Re: اضافه کردن دکمه +1 گوگل پلاس گوشه سایت یا صفحه

پست توسط hibarfi » دو شنبه 1 تیر 1394, 2:30 pm

تصویر
خیلی ممنون
واقعا مچکرم
این دکمه رو میخواستم به صورت شناور بزارم هرکاری میکردم نمیشد
بازم ممنون

ارسال پست

بازگشت به “Web Programming”