%
Xe đạp thể thao Road Vivente 700C-LINE 27.5 inch [ Màu cam ]
Xe Đạp
Thể Thao
%
XE ĐẠP THỂ THAO KHUNG NHÔM VÀNH 26 INCH
Xe Đạp
Thể Thao
%
Sạc dự phòng mini YM300S 20000mAh kèm dây cáp, 4 cổng kết nối tiện dụng
Pin Sạc
Dự Phòng
%
Sạc dự phòng 20000mAh sạc nhanh 18W QC3.0/PD mã ONC Flash Titan hiển thị LCD
Pin Sạc
Dự Phòng

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-->
Sạc dự phòng tích hợp màn hình Led Dung Lượng 10000MAH

Xem sản phẩm,...

Đăng nhận xét

Mới hơn Cũ hơn
Shop Mua Sắm Online Công Nghệ 4.0