Đoạn code Javascript chống Ctrl + U và F12

LongAnIT 2/15/2019 Bình luận
Xin chào các bạn. Như chúng ta đã biết Mã nguồn Blogger thiết kế dựa trên CSS , HTML và Javascript vì vậy việc Viewsourse ( Ctrl + U) cũng như là sử dụng phím F12 để kiểm tra hoặc xem mã nguồn trên web là rất dễ dàng.

Code chống F12, Ctrl + U cho blog
Code chống F12, Ctrl + U cho blog

Thật ra đối với Site longanit.com của mình thì không dùng cách chống này các bạn có thể tự do xem mã nguồn cũng như Script vì thật ra bản thân mình cũng không phải là dân lập trình ra code mà cũng đi lượm lặt code của các bạn trên cộng đồng Blogger cũng như các site khác chia sẻ.

Tuy nhiên nếu bạn không muốn cho người khác Viewsourse khi nhấn F12 và Ctrl+U của Blogsot thì dưới đây mình xin chia sẻ một code đơn giản để chống lại các thao tác trên.

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn đoạn Code bên dưới vào trên thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="https://www.longanit.com/p/rules.html"}),shortcut.add("F12",function(){top.location.href="https://www.longanit.com"}),shortcut.add("Ctrl+Shift+I",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+S",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+Shift+C",function(){top.location.href="https://www.longanit.com/"});
//]]>
</script>
Thêm đoạn code chống chuột phải nữa nhé
<script type='text/javascript'>
//<![CDATA[
// JavaScript Document
var message="NoRightClicking"; function defeatIE() {if (document.all) {(message);return false;}} function defeatNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;} else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;} document.oncontextmenu=new Function("return false")
//]]>
</script>
Chú ý: Thay đổi link màu đỏ trên thành link mà bạn muốn chuyển hướng đến nhé

Bước 3: Tiến hành save lại và xem kết quả

Chúc bạn thành công nhé!

Hướng dẫn gửi sơ đồ web mới nhất lên google

LongAnIT 2/13/2019 Bình luận
Xin chào các bạn trong bài viết trước tôi có hướng dẫn các bạn cách để chúng ta submit một trang web lên google.

Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger
Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger

Trong bài viết này tôi sẽ hướng dẫn các bạn một số cách để chúng ta gửi một sơ đồ web lên google master tools đồng thời kiểm tra kết quả của quá trình gửi sitemaps – cấu trúc site cho Google thông qua công cụ Google Search Console.

Do mình sử dụng Blogger nên mình sẽ hướng dẫn trên nền tảng này. Chúng ta cần chú ý 3 vấn đề

  1. Sitemap.xml
  2. Sitemap Atom
  3. Robots.txt

1. KHAI BÁO SITEMAP TRONG ROBOTS.TXT

Việc khai báo file robots.txt trên trang web các bạn có thể tham khảo bài viết cũ của mình tại đây 


Các thành phần khai báo về Sitemap như sau:

Sitemap: https://www.longanit.com/sitemap.xml
Sitemap:https://www.longanit.com/p/map.html
Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500

 Như trích dẫn ở trên thì chúng ta có đến 4 link sitemap nhưng có 3 loại sitemap mà mình dùng ở trên:


  1. Đầu tiên là: sitemap xml
  2. Thứ 2 là sitemap cho người xem.
  3. Thứ 3 và 4 là Sitemap Atom (Do có những site có nhiều hơn 500 bài viết nên mình dùng thêm sitemap thứ 4 để khai báo)


Thời gian gần đây Blogger mới cập nhật sitemap mới có dạng như sau: https://www.longanit.com/sitemap.xml (Sitemap.xml) trước đây gần như là không có.

2. Phần này là sitemap cho người dùng xem. Tại đây cập nhật tất cả bài viết trên trang của mình với rất nhiều liên kết nên mình sẽ khai báo cho Google vào đọc từ đó bò đến các link ở nhiều bài viết khác nhau các bạn có thể xem link tại đây nhé: https://www.longanit.com/p/sitemap.html


Chú ý: Sitemap cho người xem thì Google cho là không chuẩn cấu trúc Sitemap.

3. Sitemap có các định dạng như sau: XML, RSS hoặc Atom. Do gần đây Google mới cập nhật sitemap.xml trên Blogger nên trước đó ai cũng sử dụng Atom cả.

Ưu điểm là Sitemap Atom được Google cập nhật thường xuyên hơn sitemap.xml vì dung lượng nhỏ hơn.

Mỗi lần khai báo bằng Atom Feed thì tối đa 500 bài nên cấu trúc:

https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500  

và cấu trúc

https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500 sẽ khai báo từ bài 501 + thêm 500 bài nữa tức là 501 đến 1001 dành cho website nhiều bài viết hơn.

2. HƯỚNG DẪN GỞI SITEMAP LÊN GOOGLE WEBMASTER TOOLS

Đăng nhập vào google master tools - Thu Thập Dữ Liệu -> Sơ đồ trang web - Thêm/Kiểm tra sơ đồ trang web và thực hiện giống như hình bên dưới

Hướng dẫn Submit Google Sitemap lên google
Hướng dẫn Submit Google Sitemap lên google 


Lưu ý: Bạn không cần phải copy chứa cả tên miền khi gởi lên. 

Thông thường, thì Google sẽ trả về ngay kết quả index sitemap như trên hình vẽ, bao gồm số lượng nội dung đã được lập chỉ mục và số lượng nội dung đã gửi. Công việc cần làm sau khi gửi sơ đồ trang lúc này của bạn đó là tìm và khắc phục các nguyên nhân khiến cho một số nội dung trên trang chưa được lập chỉ mục.

3. KẾT LUẬN: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách gửi sitemap – sơ đồ trang web lên Google. 

Chúc các bạn thành công!

Hướng dẫn Cấu trúc lại dữ liệu theo chuẩn trên nền tảng Blogger

LongAnIT 2/12/2019 Bình luận
Hello! Các bạn .Trong 2 bài viết trước tôi đã có bài giới thiệu về dữ liệu có cấu trúc trên nền tản Blogger. Trong bài này tôi sẽ hướng dẫn bạn cách xóa cấu trúc cũ và tạo lại cấu trúc mới cũng từ template các bạn đang sử dụng theo đúng chuẩn.

Triển khai dữ liệu có cấu trúc và thẻ rich cho nền tảng blogger
Triển khai dữ liệu có cấu trúc trên nền tảng blogger

Trước tiên bạn hãy backup lại template để tránh trường hợp làm xong bị lỗi thì chúng ta có thể Restore lại nhanh chóng vì như mình nói mỗi template thì cấu trúc khác nhau nó tùy thuộc vào người tạo ra nó. Ok chúng ta bắt đầu tiến hành

Như chúng ta đã biết Template blogger đa phần sử dụng dữ liệu cấu trúc dạng Microdata, qua việc sử dụng các thuộc tính itemprop, itemscope, itemtype nên việc xóa đi rất đơn giản để cấu trúc  lại một template blogger cho đúng chuẩn cấu trúc như gợi ý từ google master tools

- Đầu tiên chúng ta lần lượt tìm các với 3 từ khóa itemprop, itemscope, itemtype

+ Nếu là tag HTML

Ví dụ <div id='xxx' itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'> thì xóa hết thuộc tính chỉ để lại div,id,class.. hoặc bất kì thuộc tính nào không liên quan tới 3 từ khóa trên.

Kết quả <div id='xxx'>

+ Nếu là thẻ meta thì xóa luôn thẻ meta

+ Để xóa hvcard tìm class='fn' và xóa đi ví dụ <span class='fn'...> thì xóa thành <span...>

+ Để xóa hatom tìm class hfeed và xóa đi ví dụ <div class='post hfeed'...> thì xóa thành <div class='post'...>

+ Để xóa hentry tìm class hentry và xóa đi ví dụ <div class='post hentry'...> thì xóa thành <div class='post'...>

Như vậy với cách trên thì các bạn đã hoàn toàn xóa hết các thuộc tính râu ria của template. Bây giờ thì chúng ta tiến hành tạo lại cấu trúc. Tôi sẽ để code bên dưới theo trình tự bạn chỉ cần Search trong template của mình các code tương ứng và thay thế là xong.

Header

Code ban đầu:
<div class='header-wrap' id='header-wrap'>
Code tạo cấu trúc:
<div class='header-wrap' id='header-wrap' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Sidebar


Code ban đầu:
 <div class='sidebar-wrapper' id='sidebar-wrapper'>
Code tạo cấu trúc:
<div class='sidebar-wrapper' id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>


Footer

 Code ban đầu:
<div class='lowerbar-wrapper' id='lowerbar-wrapper'>
Code tạo cấu trúc:
<div class='lowerbar-wrapper' id='lowerbar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Main Wrapper hoặc Content Wrapper

 Code ban đầu:
<div class='body-row' id='content-wrapper'>
Code tạo cấu trúc:
<div class='body-row' id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Menu


 Code ban đầu:
<div class='tm-menu' id='tm-menu'>
Code tạo cấu trúc:
 <div class='tm-menu' id='tm-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

