Tạo nút chuyển Grid View/List View Cho Blogspot
Khi bạn tìm đọc bài viết này thì chắc hẳn bạn đang quan tâm về giao diện các bài post trên trang chủ blogspot của mình phải không ? Đi vào vấn đề, Grid View là thể hiện giao diện trang chủ với các bài post ở dạng Grid tương tự như giao diện Start Screen của Windows 8. Còn List View thì các bài biết sẽ theo dạng danh sách với hình Thumbnail kèm một đoạn trích dẫn trong bài viết. Việc chúng ta tạo một nút chuyển giữa Grid View và List View sẽ làm cho trang Blog của chúng ta thêm phần linh động và bắt mắt hơn
Bước 1:
Vào Edit HTML, Ctrl + F, tìm </head>
Bước 2:
Copy và Paste đoạn Script và CSS này lên phía trước thẻ </head>
Bước 3:
Tìm dòng <b:section class='main' id='main' showaddelement='no'>
Nếu không có thì bạn tìm <b:section class='main' id='main' showaddelement='yes'>
Bước 4:
Copy và Paste đoạn code sau ngay phía trên đoạn vừa tìm được
Lưu ý: Khi trước đó bạn đã sửa code trong template để tạo Read More cho các bài post thì phải xóa đi trước khi làm theo hướng dẫn này thì nút chuyển Grid View/List View mới hoạt động được. Chúc các bạn thành công.
<script type='text/javascript'> function list_view(){ if(document.getElementsByClassName("post")) {elementArray = document.getElementsByClassName("post"); while (elementArray.length) {elementArray[0].className = "post-grid-view";}} if(document.getElementsByClassName("post-title")) {elementArray = document.getElementsByClassName("post-title"); while (elementArray.length) {elementArray[0].className = "post-title-grid";}} } function grid_view(){ if(document.getElementsByClassName("post-grid-view")) {elementArray = document.getElementsByClassName("post-grid-view"); while (elementArray.length) {elementArray[0].className = "post";}} if(document.getElementsByClassName("post-title-grid")) {elementArray = document.getElementsByClassName("post-title-grid"); while (elementArray.length) {elementArray[0].className = "post-title";}} } </script> <script type='text/javascript'> posts_no_thumb_sum = 100; posts_thumb_sum = 350; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>'; summ = posts_thumb_sum; } else { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJoe4_nDbkGqAczPhivkITWQJ0qFsWN8cbpfMf2yPzh9WykxiqTkYA0V8KaAVZy9RhA2Pkhyz525NSj_Oux-WokVXDrqYHwz5DEkPctDIo5WKJANCd025XXvoIf6GMo5eO4lX3jlkviT6/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <style> #list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;} #list-view-button a{text-decoration: none; color: #666;} .grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;} .list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;} .post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; } .post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;} .post-grid-view .post-header {display: none;} .post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;} .post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: 'Open Sans Condensed', sans-serif;} .post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;} .post-title-grid a { font-size:170%;color: #777;font-family: 'Open Sans Condensed', sans-serif;} .post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;} .post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: 'Open Sans Condensed', sans-serif;} .post-grid-view .post-footer a{color: #128EC9;} .post-grid-view a.comment-bubble {display: none;} .main-inner .column-center-inner .section {margin: 0px !important;} .post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} #blog-pager {clear:both;} .post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;} .date-header {display: none;} h3.post-title a {font-size:90%;font-family: 'Open Sans Condensed', sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;} h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;} h3.post-title:hover {opacity: 1;} .posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;} .post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;} .post-body a {text-decoration: none;} .post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;} .post-summary-text {display: none;} a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: 'Pacifico', cursive;z-index: 122;} a.comment-bubble:before { content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbMeANJnQULmsy5qYWJVeSx5ENmaIy4P5o79kSCDxWOkt_NtGrHMWlBgaB8TJxrYMe-uojJk87VIgvijvq1_DJPYa7IT8b3OElr5v6h4T0YHYGFjC_EONwVVkBNyV6qCOuABh2i3B8XTfu/s1600/heart-active.png);} .post-header,.post-footer {display:none;} </style></b:if></b:if> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
Bước 3:
Tìm dòng <b:section class='main' id='main' showaddelement='no'>
Nếu không có thì bạn tìm <b:section class='main' id='main' showaddelement='yes'>
Bước 4:
Copy và Paste đoạn code sau ngay phía trên đoạn vừa tìm được
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVI8VfkrbSVnMkfZ5WVfWqLnJArZ0dpBE70oSXat_5BOLMmczLQNcP1R-boe9Ugx3H303Av-N3hXuJ1BXS4Bmvv3ziKReSxDEKnO_euehMFDfN4pjdOdx2ytL95Gcc9CZJHhJQHk9yL1tX/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPzZu50tyFb53c6zVUy6f-rLUMBzsWSPnyYErG3XCitHBOw4ZEC6N4alXBNlC6zP0VCDyEgB4HyolEOKn4eyj00KnQMHkmHTGmKunYeTtq7XLEFoAIzUggcu8X91PpakGEAcNaBNnHAe7f/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div> </b:if></b:if>
Bước 5:
Chú ý làm cẩn thận, tìm đoạn <data:post.body/> sẽ có 3 kết quả, bạn thay đổi đoạn thứ 2 và thứ 3 bằng đoạn code sau (có nghĩa là giữ lại đoạn <data:post.body/> ở lần tìm đầu tiên)
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> <b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/> </a> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> </b:if>
Lưu ý: Khi trước đó bạn đã sửa code trong template để tạo Read More cho các bài post thì phải xóa đi trước khi làm theo hướng dẫn này thì nút chuyển Grid View/List View mới hoạt động được. Chúc các bạn thành công.
Tạo nút chuyển Grid View/List View Cho Blogspot
Reviewed by Unknown
on
10:24
Rating:
Reviewed by Unknown
on
10:24
Rating:
