Ads Nhà Tài Trợ
Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

Xem bài viết dạng lưới và dạng liệt kê danh sách (grid and list view)

Kiểu 1 : * Chèn đoạn css sau ]]></b:skin> :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> /*FONT PT Sans Narrow*/ @font-face { font-family:'PT Sans Narrow'; font-style:normal; font-weight:400; src:local('PT Sans Narrow'),local('PTSans-Narrow'), url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff'); } /* CSS Untuk Tombol Switch*/ .switch { border-bottom:5px solid #CC0000; height:35px; color:#444; margin:0 10px; padding:5px 9px; text-transform:uppercase; } .switch-left { width:360px; float:left; margin:0 auto; padding-top:5px; font:20px PT Sans Narrow; text-shadow:1px 1px 0 #000; color:#AAA; } .switch-right { width:120px; float:right; margin:0 auto; padding-top:10px; } .switch a { border:1px solid #999; font:11px Arial; padding:3px 8px 3px 25px; text-transform:none; color:#aaa; } a.bar_view { background:url(http://2.bp.blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center; } a.dat_view { background:url(http://1.bp.blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/s1600/listed.gif) no-repeat 3px center; } .switch a.active { background-color:#aaa; border:1px solid #999; color:#111; cursor:default; } /* CSS Bar untuk bagian grid */ .bar { background-color:rgba(0,0,0,0.3); border:1px solid #000; box-shadow:0 0 0 1px #333; -moz-box-shadow:0 0 0 1px #333; -webkit-box-shadow:0 0 0 1px #333; -o-box-shadow:0 0 0 1px #333; display:inline; float:left; height:160px; list-style:none; margin:10px 0 0 9px; overflow:hidden; padding:2px 3px 5px; position:relative; text-align:center; width:160px; } .bar h3 { height:30px; border:0 none; line-height:8px; margin:0 5px 5px; padding:2px; text-shadow:1px 1px 0 #000; } .bar h3 a { font:14px PT Sans Narrow; text-align:center; line-height:16px; } .bar h3 a:hover { color:#c1541a; } .bar .post-body { background:none; height:245px; overflow:hidden; width:167px; padding:0; margin:0 0 .3cm; } .bar img { float:left; height:110px; margin:0 18px; width:110px; } </style> </b:if></b:if>
* Kế đến chèn đoạn code sau trên thẻ </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /** * jQuery switch * * active class active pada switch grid atau list * update by denddy gustiana * http://under-88.blogspot.com/ * https://plus.google.com/109783772548428705949 * */ jQuery(document).ready(function () { var $box=jQuery(".post"), $bar=jQuery("a.bar_view"); $dat=jQuery("a.dat_view"); $dat.click(function () { $box.removeClass("bar"); jQuery(this).addClass("active"); $bar.removeClass("active"); jQuery.cookie("dat_style", 0); return false }); $bar.click(function () { $box.addClass("bar"); jQuery(this).addClass("active"); $dat.removeClass("active"); jQuery.cookie("dat_style", 1); return false }); if(jQuery.cookie("dat_style")==0) { $box.removeClass( "bar"); $dat.addClass("active") } else { $box.addClass("bar"); $bar.addClass("active") } }); //]]> </script>
* Tìm đoạn code <div class='post hentry uncustomized-post-template'> hoặc <div class='post hentry'> thêm bar vào giữa 'post hentry' code mới có dạng :
<div class='post bar hentry uncustomized-post-template'> hoặc <div class='post hentry'>
* Cuối cùng tìm đoạn code <b:section class='main' id='main' ..... và chèn bên trên nó đoạn code sau :
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div class='switch'> <div class='switch-left'> <span style='color: #CC0000;'>Recent</span> Post </div> <div class='switch-right'> <a class='bar_view' href='#'>Grid</a> <a class='dat_view' href='#'>List</a> </div> </div> </b:if></b:if>
Kiểu 2 : * Chèn đoạn code sau bên trên thẻ </head> :
<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</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="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<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: &#39;Open Sans Condensed&#39;, 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: &#39;Open Sans Condensed&#39;, 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: &#39;Open Sans Condensed&#39;, 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: &#39;Open Sans Condensed&#39;, 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: &#39;Pacifico&#39;, cursive;z-index: 122;}
a.comment-bubble:before { content: &quot;Comments: &quot; url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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'/>
* Sau đó tìm đoạn code <b:section class='main' id='main' name='Main' ... chèn đoạn code sau bên trên nó :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/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='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>
* Tìm đoạn code sau <data:post.body/> ở vị trí thứ 2 và thứ 3 thay nó bằng đoạn code sau :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if> Kiểu 3 :
* Chèn đoạn code sau bên trên thẻ </head> :
<!-- Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* List/Grid Post Buttons
----------------------------------------------- */
#exe_list_grid_button {text-align:right;cursor:pointer;margin-bottom:10px;font-size: 14px;font-style: italic;}
.exe_grid_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}
.exe_list_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}
/* List/Grid Post CSS
----------------------------------------------- */
.post{position:relative;width:100%;}
.post-title {font-size:40px;}
.exe_post_grid {width:46.7%;height:690px;float:left;margin:10px;position:relative;display: block;}
.exe-post-title-grid { font-size:25px;}
</style>
<script type='text/javascript'>
function exe_gridview(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe_post_grid&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe-post-title-grid&quot;;}}
}
</script>
<script type='text/javascript'>
function exe_listview(){
if(document.getElementsByClassName(&quot;exe_post_grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe_post_grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;exe-post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe-post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 1000;
summary_img = 500;
img_thumb_height = 250;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
 Auto List/Grid Post Switcher By Button Script And Blogger Posts Thumbnail & ReadMore (Dec 25, 2013)
Copyright (c) 2013 EXEIdeas From www.exeideas.com
*/
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){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
</b:if>
</b:if>
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End-->
* Sau đó tìm đoạn code <b:section class='main' id='main' name='Main' ... chèn đoạn code sau bên trên nó :
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<div id='exe_list_grid_button'>See Our Articles In Different Styles... <a class="exe_grid_button" onclick='exe_gridview()'><img style="margin: -6px 1px -6px -6px;width: 21px;" src='http://i.imgur.com/2Co5Gi4.png' /> Grid View</a> <a class="exe_list_button" onclick='exe_listview()'><img style="margin: -6px 1px -6px -6px;width: 21px;" src='http://i.imgur.com/LD1BHTv.png' /> List View</a></div><hr />
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End  -->
* Tìm đoạn code sau <data:post.body/> ở vị trí thứ 2 và thứ 3 thay nó bằng đoạn code sau :
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End-->
Tags

Hiện thêm

Đăng nhận xét

0 Nhận xét
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Sở hữu một thiết kế thanh lịch và vô cùng đẳng cấp, mang trong mình một hiệu năng "cực khủng", chụp ảnh, quay phim chất lượng hàng đầu nhờ cụm 3 camera 50 MP. Thiết bị hoàn hảo dành cho dân làm việc văn phòng theo mô hình Workcation thích du lịch khám phá, làm Việc Từ Xa,... Thiết bị công nghệ số cực ngon dành cho TELEWORK, WFH, người làm nghề MMO, KOC / Streamer,...

Xem Giá Bán
Laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất. Thiết kế lai giữa laptop gaming và máy tính bảng sáng tạo, sang chảnh, trang bị công nghệ tân tiến nhất, chinh phục mọi giới hạn cùng với cấu hình vượt trội.

Xem Giá Bán