کد لینک ها و دکمه های ثابت کنار سایت
شاید داخل بعضی سایت ها دیده باشید که در کنار سایت دکمه های ثابت و لینک های اصلی سایت قرار دارند که بازدید کننده بتونه به راحتی به قسمت های مختلف سایت بدون درده سر دسترسی داشته باشه.بعضی اوقات هم گوشه سات به مناسبت های مختف لوگو ثابت و یا برگه بازشونده گوشه سایت قرار میدن که در مطالب قبلی سایت کدشو قرار داده بودیم.در این مطلب کد دکمه ها و لینک های ثابت به همراه دموی اسکریپت فایل پیوست شده رو قرار دادیم.
کد لینک ها و دکمه های ثابت
این کد خیلی راحت و بدون درده سر هستش و شما باید فقط همین کدهای زیر رو پس از ویرایش لینک ها و عنوان های مورد نظر برای سایت خودتون اونو یک جایی در قالب سایت خودتون در زیر تگ <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 ( آدرس قدیم سایت بودش ! )
در آخر ، در مطالب دیگر سایت اسکریپتی برای قرار دادن دکمه های ثابت شبکه های اجتماعی و لوگو و تصویر ثابت به صورت برگه بازشونده قرار دادیم که اگر دوست داشتید اون مطلب هم ببینید.
با سلام و خسته نباشید
چطوری میشه یه کاری کرد که همه باز باشند نه اینکه ما ماوس رو ببریم کشو باز شه. ؟ و در سمت راست باشند؟
سلام، مقدار hover رو تغییر بدین!
سلام
من یه منو میخوام برای کنار سایتم
مثل منوی شبکه های اجتماعی که در پیشنمایش زیر هست :
با این تفاوت که از آیکون های یا تصاویر مدنظر خودم استفاده کنم
در واقع نمیخوام منو برای شبکه های اجتماعی باشن بلکه میخوام عنوان 9 تا سایت مرتبطم رو به این شکل در کنار سایت هام قرار بدم
ممنون میشم راهنمایی بفرمایید.
سلام
باید مثل همون کدها کپی کنید ازشون و تعداد رد زیاد کنید
یکم باید با کد ها کار کنید
سلام جناب حیدری ممکنه بپرسم از چه افزونه ای برای ساخت خبرنامه استفاده میکنید؟
سلام
سرویس میلر لایت داریم ما . از همون افزونه هم استفاده می کنیم .
استاد من یه سوال داشتم من این کارو انجام دادم ولی اصلا باز نمیشه باید چیکار کنم؟
سلام
دمو آنلاین هم قرار دادیم برای صحت کدها ، لطفا مجدد انجام بدید ، نباید مشکلی باشه .
ممنون
سلام
ممنون از این مطلب مفید بود.
موفق باشید
چطور میشه منو رو ببریم سمت راست یا چپ؟
اگه بگید ممنون میشم
جناب راهی نداره که بجای اینکه منو ها در سمت چپ نشان بده بره سمت راست نمایش داده بشه؟
ممنون ام از زحمات شما، خیلی عالیه.
سلام ..ممنون با بت زحمتاتون .
میخواستم در سمت راست وبلاگم به نمایش در بیاد با ید چه تغیراتی رو انجام بدم؟
بسیار ممنون بابت این آموزش مفید.
چطور میشه این منو رو در حالت موبایل ویو سایت غیر فعال کرد؟
خیلی عالیه :) همه مطالبتون مفیده
دستت درد نکنه. مدتها بود دنبال یه همچین چیزی می گشتم. واقعا به دردم خورد. موفق و پیروز باشی.
بنده از شما به خاطر قرار دادن آموزش به همراه کدها بسیار سپاسگزارم
خدا خیرتان بده
انشاءالله خدا شما را برای خانواده ، دوستان و یادگیرندگان حفظ کند
یا علی مدد
ممنون از کد هایی که گذاشتین.بنده در سایتم استفاده کردم
آقا آرش دمت گرم واقعا کارت حرف نداره!!!
آموزشات واقعا کاربردی هستن!
من که خیلی حال کردم!!!!!!!!!!!!!!!!
سلام.
جناب راهی نداره که بجای اینکه منو ها در سمت چپ نشان بده بره سمت راست نمایش داده بشه؟
مطالب خوبی بود .
دوست عزیز چرا به ایمیل هام و نظر هام جواب نمیدی؟؟؟؟؟خیلی ناراحتم کردی دلم شکست؟؟؟؟؟؟
سلام
دوست عزیز یکم درگیر هستیم ، اما به تمام کامنت ها و ایمیل ها جواب میدیم.
ممنون
سلام وخسته نباشید ببخشید از بالا باید کد رو کپی کنم یا همون قسمت آخر
سلام
داخل آموزش توضیح دادیم که چکار کنید ودوست عزیز .
جالب بود، دنبالش بودم، خیلی ممنون.
سلام
سایت خیلی خوبی دارین
از این کد تو سایتم استفاده کردم
خیلی عالیه
من تازگی طراحی حرفه ای سایتو شروع کردم
کد هایی که شما گذاشتین خیلی کمکم کردن
ممنون
خواهش می کنم ، موفق باشید
سلام
خیلی عالی بود
ممنونم
بازم از این مطالب بذارید
نمیدونم چجور تشکر کنم ، واقعا ممنون
سلام ، خواهش میکنم ، لطف دارید شما
امیدوارم ازش بتونید خوب استفاده کنید
سلام من منو رو توی وبلاگم گذاشتم خیلی خوبه ممنون ولی اگر بخوام موقع کلیک به تب جدید بره و ادرس رو باز کنه باید چه کار کنم؟؟؟
سلام ،
باید کد لینک رو ویرایش کنید م مقدار target=”_blank” رو داخل کد بعد از هر لینک یعنی میشه بعد از
سلام موفق باشید
مطلب خوبی هستش دنبالش بودم
ولی من میخوام به همراه آیکن نمایش داده بشه!!!
برای این کار باید چیکار کردش؟
سلام ، باید یکم داخل شیوه نامه دست ببرید و آیکون های مورد نظرتونو اضافه کنید …
آقا من این رو تو سایت گذاشتم، فقط سمت چپ رو راست کردم حالا تو فایرفاکس درست نشون نمیده چرا؟
بقیه بروزرها درسته؟
دوست عزیز داخل مرورگر فایرفاکس من که درست نشون میده ! حالا بیشتر بررسی کنید فکر نکنم مشکلی وجود داشته باشه .
بابا ایول داری خیلی جالب بود