کد بالابر ساده برای سایت و وبلاگ

کد بالابر ساده برای سایت و وبلاگ

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

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

دمو کد

کد گوشه سمت سمت راست

<div style="position:absolute;top:-200%;"><h1><a  href="https://codebazan.ir/">&#1705;&#1583;&#1576;&#1575;&#1586;&#1575;&#1606;</a></h1></div><style>.ui-to-top {  width: 50px;  height: 50px;  font-size: 24px;  line-height: 45px;  color: #007fff;  background: #fff;  border-radius: 50%;  position: fixed;  right: 15px;  bottom: 15px;  overflow: hidden;  text-align: center;  text-decoration: none;  z-index: 20;  transition: .3s all ease;  border: 2px solid #007fff;  outline: none;  -webkit-transform: translateY(100px);  transform: translateY(100px);}.ui-to-top:hover, .ui-to-top:focus {  color: #FFF;  background: #007fff;  text-decoration: none;  outline: none;}.ui-to-top.active {  -webkit-transform: translateY(0);  transform: translateY(0);}.mobile .ui-to-top,;.tablet .ui-to-top {  display: none !important;}@media (min-width: 480px) {  .ui-to-top {    right: 40px;    bottom: 40px;  }}
</style>

  <!---تغییر ادرس عکس--->
<a href="#" id="ui-to-top" class="ui-to-top fa fa-angle-up active"><img style="width:50" src="https://codebazan.ir/wp-content/uploads/2017/01/upsite-150x150.png"></a>
 <!---تغییر ادرس عکس--->

کد گوشه سمت چپ

<div style="position:absolute;top:-200%;"><h1><a  href="https://codebazan.ir/">&#1705;&#1583;&#1576;&#1575;&#1586;&#1575;&#1606;</a></h1></div><style>.ui-to-top {  width: 50px;  height: 50px;  font-size: 24px;  line-height: 45px;  color: #007fff;  background: #fff;  border-radius: 50%;  position: fixed;  left: 15px;  bottom: 15px;  overflow: hidden;  text-align: center;  text-decoration: none;  z-index: 20;  transition: .3s all ease;  border: 2px solid #007fff;  outline: none;  -webkit-transform: translateY(100px);  transform: translateY(100px);}.ui-to-top:hover, .ui-to-top:focus {  color: #FFF;  background: #007fff;  text-decoration: none;  outline: none;}.ui-to-top.active {  -webkit-transform: translateY(0);  transform: translateY(0);}.mobile .ui-to-top,;.tablet .ui-to-top {  display: none !important;}@media (min-width: 480px) {  .ui-to-top {    right: 40px;    bottom: 40px;  }}
</style>

  <!---تغییر ادرس عکس--->
<a href="#" id="ui-to-top" class="ui-to-top fa fa-angle-up active"><img style="width:50" src="https://codebazan.ir/wp-content/uploads/2017/01/upsite-150x150.png"></a>
 <!---تغییر ادرس عکس--->