Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp

Công dụng: Nút lên trên, xuống dưới giúp bạn đọc blog của bạn có thể di chuyển trên blog một cách nhanh nhất, cách làm cũng khá đưn giản. Bạn thực hiện theo các bước sau..
Cách làm như sau:
1. Vào Blogger Dasboard >> template>>Edit HTML

 

2. Nhấn tổ hợp Ctrl + F mỡ khung Search box, để tìm kiếm thẻ đóng ]]></b:skin>

 

 

3. Sau khi tìm được ]]></b:skin> ta chép dán Source Code dưới đây vào phía sau nó. Source Code mới sẽ có như mẫu dưới đây:

DEMO

 
 ]]></b:skin> #gotop{cursor:pointer;width:30px;height:30px;position:fixed !important; position:absolute;z-index:999;text-indent:-9999px; border:1px solid #144F69;background-color:#067BAF; background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:radial-gradient(ellipse at center top,#2493C4,#086A95); -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; -webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0; border-radius:10px 0 0 0;overflow:hidden} #gotop:hover:after{border-bottom-color:white} #gotop:after{content:&amp
;amp;quot;&
amp;quot;;display:block;width:0;height:0; border-width:10px 4px;border-style:solid; border-color:transparent transparent #C3D1D7 transparent; position:absolute;top:0;left:11px} #gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important; position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px; border:1px solid #144F69;background-color:#067BAF; background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95); background-image:radial-gradient(ellipse at center top,#2493C4,#086A95); -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; -webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px; border-radius:0 0 0 10px;overflow:hidden} #gobottom:hover:after{border-top-color:white} #gobottom:after{content:&
amp;quot;&
amp;quot;;display:block;width:0;height:0; border-width:10px 4px;border-style:solid; border-color:#C3D1D7 transparent transparent transparent; position:absolute;top:10px;left:11px}

Thêm đoạn code sau trước thẻ
</body> <script type='text/javascript'> //<![CDATA[ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#gotop").removeAttr("href"); $("#gotop").stop().animate({ bottom: "0", right: "0" }, { duration: 800, queue: false }) } else { $("#gotop").stop().animate({ bottom: "-50", right: "-50" }, { duration: 1000, queue: false }) } if ($(this).scrollTop() > 100) { $("#gobottom").removeAttr("href"); $("#gobottom").stop().animate({ top: "-50", right: "-50" }, { duration: 800, queue: false }) } else { $("#gobottom").stop().animate({ top: "0", right: "0" }, { duration: 1000, queue: false }) } }); $(function () { $("#gotop").click(function () { $("html, body").animate({ scrollTop: 0 }, "slow"); return false }) $("#gobottom").click(function () { $("html, body").animate({ scrollTop: $('#footer').offset().top }, 970); return false }) }); //]]>< /script>< a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a>< a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a>


4. Save temlate lại và cho ứng dụng hoạt dộng để khảo sát hiệu ứng của nó.
chúc các bạn thành công!  

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..