Sau khi đã tạo cấu trúc cho các thành phần xong bạn lại tiếp tục tạo cấu trúc cho các thành phần con của chúng  bạn có thể tham khảo trực tiếp tại link trang chủ
http://schema.org/SiteNavigationElement
Đây là link cung cấp tất cả các thứ liên quan đến Schema website tuy nhiên nếu bạn nào chưa rành về nó thì nhìn nó như đám rừng. Nếu như không hiểu về code cũng như lập trình thì bạn có thể tìm search trên mạng rồi sau đó fix dần các lỗi cấu trúc.

Kết luận: Với cách trên tôi đã hướng dẫn các bạn tái cấu trúc lại một template blogger theo chuẩn. Trong các bài viết sau tôi sẽ hướng dẫn các bạn cấu trúc lại các thành phần con bên trong của nó.

Chúc các bạn thành công!

Tìm hiểu về dữ liệu có cấu trúc trong blogger

LongAnIT 1/29/2019 Bình luận
Hello các bạn! chúng ta lại gặp nhau trong bài viết thảo luận về triển khai dữ liệu có cấu trúc trong website.

Đầu tiên mình nói sơ qua về Cấu trúc schema là gì? nó có tác dụng gì trong SEO? Chắc nhiều bạn cũng đặt câu hỏi tương tự như thế này, bài viết này tôi sẻ giới thiệu cho bạn sơ qua về cấu trúc blogger chuẩn SEO Schema.org.

Tìm hiểu về dữ liệu có cấu trúc trong blogger
Tìm hiểu về dữ liệu có cấu trúc trong blogger

Schema được hiểu đơn giản là cấu trúc dữ liệu trên website mà bạn muốn khai báo với các công cụ tìm kiếm. Mỗi thành phần trên website sẻ có một đoạn mã, đoạn mã đó được khai báo để cho các bot của google biết rằng đây là phần nào trên website, và nó quan trọng hay không, phần chính hay phụ...

Như vậy bạn có thể hiểu nếu bạn khai báo càng chi tiết thì bot càng hiểu về website của bạn và nó thu thập được các dữ liệu xác đáng nên sẻ hiện thị chuẩn xác hơn nó giống như việc bạn đi xin việc thì cần phải khai báo sơ yếu lý lịch vậy đơn giản thế thôi.

Làm thế nào để kiểm tra website đã chuẩn SEO dữ liệu cấu trúc hay chưa? Tôi cung cấp cho bạn một công cụ chuẩn đoán của google có tên là  google Structured Data Testing Tool tại địa chỉ:

https://developers.google.com/structured-data/testing-tool/ 

Mình xin nói thêm với các bạn là tool này nó sẽ giúp bạn fix dần các cấu trúc bị lỗi, ngoài ra muốn chính xác hơn thì bạn nên vào google webmaster tool phần cấu trúc dữ liệu mà bot thu thập sẻ chi tiết hơn như hình bên dưới

Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Sau đó click vào chạy thử nghiệm để kiểm tra lỗi cấu trúc

Kết quả thu được sau khi kiểm tra cấu trúc
Kết quả thu được sau khi kiểm tra cấu trúc
Theo như hình trên thì không có lỗi xảy ra. Dĩ nhiên là tôi đã sửa lỗi cấu trúc trước đó rồi. Bây giờ bạn hãy thử kiểm tra xem web của mình có bị lỗi cấu trúc không nhé. Trong bài viết tiếp theo tôi sẽ hướng dẫn cho các bạn cách triển khai dữ liệu cấu trúc chuẩn cho website trên nền tản blogspot, mời các bạn đón xem nhé.

Chúc thành công!

Hướng dẫn chuyển hướng Redirect 301 trong Blogger

LongAnIT 1/11/2019 Bình luận
Chuyển hướng Redirect 301 nói chung là thuật ngữ để chỉ việc chuyển hướng từ một liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và cũng giúp cho bọ  tìm kiếm từ đường dẫn cũ sang đường dẫn mới. Nó rất đơn giản như bạn chuyển nhà đi nơi khác, hay thay đổi số điện thoại rồi sau đó bạn phải thông báo cho bạn bè biết vậy.

Bạn sẽ nghĩ thế nào nếu như khi người dùng tìm kiếm một bài viết liên quan đến site của bạn nhưng khi họ truy cập vào thì không thấy bài viết đó đâu cả việc này dẫn đến nguyên nhân trải nghiệm người dùng xấu và google cũng đánh giá site của bạn tệ. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách chuyển hướng Redirect 301 trong Blogger từ liên kết cũ sang liên kết mới.

