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.
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.pngBlogger 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
2 Yorum
Ooolala çok iyi
YanıtlaAlıntı Yaptım (TABİ Kİ KAYNAK GÖSTERECEĞİM) :) @ http://bilgiyebak.blogspot.com.tr/ |Bilgiye Bak Sosyal Medya Takipçiniz.
YanıtlaYorumlarda Kod vs. Kullanmak İÇİN