Tombul Roket Yukarı Çık Butonu Yapımı

Blogger Tombul Roket Yukarı Çık Butonu Yapımı. Bazen blog yazılarımız alabildiğine uzun oluyor ziyaretçimiz sonuna kadar okuduğu yazımızda tekrar başa dönmek istediğinde farenin çemberini döndürmekten başı dönüyor olabilir Okuyucumuzu bu eziyete maruz bırakmamak için bu eklentinin gerekli olduğunu düşünüyorum.

DEMO

Yukarı çık ya da diğer ismiyle sayfa başına dön butonumuz şirin bir tombul roket şeklinde. Yazı sayfamızda aşağıya doğru indiğimizde otomatik olarak sağ alt köşede belirir, üzerine imleci getirdiğimizde roket şekline dönüşür ve tık tık yapınca yukarıya doğru tıpkı roket gibi uçar gider. Giderken de sayfayı da yanında götürür

Tombul Roket Yukarı Çık Butonu Nasıl Yapılır?

1. Blogger

2. Şablon

3. HTML'yi Düzenle

4. Kodlar üstünde herhangi bir yere tık tık CTRL+F tuşlarına aynı anda basarak arama kutusunu açın.

5. ]]></b:skin> kodunu bulun. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.

/* Tombul Roket Yukarı Çık Butonu */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

6. Şimdi </body> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

7. Şablonu kaydedin.
8. Tebrikler tombul roket uçmaya hazır

Roket resmini kendi hesabınıza yükleyin silinmeye karşı korumuş olursunuz. http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png

Blogger blog için tombul roket/füze şeklinde yukarı çık butonun yapımını anlattım. Çok şirin durduğunu düşündüğüm bu eklentiyi bloğunuza uygulamanızı isterim. Yazımın uzunluğuna bakmayın aslında iki hamlede ekliyoruz bu kadar basit yani.

İyi bloglamalar. Yorumunuzla güzellik katın; anlamadığınız birşey varsa sormayı ihmal etmeyin. Bu arada bloğumu izlemeyi unutmayın