Như bạn đã biết là Blogger là web vệ tinh 2.0 mạnh nhất hiện tại bởi vì sau. Bởi vì những tùy chỉnh của nó trong thiết lập là vô cùng tuyệt vời cho SEO.

Chuyển hướng Redirect 301 trong Blogger cũng tương tự như các chuyển hướng 301 ở nền tảng khác, kết quả tìm kiếm được giữ nguyên. Bạn có thể áp dụng cách này để thay đổi đường dẫn các bài viết đẹp hơn, chuyển hướng khá dễ dàng giúp cho các liên kết nội bộ cũng như bên ngoài của bạn không bị gãy.

Tôi có ví dụ như sau: Trước đó tôi có tạo một bài đăng với nhãn là SEO vậy khi search bài viết theo nhãn SEO nó sẽ thế này

https://www.longanit.com/search/label/SEO
Hôm nay tôi tôi đổi nhãn cho bài viết từ SEO thành Thủ thuật SEO vậy đường dẫn mới nó sẽ có dạng thế này

https://www.longanit.com/search/label/Thủ thuật SEO
Tuy nhiên sau khi đổi xong thì liên kết cũ https://www.longanit.com/search/label/SEO đã không thể tìm thấy các bài viết theo nhãn SEO nữa. Vậy tôi cần chuyển hướng 301 sang link mới
https://www.longanit.com/search/label/Thủ thuật SEO
Ok chúng ta tiến hành ngay chuyển hướng như ví dụ trên để hiểu rõ hơn nhé. Thực hiện các bước như hướng dẫn sau đây:

Bước 1: Đăng nhập vào Blogger - Cài đặt - Tùy chỉnh tìm kiếm như hình bên dưới

Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger
Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger

Bước 2: Trong mục chuyển hướng tùy chỉnh bạn click vào chỉnh sửa như hình trên chúng ta sẽ chuyển sang giao diện như sau

Giao diện thiết lập chuyển hướng 301
Giao diện thiết lập chuyển hướng 301

Như hình trên tôi có tạo 4 chuyển hướng 301. Bạn tiếp tục click vào "chuyển hướng mới" để bắt đầu thiết lập chuyển hướng tùy chỉnh 301.

Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới
Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới


 Giao diện trang chuyển hướng như trên chúng ta có 2 forum

  1. Forum đầu tiên bạn để link của đường dẫn cũ
  2. Forum thứ 2 bạn để link đường dẫn mới (Link cần chuyển hướng 301)
Lưu ý: Là link sẽ có dạng như sau: 

Cú pháp thêm link cũ và link mới trong chuyển hướng 301
Cú pháp thêm link cũ và link mới trong chuyển hướng 301


Như hình trên thì bạn có thể thấy là tôi chuyển hướng 301 cho nhãn bài viết. Nếu bạn muốn chuyển hướng một liên kết cố định thì cách làm vẫn tương tự bạn chỉ cần bỏ miền đằng trước ra là ok nhé.

Bước 3: Sau khi thay đổi xong bạn tiến hành lưu thay đổi là xong

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cơ bản cách chuyển hướng 301 tùy chỉnh trong blogger hi vọng là qua bài viết này có thể giúp được các bạn hiểu rõ hơn về tính năng này. Chúc các bạn SEO nhanh lên top nhé.


Share code banner trượt hai bên trang trí cho ngày tết

LongAnIT 1/07/2019 Bình luận
Code banner trượt hai bên trang trí cho ngày tết
Code banner trượt hai bên trang trí cho ngày tết 
Lang thang trên mạng tìm được code Javascript trang trí rất đẹp cho ngày tết với 2 banner trượt dọc 2 bên  với 2 câu đối liểng tùy chỉnh. Mình share lại code banner trượt hai bên này cho các bạn nào cần có nhu cầu. Thực hiện các bước sau đây để chèn code.

