Home » Archives for tháng 6 2013

Popular Posts - Thuật bộ đếm và giao diện màu sắc cho bài viết phổ biến trong Blogger

19:43 |
Thủ thuật blogger / thủ thuật blogspot này sẽ hướng dẫn các bạn cách thêm nhiều màu khác nhau và số đếm trong Popular Post Widget của blogger. Điểm nổi bật của thủ thuật này là bạn không cần phải thêm bất kỳ JavaScript nặng hoặc bất thuộc tính nào khác, bạn chỉ cần thêm 1 đoạn CSS đơn giản. Ngoài ra, bạn có thể tùy chỉnh widget này với việc sử dụng trình thiết kế mẫu của blogger. Chúng ta hãy đi đến hướng dẫn.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
Popular Posts - Thuật bộ đếm và giao diện màu sắc cho bài viết phổ biến trong Blogger
Bước 1 » Thêm widget Popular Posts vào blogspot của bạn!
1.1- Đăng nhập vào Blogger / Blogspot
1.2- Vào mẫu (Templates)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5- Bấm chỉnh sửa tiện ích Popularposts và cài đặt:

  • Chọn "hiển thị tối đa" 9 bài viết.
  • Bỏ chọn hình ảnh thu nhỏ và đoạn trích.
1.6- Lưu tiện ích lại.
 
Bước 2 » Tùy biến widget Popular Posts của bạn! 
1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sử HTML. 
4- Tìm thẻ  ]]></b:skin>:(Mẹo: Bấm Ctrl+F để tìm). Và dán code bên dưới vào trước nó.
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Sau đó Lưu mẫu lại và xem kết quả.!
Xem thêm…

Khung Comments - Thủ thuật đưa khung nhận xét lên đầu những nhận xét trong Blogger

23:37 |
Mặc định blogspot thì tất cả các khung nhận xét đều nằm bên dưới của các nhận xét đã được xuất bản. Thủ thuật Blogger / Thủ thuật blogspot sẽ hướng dẫn các bạn cách để di chuyển khung đăng nhận xét lên trên các nhận xét đã được xuất bản trong mẫu thread comment mới của blogger(cách làm tương tụ như với mẫu cũ của blogger.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

Khung Comments - Thủ thuật đưa khung nhận xét lên đầu những nhận xét trong Blogger
1- Đăng nhập vào Blogger / Blogspot
2- Vào mẫu (templates)
3- Chọn Chỉnh sử HTML (Edit HTML)
3- Bấm chuột vào một vị trí bất kỳ trong khung chỉnh sửa HTML => Bấm tổ hợp phím Ctrl+F để mở hộp tìm kiếm nội tuyến và tìm đoạn code như bên dưới:
<p class='comment-footer'>
  <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
  <b:else/>
    <data:post.noNewCommentsText/>
  </b:if>
</p>
Hãy cắt đoạn code đó sau đó dán vào trong Notepad hoặc Microshoft Word để sử dụng cho bước tiếp theo.
4- Tiếp tục kéo lên trên một chút bạn sẽ thấy đoạn code như sau: 
<div class='comments' id='comments'>
Xem thêm…

Sitemap - Thủ thuật tạo Sitemap dạng bảng cho Blogger

23:20 |
Mục lục (Sitemap) là phần rất quan trong của blog. Nó giúp các độc giả có cài nhìn tổng quan về blog của bạn. Qua đó có thể theo dõi các bài viết của bạn theo từng chuyên mục. Thủ thuật blogger / thủ thuật blogspot sẽ giới thiệu cho các bạn sitemap dạng bảng (Tabbed) được thiết kế bởi DTE;] với nhiều tùy chọn hơn, về cơ bạn gần giống như một menu dọc xổ ngang ra các bài viết.
Sitemap - Thủ thuật tạo Sitemap dạng bảng cho Blogger
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger
1. Đăng nhập vào tài khoản Blogger/Blogspot
2. Vào Trang (Trang)
3. Chọn Trang mới (New page) => Trang trống (page blank)
4. Đặt tên cho trang như: Sitemap, mục lục,...
5. Tích chọn vào tab HTML của trang vè dán code bên dưới vào
<link rel="stylesheet" href="http://thietkewebplus.googlecode.com/files/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loadding...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.thietkeblogger.net/", 
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://thietkewebplus.googlecode.com/files/tabbed-toc.js"></script>
  • Thay http://www.thietkeblogger.net/ bằng URL blog của bạn.
  • containerId: "tabbed-toc", Yếu tố ID sẽ được sử dụng như một container cho JSON đã được xử lý (bỏ qua nếu không cần thiết).
  • Thay chữ Loadding... thành chữ bạn muốn ví dụ đang tải....
  • Trong code trên tab hiển thị  khi ta load trang là nhãn đầu tiên. Chọn nhãn hiển thị khi load trang bằng cách thay đổi activeTab: 1.
  • showDates: false, quy định ngày tháng đăng bài. để hiển thị ngày tháng của bài đăng sửa false thành true.
  • showSummaries: false, Để hiển thị phần mô tả cho từng bài viết hãy sửa false thành true.
  • numChars: 200 Số ký tự mô tả hiển thị
  • showThumbnails: false quy định ảnh thu nhỏ. Để hiển thị ảnh thu nhỏ cho các bài viết hãy sửa false thành true.thumbSize: 40, là kích thước ảnh. Trong ví dụ này chiều rộng và chiều cao đều là 40px
  • monthNames  là tên các tháng sẽ hiển thị
  • newTabLink: true, là hiển thị bài viết trong tab mới khi click chuột vào tiêu đề. Để tắt chức năng hãy sửa True thành false.
  • maxResults: 99999, là Số bài tối đã sẽ hiển thị trên site map. Hãy thay đổi giá trị 9999.
  • preload: 0, tải trang sau 0 giây. Giời gian ở đây tính là mili giây (1s=1000mls).  Hoặc đơn giản là viết "onload" để tiện ích này tải sau khi toàn bộ trang đã tải hoàn tất.
  • sortAlphabetically: true, Là xắp xếp theo thứ tự bảng chữ cái aphabe. Nếu muốn hiển thị theo ngày đăng thì sửa false thành true.
  • showNew: 7, số bài viết gần đây nhất sẽ được dán nhãn new.
  • newText: " - <em style='color:red;'>New!</em>" là chũ sẽ hiển thị bạn có thể dùng mã HTML để tạo màu chữ. Có thể thay chữ new thành chữ bạn muốn.
