قرار هستش که کدهای قرار گرفتن دکمه های ثابت شبکه های اجتماعی رو با هم مرور کنیم ، با این کدها لینک شبکه های اجتماعی سایتتون مثل فیس بوک ، توئیتر و … رو در درسترس تر قرار بدید.

کد دکمه های ثابت شبکه های اجتماعی

کدهای css قرار گرفتن لینک های ثابت

شما ابتدا باید کدهای زیر رو به انتهای فایل استایل (style.css) خودتون اضافه کنید .


.fixed-side-social-container{left:0;width:60px;position:fixed;top:397px;background-repeat:no-repeat;z-index:10}
.fixed-side-social-container .social-icon{float:left;width:60px;filter:alpha(opacity=75);moz-opacity:.75;-khtml-opacity:.75;opacity:.75;display:block;background-repeat:no-repeat;height:60px;-webkit-transition:all ease .2s;-moz-transition:all ease .2s;-o-transition:all ease .2s;-ms-transition:all ease .2s;transition:all ease .2s;background-position:0 0}
.fixed-side-social-container .social-icon{background-image:url("http://doctorwp.com/wp-content/uploads/2014/04/social-media.png")}
.fixed-side-social-container .social-icon:hover{filter:alpha(opacity=99);moz-opacity:.99;-khtml-opacity:.99;opacity:.99}
.fixed-side-social-container .linkedin-icon{background-position:0 0}
.fixed-side-social-container .twitter-icon{background-position:0 -61px}
.fixed-side-social-container .facebook-icon{background-position:0 -122px}
.fixed-side-social-container .google-icon{background-position:0 -186px}

دقت کنید که ما اینجا داخل استایل از آدرس تصویر آپلود شده خودمون برای آیکون لینک ها استفاده کردیم ، شما رو هاست خودتون آپلود کنید و آدرسشو ویرایش کنید. بعد که کدهای استایل رو اضافه کردید نوبت به اضافه کردن کدهای html می رسه .

کدهای html دکمه های ثابت شبکه های اجتماعی

حالا اینجا کدهای html زیر رو قبل از <body/> باید قرار بدید ( فرقی هم نمی کنه هر کجا بعد از <body> هم میشه دیگه ) .

<div class="fixed-side-social-container">
<a class="social-icon linkedin-icon" href="#" target="new" title="مارو در linkedin دنبال کنید"><span></span></a>
<a class="social-icon twitter-icon" href="https://twitter.com/picor_ir" target="new" title="مارو در توئیتر دنبال کنید !"><span></span></a>
<a class="social-icon facebook-icon" href="http://www.facebook.com/pages/picorir/447849195255223" target="new" title="مارو در فیس بوک دنبال کنید"><span></span></a>
<a class="social-icon google-icon" href="https://plus.google.com/105539120649256197303" target="new" title="مارو در گوگل پلاس دنبال کنید"><span></span></a>
</div>

تغییر مکان لینک های ثابت کنار سایت

اگر دقت کنید داخل فایل های استایل top:397px هستش که هر چقدر این مقدار رو کم کنید لینک های ثابت بالاتر میرن .همچنین در مطالب قبلی سایت کد دکمه های ثابت کنار سایت رو آموزش داده بودیم که اونم بد نیست یک نگاهی کنید !

دمو و دانلود فایل ضمیمه دکمه های ثابت

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 4 رای
Loading...