Bước 1:
  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Code toàn bộ code bên dưới vào trước thẻ </body> 

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web
var pictureWidth = 15; //Chiều rộng của hoa mai or đào
var pictureHeight = 15; //Chiều cao của hoa mai or đào
var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
var downSpeed = 0.01; //Tốc độ rơi của hoa
var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>
<style type='text/css'>body{padding-bottom:20px}</style><a href='https://www.longanit.com//' target='_blank'><img _cke_saved_src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' style='position:fixed;z-index:9999;top:0;left:0;'/></a><a href='https://www.longanit.com/' target='_blank'><img src='http://4.bp.blogspot.com/-A85wPjYE2BM/UsA7mDDQWmI/AAAAAAAAA3U/R9bxy6zSrLs/s1600/banner_right.png' style='position:fixed;z-index:9999;top:0;right:0;'/></a><div style='position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(https://3.bp.blogspot.com/-uQrQaR3IkxE/WF9dDUUVLLI/AAAAAAAAAdw/VKNA5q7FJSQX5OWofOiPafEEENaoBcY9wCLcB/s1600/nentet.png) repeat-x bottom left;'></div><a href='https://www.longanit.com/' target='_blank'><img src='http://3.bp.blogspot.com/-4Zt-ZB4tols/UsA_qIR0w9I/AAAAAAAAA3w/Ffyy-5OqGec/s320/banner_header.png' style='position:fixed;z-index:9999;bottom:20px;left:20px'/></a>
 Bước 2: Chỉnh sửa và thay đổi nội dung 2 banner trái và phải như hình trên tôi đã tô đậm màu đỏ 2 link này trong code bạn save nó về và chỉnh sửa lại nội dung theo ý bạn nhé.
Bước 3: Tiến hành save lại và hưởng thành quả.
Chú ý: Code này hoạt động tốt trên PC. Tuy nhiên code bị hạn chế trên Mobile bạn nên tham khảo thè điều kiện chỉ hiển thị trên desktop là ok. Chúc các bạn thành công!



Hướng dẫn tạo thanh cuộn Scrollbar bằng CSS cho Blogger

LongAnIT 12/29/2018 Bình luận
Khi bạn viết bài trên blog, đôi khi nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (Scrollbar) là một giải pháp để rút ngắn không gian trình bày giúp cho blog của bạn thêm chuyên nghiệp và đẹp hơn.

Trong bài viết này longanit.com sẻ hướng dẫn cho các bạn cách tạo Scrollbar cho blogger cũng như một số tiện ích (Widget).

1. Tạo thanh cuộn cho Widget

Trường hợp 1: Scrollbar cho tất cả các Widget Blogger


  •  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML 
  • Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin> 
.sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}

 Trường hợp 2: Scrollbar cho một widget cố định

Trong trường hợp này bạn cần xác định ID của Widget mà bạn cần tạo Scrollbar. Cách xác định ID bạn làm như sau:

Đăng nhập vào Blogger - Bố cục như hình bên dưới.

Trang quản lý các Widget trong blogger
Trang quản lý các Widget trong blogger  
Như hình trên tôi chọn một Widget bất kỳ sau đó click vào chỉnh sửa. Một Popup mở ra trên thanh address bạn rê chuột vào cuối thanh địa chỉ để xem ID của Widget như hình bên dưới thì Widget ID là "Label1"

Lưu ý: Mỗi Widget sẻ có một ID riêng biệt. Trong blogger thường có tên là : HTML1, HTML2, HTML3...,

Xem thông tin ID của Widget trên Bloggger
Xem thông tin ID của Widget trên Bloggger

 Sau khi xác định được Id của Widget bạn vào Chủ đề - Chỉnh sửa HTML sau đó chèn  đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
#Label1{
    max-height:300px;
    max-width:300px;
    overflow:auto;
    }

Giải thích: Trong  đoạn code trên thì mình sử dụng các thuộc tính sau:

  • max-height:300px; chiều cao tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo chiều dọc thì bạn bỏ thuộc tính này.
  • max-width:300px; chiều rộng tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo ngang dọc thì bạn bỏ thuộc tính này.
  • overflow:auto là thanh cuộn xuất hiện khi chiều cao tiện ích vượt chiều cao tối đa.

 Nếu Widget là các liên kết thì đoạn mã có dạng như sau:
#LinkList1 ul{
height:300px;
overflow:auto;
}

2. Tương tự như vậy cho các Widget khác cũng như các tiện ích trên Blogger ví dụ như sau:


Tạo thanh cuộn cho phần comment tìm trong CSS đoạn code sau
#comments-block {.....}
Tạo thanh cuộn cho đoạn văn bản dài bạn sử dụng cú pháp CSS như sau
.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}
Bạn có thể điều chỉnh chiều cao (height:200) và chiều rộng (width:500) tùy ý.
Mỗi khi đăng bài thì bạn nhập văn bản vào giữa 2 phần cú pháp định dạng (lưu ý đăng bài ở dạng Chỉnh sửa HTML) như sau:
<div class="scrollingtext">
Văn bản của bạn....
</div>

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho các bạn cách tạo thanh Scrollbar cho Blog cũng như các tiện ích Widget. Cảm ơn các bạn đã quan tâm theo dõi nếu có thắc mắc vui lòng để lại comment bên dưới để góp ý hoặc trao đổi.