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

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

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

این کد خیلی راحت و بدون درده سر هستش و شما باید فقط همین کدهای زیر رو پس از ویرایش لینک ها و عنوان های مورد نظر برای سایت خودتون اونو یک جایی در قالب سایت خودتون در زیر تگ <body> قرار بدید.همین !


<style type="text/css">
.picor {
width:100px;
height:20px;
background:#6498dd;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 205px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor:hover {
left: 0px;
}

.picor1 {
width:100px;
height:20px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 235px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor1:hover {
left: 0px;
}

.picor2 {
width:100px;
height:20px;
background:#48CCCD;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 265px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor2:hover {
left: 0px;
}
.picor4 {
width:100px;
height:20px;
background:#FF4500;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 295px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor4:hover {
left: 0px;
}
.picor5 {
width:100px;
height:20px;
background:#9ACD32;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 325px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor5:hover {
left: 0px;
}

.picor6 {
width:100px;
height:20px;
background:#CA226B;
text-align:center;
font-family:tahoma;
font-size:12px;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
 float: left;
 position: fixed;
 left: -95px;
 top: 355px;
 -moz-transition:all 0.3s ease-in;
 -webkit-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 -ms-transition:all 0.3s ease-in;
 z-index: 1000;
}

.picor6:hover {
left: 0px;
}

</style>
<div class="picor">دکتر وردپرس</div>
<a href="http://doctorwp.com" title="صفحه اصلی"><div class="picor">صفحه اصلی</div></a>
<a href="https://doctorwp.com/about-us" title="درباره ما"><div class="picor1">درباره ما</div></a>
<a href="https://doctorwp.com/contact" title="تماس با ما"><div class="picor2">تماس با ما</div></a>
<a href="https://doctorwp.com/links" title="تبادل لینک"><div class="picor4">تبادل لینک</div></a>
<a href="http://blog.doctorwp.com" title="وبلاگ"><div class="picor5">وبلاگ</div></a>
<a href="https://doctorwp.com/guest-post" title="پست مهمان"><div class="picor6">پست مهمان</div></a>

آموزش قرار دادن دکمه های ثابت کنار سایت در وردپرس

چون داخل قالب وردپرس فایل های متعدد وجود داره ، البته شما خودتون استاد من هستید اما گفتم بد نیست اشاره کنم که می تونید کد های زیر رو متناسب با قالبتون داخل فایل های header.php , index.php و footer.php قرار بدید.

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

مشاهده دمو آنلاین

دانلود فایل ضمیمه

رمز فایل زیپ : www.picor.ir ( آدرس قدیم سایت بودش ! )

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

امتیاز شما برای این مقاله
38 نظرات
  1. مرتضی می گوید

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

    1. عباس صادقی می گوید

      سلام، مقدار hover رو تغییر بدین!

  2. hamed-sli می گوید

    سلام
    من یه منو میخوام برای کنار سایتم
    مثل منوی شبکه های اجتماعی که در پیشنمایش زیر هست :
    با این تفاوت که از آیکون های یا تصاویر مدنظر خودم استفاده کنم
    در واقع نمیخوام منو برای شبکه های اجتماعی باشن بلکه میخوام عنوان 9 تا سایت مرتبطم رو به این شکل در کنار سایت هام قرار بدم
    ممنون میشم راهنمایی بفرمایید.

    1. آرش حیدری می گوید

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

  3. بهزاد می گوید

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

    1. آرش حیدری می گوید

      سلام
      سرویس میلر لایت داریم ما . از همون افزونه هم استفاده می کنیم .

  4. خشایار می گوید

    استاد من یه سوال داشتم من این کارو انجام دادم ولی اصلا باز نمیشه باید چیکار کنم؟

    1. آرش حیدری می گوید

      سلام
      دمو آنلاین هم قرار دادیم برای صحت کدها ، لطفا مجدد انجام بدید ، نباید مشکلی باشه .
      ممنون

  5. علی می گوید

    سلام
    ممنون از این مطلب مفید بود.
    موفق باشید

  6. مصطفی می گوید

    چطور میشه منو رو ببریم سمت راست یا چپ؟

    اگه بگید ممنون میشم

  7. mohsen می گوید

    جناب راهی نداره که بجای اینکه منو ها در سمت چپ نشان بده بره سمت راست نمایش داده بشه؟

  8. هانیه رضایی می گوید

    ممنون ام از زحمات شما، خیلی عالیه.

  9. amir می گوید

    سلام ..ممنون با بت زحمتاتون .

    میخواستم در سمت راست وبلاگم به نمایش در بیاد با ید چه تغیراتی رو انجام بدم؟

  10. علی می گوید

    بسیار ممنون بابت این آموزش مفید.
    چطور میشه این منو رو در حالت موبایل ویو سایت غیر فعال کرد؟

  11. zahra می گوید

    خیلی عالیه :) همه مطالبتون مفیده

  12. وبسایت حماب می گوید

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

  13. mr.mamadkhan می گوید

    بنده از شما به خاطر قرار دادن آموزش به همراه کدها بسیار سپاسگزارم
    خدا خیرتان بده
    انشاءالله خدا شما را برای خانواده ، دوستان و یادگیرندگان حفظ کند
    یا علی مدد

  14. مردان فناوری اطلاعات و ارتباطات می گوید

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

  15. Mr.14 می گوید

    آقا آرش دمت گرم واقعا کارت حرف نداره!!!
    آموزشات واقعا کاربردی هستن!
    من که خیلی حال کردم!!!!!!!!!!!!!!!!

  16. عباس می گوید

    سلام.
    جناب راهی نداره که بجای اینکه منو ها در سمت چپ نشان بده بره سمت راست نمایش داده بشه؟

  17. امیرحسین می گوید

    مطالب خوبی بود .

  18. میلاد حسن پور می گوید

    دوست عزیز چرا به ایمیل هام و نظر هام جواب نمیدی؟؟؟؟؟خیلی ناراحتم کردی دلم شکست؟؟؟؟؟؟

    1. آرش حیدری می گوید

      سلام
      دوست عزیز یکم درگیر هستیم ، اما به تمام کامنت ها و ایمیل ها جواب میدیم.
      ممنون

  19. سعید می گوید

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

    1. آرش حیدری می گوید

      سلام
      داخل آموزش توضیح دادیم که چکار کنید ودوست عزیز .

  20. پریا می گوید

    جالب بود، دنبالش بودم، خیلی ممنون.

  21. پریسا می گوید

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

    1. آرش حیدری می گوید

      خواهش می کنم ، موفق باشید

  22. elham می گوید

    سلام
    خیلی عالی بود
    ممنونم
    بازم از این مطالب بذارید

  23. fatima می گوید

    نمیدونم چجور تشکر کنم ، واقعا ممنون

    1. آرش حیدری می گوید

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

  24. علی می گوید

    سلام من منو رو توی وبلاگم گذاشتم خیلی خوبه ممنون ولی اگر بخوام موقع کلیک به تب جدید بره و ادرس رو باز کنه باید چه کار کنم؟؟؟

    1. آرش حیدری می گوید

      سلام ،
      باید کد لینک رو ویرایش کنید م مقدار target=”_blank” رو داخل کد بعد از هر لینک یعنی میشه بعد از

  25. طنزکده می گوید

    سلام موفق باشید
    مطلب خوبی هستش دنبالش بودم
    ولی من میخوام به همراه آیکن نمایش داده بشه!!!

    برای این کار باید چیکار کردش؟

    1. آرش حیدری می گوید

      سلام ، باید یکم داخل شیوه نامه دست ببرید و آیکون های مورد نظرتونو اضافه کنید …

  26. محمد علی می گوید

    آقا من این رو تو سایت گذاشتم، فقط سمت چپ رو راست کردم حالا تو فایرفاکس درست نشون نمیده چرا؟

    بقیه بروزرها درسته؟

    1. آرش حیدری می گوید

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

  27. محمد علی می گوید

    بابا ایول داری خیلی جالب بود

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.