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

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

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

این کد خیلی راحت و بدون درده سر هستش و شما باید فقط همین کدهای زیر رو پس از ویرایش لینک ها و عنوان های مورد نظر برای سایت خودتون اونو یک جایی در قالب سایت خودتون در زیر تگ <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="http://doctorwp.com/about-us" title="درباره ما"><div class="picor1">درباره ما</div></a>
<a href="http://doctorwp.com/contact" title="تماس با ما"><div class="picor2">تماس با ما</div></a>
<a href="http://doctorwp.com/links" title="تبادل لینک"><div class="picor4">تبادل لینک</div></a>
<a href="http://blog.doctorwp.com" title="وبلاگ"><div class="picor5">وبلاگ</div></a>
<a href="http://doctorwp.com/guest-post" title="پست مهمان"><div class="picor6">پست مهمان</div></a>

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

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

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

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

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

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

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

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