Xem thêm…

Auto Readmore - Thủ thuật hiện bài viết ở trang chủ có ảnh cho Blogger

23:05 |
Thủ thuật Blogger / Thủ thuật Blogspot sẽ giới thiệu thêm cho các bạn một kiểu tóm tắt bài viết ở trang chủ (Auto readmore) sử dụng javarscripts. Trong tiện ích này có ảnh thumbnail cùng một hàng với tiêu đề và mô tả.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán code bên dưới vào trước thẻ ]]></b:skin>.
/*read more by http://www.thietkeblogger.net/ */
.post-header-line-1{font-style:italic;font-size:11px;margin:0 0 6px 133px}
.post img{margin:10px 0 6px}
.post h2{margin-left:133px;font-size:110%}
.numberingcomments a:link,.numberingcomments a:visited{float:right;color:#36F;text-decoration:none;padding-right:10px;padding-top:5px;padding-left:10px;font-weight:700}
.numberingcomments a:hover,.numberingcomments a:active{color:#FF0A47}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
5. Chèn tiếp code bên dưới vào trước thẻ </head>
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<!-- readmore style 3 http://namkna.blogspot.com/ -->  
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
</b:if>
  • summary_noimg = 400; là số ký tự của phần mô tả 
  • summary_img = 160; là số ký tự của phần tiêu đề. 
  • img_thumb_height = 85; là chều cao của ảnh thumbnail 
  • img_thumb_width = 124; là chều rộng của ảnh thumbnail
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới 
<data:post.body/>
Thay thế code vừa tìm được thành đoạn code bên dướ (Lưu ý có tùy theo template mà có từ 2 đến 4 đoạn code như bên trên. bạn phải thay đúng vị trí thì mới hoạt động nha.): 
<!-- Start auto read more www.thietkeblogger.net -->
<!-- BAI VIET KHI XEM LABEL -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<span class='post-header-line-1'><b:if cond='data:top.showAuthor'>
<data:post.timestamp/> |  <script>var ngaygio =&#39;<data:post.dateHeader/>&#39;;</script><script>document.write(ngaygio);</script></b:if></span>
<div style='clear: both;'/>    
<div class='post-body'>    
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</div><div style='clear: both;'/>       
</b:if>  
      <!-- XEM BAI VIET -->
<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>
<div class='clear'/>  
<!-- End Auto readmore use scripts for blogspot style 3 - http://www.thietkeblogger.net/-->
8. Lưu mẫu lại và xem kết quả nha.
Xem thêm…

Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger

22:53 |
Bình thường khi xem bài viết ở các trang như trang chủ, trang nhãn, trang lưu trữ blog (gọi chung là kiểu trang index) các bài viết sẽ hiển thị không theo một quy cũ nào hết. Chúng hiển thị theo cách viết của bạn khi đăng bài. Thủ thuật Blogger / Thủ thuật blogspot sẽ hướng dẫn các bạn cách tóm tắt bài viết ở trang chủ một cách tự động thành 2 cột song song không sử dụng javarscripts.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger
» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips (xét theo khía cạnh nào đó còn giúp tăng tốc blog vì nó thu nhỏ ảnh thumbnail và tóm tắt lại nội dung bài viết ở trang chủ của bạn.
» Bố cục gồm 2 cột bài viết xép thẳng hàng.
» Ảnh thumbnail và tiêu đề bài viết + mô tả nằm trên cùng một hàng.
» Phần mô tả hiển thị bằng mã CSS do vậy không bô đen được.
1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> .
Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px &#39;Arial&#39;, serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-snippet:before{content:attr(data-snippet);}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:45.8%;height:95px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma}
.post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
.post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
</style>
</b:if></b:if>
5. Tìm dòng code: 
<data:post.body/>
Thay thế thành code bên dưới. 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</b:if>
6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5) 
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
Thay thế nó thành:
<!-- anh thumbnail trang chu -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
   <b:else/>
    <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwVA5lmzExM5i-pFFdngtpHlI6HIPZXaVLZNPaO7DdyPT-WzOyjbyz8yD7G0lL9JYY5im-wQAB-unLajG2De0g55zyWcZqfJML7lFMEgiw2oOxOqbT7tXDimk-DRIenairEIczOi1DtVI/' width='72px'/>
   </b:if>
   </b:if> 
</b:if>

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
    </b:if>
7- Lưu mẫu lại và xem kết quả nha.
8- Bạn vào cài đặt => bài dăng và nhận xét và Tại mục hiển thị tối đa bạn chỉnh số bài cần hiển thị lại cho phù hợp.Lưu ý bạn nên để số bài là số chẵn vì tiện ích có 2 cột nếu để số lẻ sẽ bị hụt nha.
Xem thêm…

Rainbow PopularPosts - Thủ thuật bài viết phổ biến cầu vồng có đánh số cho Blogger

22:41 |
Popular posts là 1 tiện ích được cung cấp bởi Blogger, Tiện ích này hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger

» Chỉ dùng CSS.
» Hiệu ứng xoay ảnh thumbnail bằng mã CSS.
» CÓ dố đếm tối đa 9 bài nhiều hơn so với mẫu cũ chỉ có 5 bài.
» Bài viết hiển thị dạng phân cấp thụt vào (tối đa 9 cấp)
1.1- Đăng nhập vào Blogger / Blogspot
1.2- Vào mẫu (Templates)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5- Bấm chỉnh sửa tiện ích Popularposts để xác định Id và trong ví dụ bài này Id là PopularPosts1)
  • Chọn "hiển thị tối đa" 9 bài viết.
  • Chọn hình ảnh thu nhỏ và bỏ chọn mục đoạn trích.

1.6- Lưu tiện ích lại.
2.1- Đăng nhập vào Blogger / Blogspot2.2- Chọn Mẫu (Templates)2.3- Chọn Chỉnh sử HTML (Edit HTML)
2.4- Tìm thẻ  ]]></b:skin>: Và dán code bên dưới vào trước nó:
/* Rainbow Popular repost by http://www.thietkeblogger.net*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}
#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: sbale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotatd(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}
2.5- Tìm trong templates đoạn code như bên dưới: 
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>
Thay thế nó bằng đoạn mã dưới đây. 
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwVA5lmzExM5i-pFFdngtpHlI6HIPZXaVLZNPaO7DdyPT-WzOyjbyz8yD7G0lL9JYY5im-wQAB-unLajG2De0g55zyWcZqfJML7lFMEgiw2oOxOqbT7tXDimk-DRIenairEIczOi1DtVI/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwVA5lmzExM5i-pFFdngtpHlI6HIPZXaVLZNPaO7DdyPT-WzOyjbyz8yD7G0lL9JYY5im-wQAB-unLajG2De0g55zyWcZqfJML7lFMEgiw2oOxOqbT7tXDimk-DRIenairEIczOi1DtVI/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>
Lưu ý: VỚi những Blog có Id là PopularPosts2 (hoặc PopularPosts3) thì các bạn đổi toàn bộ phần PopularPosts1 (màu xanh) thành PopularPosts2 (hoặc PopularPosts3) nha.
Xem thêm…

Popup - Thủ thuật tạo Popup cảnh báo khi rời khỏi trang web cho Blogger

19:28 |
Bình thường khi muốn thoát khỏi một web site bạn chỉ cần bấm vào dấu x màu đỏ góc trên bên phải của trình duyệt. Nhưng bạn nghĩ sao khi blog/web của bạn sẽ xuất hiện một thông báo popup yêu cầu độc giả xác nhận việc họ muốn rời khỏi blog của bạn? Với thủ thuật blogger / thủ thuật blogspot này khi độc giả lỡ tay click chuột nhàm vào nút tắt thì cũng không thoát ra khỏi trang web của bạn nếu họ chưa xác nhận.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger
1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ</head> và dán code bên dưới sau thẻ </head> vừa tìm được:
<script> var exittraffic_splashalertmessage = "Bạn đã xem hết trang web chưa!"; </script>
<script type='text/javascript'>
//<![CDATA[
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
function DisableExitTraffic() {
PreventExitSplash = true;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function addClickEvent(a, i, func) {
if (typeof a[i].onclick != 'function') {
a[i].onclick = func;
}
}
theBody = document.body;
if (!theBody) {
theBody = document.getElementById("body");
if (!theBody) {
theBody = document.getElementsByTagName("body")[0];
}
}
var PreventExitSplash = false;
var LightwindowOpening = false;
function DisplayExitSplash() {

if (PreventExitSplash == false) {


window.scrollTo(0, 0);
if (is_firefox) {
//window.alert(exittraffic_splashalertmessage);
}
PreventExitSplash = true;
if (is_chrome||is_firefox) {
timeout_variable = setTimeout("exittraffic_change_url();", 1000);
} else {
document.location.href = exittraffic_RedirectUrl;
}

return exittraffic_splashalertmessage;
}
}
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
disablelinksfunc = function() {
var a = document.getElementsByTagName('A');
for (var i = 0; i < a.length; i++) {
if (a[i].target !== '_blank') {
addClickEvent(a, i, function() {
PreventExitSplash = true;
});
}
else {
addClickEvent(a, i, function() {
PreventExitSplash = false;
});
}
}
}

addLoadEvent(disablelinksfunc);

disableformsfunc = function() {
// Makes that clicking on the links on the page will not cause this popup to appear
var f = document.getElementsByTagName('form');
for (var i = 0; i < f.length; i++) {
if (!f[i].onclick) {
f[i].onclick = function() {
if (LightwindowOpening == false) {
PreventExitSplash = true;
}
}
}
else if (!f[i].onsubmit) {
f[i].onsubmit = function() {
PreventExitSplash = true;
}
}
}
}

function exittraffic_change_url() {
disable_confirmation = false;
clearTimeout(timeout_variable); // just to make sure
document.location.href=exittraffic_RedirectUrl;
}

addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;
//]]>
</script>
5 - Lưu mẫu lại và xem kết quả nha.
Xem thêm…

Keywords - Thủ thuật tự động chèn từ khóa vào bài viết Blogger

19:11 |
Bình thường để chèn link vào một từ khóa trong bài viết bạn phải thực hiện thủ công. Như vậy với bài viết có nhiều từ khóa sẽ rất bất tiện. Thủ thuật blogger / thủ thuật blogspot sẽ hướng dẫn các bạn cách để tự động chèn liên kết (link) vào các từ khóa (keywork) nằm trong bài viết của bạn mà không phải vất vả thêm thủ công từng link bằng tay...

>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger
1. Đăng nhập vào tài khoản Blogger / Blogspot

2. Vào Mẫu (Templates)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chọn một trong 2 đoạn code bên dưới và chèn nó  ngay trước thẻ </head>
(Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này):Đoạn 1:  Các liên kết mở ngay tại trang bạn đang xem:
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>
Đoạn 2: Các link mở ra trong tab mới khi click chuột vào thì hãy dùng đoạn code bên dưới:
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" target="_blank">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>
5. Tìm đoạn code sau:
<data:post.body/>
Và thay thế nó thành: 
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 3',true,'Link từ khóa 3','summary<data:post.id/>');
</script>
Lưu ý: Mỗi blog thường có từ 2 đến 4 đoạn code <data:post.body/> như trên. Các bạn phải chèn đúng vị trí mới hiển thị.
  • Thay Từ khóa 1,2,3 thành các từ khóa bạn hay sử dụng trong blog.
  • Thay Link từ khóa 1,2,3 thành link tương ứng với các từ khóa.
Để thâm một từ khóa mới bạn chỉ cần thêm đoạn mã bên dưới vào trước thẻ </script> của đoạn code trên. 
highlightSearchTerms('Từ khóa n',true,'Link từ khóa n','summary<data:post.id/>');
6. Lưu mẫu lại.

Giờ hãy tạo một bài viết mới chứa các từ khóa như bạn đx thiết lập ở đoạn scripts trong bước 6 rồi xuát bản và xem kết quả nha.
Xem thêm…
Copyright ©THT - Được biên soạn và sưu tầm từ nhiều nguồn khác nhau - Ghi rõ nguồn:duy3s.com/ - Khi phát hành thông tin trên trang này
Confession | Namkna | khoa học tâm linh | Kho tài liệu hay |