TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT

Chào các bạn đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn cho các bạn một Thủ Thuật Blog nhỏ >> TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT. OK làm thôi =))

Ảnh minh họa

CÁC BƯỚC THỰC HIỆN

B1: Vào blogger.com truy cập Quản trị viên blogger > Chủ đề > Chỉnh sửa HTML

B2: Thêm thư viện Font (Nếu chưa có) > Coppy đoạn Code dưới đây vào phía trước phần</head> hoặc <head/> trong theme.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

B3: Dán toàn bộ đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong theme.

/* Back to top, Back home, Go back*/
.back-to-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:90px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:50px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.go-back{z-index:9999;width:35px;height:35px;position:fixed;bottom:10px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-top1:hover,.back-home:hover{opacity:1},go-back:hover{opacity:1}

Code

B4: Tiếp theo chúng ta chèn Code hiển thị 3 nút đó vào vị trí mà bạn muốn (Thường là giữa cặp thẻ body .)

<a class='back-to-top' href='#' title='Back to Top'><i class='fa fa-chevron-up' style='color:#fff'/></a>
<div class='back-home' title='Back to Home'><a href='/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<a class='go-back' onclick='history.back(-1)' title='Go-back'><i class='fa fa-arrow-left' style='color:#fff'/></a>

Code

B5: Lưu Template lại và thưởng thức thôi !!!

TỔNG KẾT

Trước khi áp dụng thủ thuật này bạn phải xóa hết các code nút Back-to-top, Back-home,... cũ có trong blog đi nhé nếu không thì các nút đó sẽ chèn lên nhau gây xấu blog.

Cảm ơn các bạn đã xem!

Chúc các bạn thành công (Tuần mới vui vẻ hạnh phúc nhé)@@@

Hẹn gặp lại với bài viết tiếp theo nhé@@@

Bài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <br /><ins class="adsbygoogle" data-ad-client="ca-pub-1638718759430999" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="7561885392" style="display: block; text-align: center;"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({}); </script>Chào các bạn đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn cho các bạn một <a href="http://www.stardungblog.xyz/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blog?max-results=9" target="_blank">Thủ Thuật Blog</a> nhỏ >> TẠO NÚT BACK TO TOP, HOME, GO BACK  TUYỆT ĐẸP CHO BLOGSPOT. OK làm thôi =))<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOs_xporFdnCsRBJGfxqIbvQgo-wj8aiZ3R19GB_9r4J7SSDzGbswkIRINoURe8Uea1Q868kW_1oS7aSkk_ZSufiaWzC6k-GdoygQL4u715ifipipEU1ZO4vAd6nui2V6lO0STiA9mI1z/s1600/thumbnall.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="320" data-original-width="754" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOs_xporFdnCsRBJGfxqIbvQgo-wj8aiZ3R19GB_9r4J7SSDzGbswkIRINoURe8Uea1Q868kW_1oS7aSkk_ZSufiaWzC6k-GdoygQL4u715ifipipEU1ZO4vAd6nui2V6lO0STiA9mI1z/s1600/thumbnall.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Ảnh minh họa</td></tr></tbody></table><div style="text-align: center;"><br /><a name="more"></a><br /></div><div style="text-align: left;"><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">CÁC BƯỚC THỰC HIỆN</h2><div><span style="color: #444444;">B1: Vào</span> <b>blogger.com</b> <span style="color: #444444;">truy cập Quản trị viên blogger</span> > <b>Chủ đề</b> > <b>Chỉnh sửa  HTML</b></div><div><span style="color: #444444;">B2: Thêm thư viện Font (Nếu chưa có) > Coppy đoạn Code dưới đây vào phía trước phần</span><code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;"></head></code><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"> hoặc </span><code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;"><head/></code><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"> trong theme.</span></div></div><blockquote class="tr_bq" style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s;"><span style="color: #666666; font-family: monospace; font-size: 17px;"><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/></span></blockquote><span style="color: #444444;">B3: Dán toàn bộ đoạn CSS dưới đây vào trước thẻ</span> <code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;">]]></b:skin></code><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"> trong theme.</span><br /><blockquote class="tr_bq" style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s;"><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>/* Back to top, Back home, Go back*/</b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.back-to-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:90px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}</b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:50px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}</b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.go-back{z-index:9999;width:35px;height:35px;position:fixed;bottom:10px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}</b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.back-top1:hover,.back-home:hover{opacity:1},go-back:hover{opacity:1}</b></span></span></blockquote><div style="text-align: center;">Code</div><div style="text-align: left;"><span style="color: #444444;">B4: Tiếp theo chúng ta chèn Code hiển thị 3 nút đó vào vị trí mà bạn muốn (Thường là giữa cặp thẻ <code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;">body</code> .) </span></div><blockquote class="tr_bq" style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s;"><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><a class='back-to-top' href='#' title='Back to Top'><i class='fa fa-chevron-up' style='color:#fff'/></a></b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><div class='back-home' title='Back to Home'><a href='/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div></b></span></span><br /><span style="color: #666666; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>  <a class='go-back' onclick='history.back(-1)' title='Go-back'><i class='fa fa-arrow-left' style='color:#fff'/></a></b></span></span></blockquote><div style="text-align: center;">Code</div><div style="text-align: left;"> B5: Lưu Template lại và thưởng thức thôi !!!</div><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">TỔNG KẾT</h2><div>Trước khi áp dụng thủ thuật này bạn phải xóa hết các code nút Back-to-top, Back-home,... cũ có trong blog đi nhé nếu không thì các nút đó sẽ chèn lên nhau gây xấu blog.</div><div>Cảm ơn các bạn đã xem!</div><div>Chúc các bạn thành công (Tuần mới vui vẻ hạnh phúc nhé)@@@</div><div>Hẹn gặp lại với bài viết tiếp theo nhé@@@</div><div><br /></div>