بـلاگچی

  • خانه
  • وردپرس
    • پوسته وردپرس
      • پوسته های پرمیوم
      • پوسته های رایگان
    • کدها و هک ها
    • افزونه وردپرس
    • مقالات وردپرس
  • قالب ها
    • قالب های رایگان
    • قالب های فروشی
    • قالب پنل ادمین
  • آموزش
    • لاراول
    • vue.js
    • node.js
    • php
    • جی کوئری
    • جاوا اسکریپت
    • Html
    • CSS
    • بوت استرپ
    • بهینه سازی
    • لینوکس
  • اسکریپت
  • تماس با ما

بـلاگچی

  • خانه
  • وردپرس
    • پوسته وردپرس
      • پوسته های پرمیوم
      • پوسته های رایگان
    • کدها و هک ها
    • افزونه وردپرس
    • مقالات وردپرس
  • قالب ها
    • قالب های رایگان
    • قالب های فروشی
    • قالب پنل ادمین
  • آموزش
    • لاراول
    • vue.js
    • node.js
    • php
    • جی کوئری
    • جاوا اسکریپت
    • Html
    • CSS
    • بوت استرپ
    • بهینه سازی
    • لینوکس
  • اسکریپت
  • تماس با ما

افزودن دکمه های اشتراک گذاری بدون افزونه

توسط admin ۱۳۹۵/۰۴/۲۴  در کدها و هک ها, وردپرس
افزودن دکمه های اشتراک گذاری بدون افزونه

افزودن دکمه های اشتراک گذاری بدون افزونه

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

در وردپرس افزونه های بسیار زیاد و مختلفی برای اشتراک گذاری مطالب وجود دارد. اما ممکن است شما بخواهید این دکمه ها را مطابق میل و سلیقه خودتان تغییر داده و استایل شخصی خود را اعمال کنید.

برای اینکار ابتدا کدهای زیر را در جایی که میخواهید دکمه ها نمایش داده شوند قرار دهید :



<div class="social">
اشتراک گذاری نوشته در:


<div class="icons">
         <!--Twitter-->
      <a class="twitter" href="https://twitter.com/home?status=Reading: <?php the_permalink(); ?>" title="Share this post on Twitter!" target="_blank">Twitter</a>
        <!--Facebook-->
        <a class="facebook" href="https://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank">Facebook</a>
        <!--Google Plus-->
        <a class="google-plus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>','gplusshare','width=600,height=400,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Google+</a>
		<!--Reddit-->
		<a class="reddit" href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Reddit" rel="nofollow" target="_blank">Reddit</a>
		<!--Stumbleupon-->
		<a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Stumble it" rel="nofollow" target="_blank">Stumble it</a>
		<!--Digg-->
		<a class="digg" href="http://digg.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Digg this!" rel="nofollow" target="_blank">Digg this!</a>
		<!--Linkedin-->
		<a class="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" title="Share on LinkedIn" rel="external nofollow" rel="nofollow" target="_blank">Share on LinkedIn</a>
		<!--Pinterest-->
		<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>" title="Pinterest" rel="nofollow" target="_blank">Pinterest</a>
		<!--Del.icio.us-->
		<a class="delicious" href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Bookmark on del.icio.us" rel="nofollow" target="_blank">Del.icio.us</a>
</div>

</div>


حالا برای نمایش بهتر دکمه ها، باید استایل را نیز بر روی کدهای HTML اعمال کنیم.
برای اینکار کد استایل زیر را در فایل style.css قرار دهید.

 

p{
	direction:rtl;
	font:12px tahoma;
}

a{
	border:1px solid transparent;
	border-radius:5px;
	padding:5px;
	color:#fff;
	text-decoration:none;
	font:12px tahoma;
}
.twitter{
	background:#9AE4E8;
}
/*Facebook*/
.facebook{
	background:#3B5998;
}
/*Google Plus*/
.google-plus{
	background:#D34836;
}
/*LinkedIn*/
.linkedin{
	background:#0e76a8;
}
/*StumbleUpon*/
.stumbleupon{
	background:#EF4916;
}
/*Reddit*/
.reddit{
	background:#CEE3F8;
}
/*Digg*/
.digg{
	background:#1B5790;
}
/*Pinterest*/
.pinterest{
	background:#C92228;
}
 
/*Delicious*/
.delicious{
	background:#0b79e5;
}
 
.icons{
	float:right;
}
 
a:hover{ 
	opacity: 0.7;
}

تغییرات را ذخیره کرده و صفحه را مجددا بارگزاری نمائید. نتیجه کار باید مشابه تصویر زیر باشد.

افزودن دکمه های اشتراک گذاری بدون افزونه

social share buttons دکمه های اشتراک گذاری دکمه های اشتراک گذاری بدون افزونه کد وردپرس هک وردپرس وردپرس
« مطالب مرتبط بدون نیاز به افزونه نمایش تعداد بازدید مطالب بدون افزونه »

بدون دیدگاه

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

مطالب مرتبط

صفحه بندی دیدگاه ها در وردپرس

صفحه بندی دیدگاه ها در وردپرس

توسط admin ۱۳۹۸/۰۶/۱۳
۹ ترفند مفید امنیتی از طریق .htaccess

۹ ترفند مفید امنیتی از طریق .htaccess

توسط admin ۱۳۹۵/۰۶/۲۴
نمایش تعداد کل دیدگاه ها در وردپرس

نمایش تعداد کل دیدگاه ها در وردپرس

توسط admin ۱۳۹۵/۰۶/۰۴
حذف منوی ویرایشگر از پیشخوان وردپرس

حذف منوی ویرایشگر از پیشخوان وردپرس

توسط admin ۱۳۹۶/۰۳/۱۲

نوشته های تازه

  • صفحه بندی دیدگاه ها در وردپرس
  • حذف منوی ویرایشگر از پیشخوان وردپرس
  • آموزش تغییر ایمیل پیش فرض وردپرس
  • ۹ ترفند مفید امنیتی از طریق .htaccess
  • افزونه حتما بخوانید وردپرس Inline Related Posts

بایگانی

  • شهریور ۱۳۹۸ (۱)
  • خرداد ۱۳۹۶ (۱)
  • مهر ۱۳۹۵ (۱)
  • شهریور ۱۳۹۵ (۳)
  • مرداد ۱۳۹۵ (۵)
  • تیر ۱۳۹۵ (۶)
  • خرداد ۱۳۹۵ (۱)
  • دی ۱۳۹۴ (۱)
  • شهریور ۱۳۹۴ (۱)
  • تیر ۱۳۹۴ (۱)
  • اسفند ۱۳۹۳ (۴)
  • بهمن ۱۳۹۳ (۴)

محبوب ترین پوسته ها

  • صفحه اصلی
  • درباره ما
  • تماس با ما

کپی رایت 1397 © تمامی حقوق برای بـلاگچی محفوظ می باشد.