Hiển thị các bài đăng có nhãn google. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn google. Hiển thị tất cả bài đăng

18 thg 3, 2011

Sitemap widget – Sơ đồ Blog cho Blogger

0 nhận xét
 
Sơ đồ Blog - Sitemap hay còn gọi là Table of Contents là một bảng phụ lục liệt kê tất cả các bài viết trên Blog theo từng trương mục ( Labels ) hoặc theo thời gian ( Archived ) một cách tự động.
Cùng với các tiện ích như Numbered Page Navigation, Related Posts hay Breadcrumb, góp phần tạo nên sự điều hướng dễ dàng và thuận tiện cho độc giả, giúp gia tăng Pageview và giữ chân độc giả ở lại Blog bạn lâu hơn.
Ý tưởng bắt nguồn từ Amanda - một Blogger tên tuổi, sau đó được Abu-Farhan cải tiến giúp tiện ích trở nên đơn giản và bắt mắt hơn.
Chính vì những lợi ích rất thiết thực mà tiện ích mang lại, hôm nay iTechPlus xin giới thiệu đến các bạn 3 style của tiện ích này nhằm giúp các bạn có nhiều sự lựa chọn phù hợp cho Blog của mình.
Style 1 : Table of Contents by Label
Table of Contents by Label
1. Vào Chỉnh sửa Bài đăng > Chỉnh sửa Trang > Trang mới để đặt tiện ích trên một Static Page
2. Chuyển qua chế độ Chỉnh sửa HTML và dán vào đoạn code bên dưới
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.itechplus.info/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
3. Thay đoạn code in đậm bằng địa chỉ blog bạn rồi nhấn Xuất bản trang là OK.
* Vì là một trang Page nên bạn có thể đặt đâu tùy ý, hoặc get link và tạo một liên kết trên thanh menu giống iTechPlus chẳng hạn.
Style 2 : Table of Contents by Date ( Archived )
Table of Contents by Archived
Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://www.itechplus.info/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Style 3 : Table of contents and Accordion
Table of contents and Accordion
Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.itechplus.info/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
* Lưu ý : các bạn nên download các file .js và .css về lưu trữ hoặc upload lên host riêng đề phòng trường hợp host trên die.
Như vậy là bạn đã tạo cho mình một Sơ đồ Blog update bài viết hoàn toàn tự động rồi đó.
Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

Tạo “Friend Connect” widget cho Blogger

0 nhận xét
Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.
Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.
Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :
  • Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer ( bên ngoài content-wrapper ).
  • Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác. Chi tiết bạn có thể xem tại đây.
Chính vì lý do đó, và cũng theo yêu cầu của bạn Trung, hôm nay iTechPlus sẽ giới thiệu đến các bạn từng bước để tạo tiện ích này một cách dễ nhất.
Tạo “Friend Connect” widget cho Blogger

Hình minh họa
1. Chuẩn bị
- Favicon của Blog bạn muốn liên kết
- Link đến Blog bạn muốn liên kết
2. Thực hiện
- Vào Thiết kế > Phần tử trang
- Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới ( không cần tạo tiêu đề cho widget )
<style type="text/css">
#itechconnect{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3xMEvHtoOdrWmuuO1BDrKveF5QpO3664ENAnq1GLqWo9zgTw8dx-HxuLU_NbhVWqykxYHGgVtzAlpqnICaWa7M2RBNwHOQxOpJeskAIsSzgmj1zoenIHIh1BKbvhXqmk0Y3YjOyPcuM/) no-repeat bottom right; font-weight:bold}
#itechconnect p {margin:0; padding:2px 10px}
.favicon {width:16px; height:16px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style>
<div id="itechconnect">
<center style="margin-bottom:15px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD5ARKMD2rEeEpH78u1NYylVGQGYnD9nBeLE0fucd8gqjMOBbVGLI24z62Sfrc8FIQTRQ7H1xRCBtH1w9uuALdmX-Yw4L_a5MT4PDw7esckYrubDynHGnWWQYgFLaxXddfLaDLrB0Rw8/" class="connect"/><a href="http://www.itechplus.info/">KẾT NỐI BẠN BÈ</a></center>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">iTechPlus.info</a></p>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">VNPCTech</a></p>
<!—tương tự cho các liên kết khác -->
</div>
Thay đoạn code được in đậm cho phù hợp.
Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà
Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

Related Posts – Bài viết liên quan cho Blogger

0 nhận xét
Một phương pháp tương đối dễ dàng để tăng số lượng Page Views trên blog của bạn là thêm một danh sách các bài liên quan bên dưới mỗi bài viết. Điều này cung cấp cho độc giả nhiều thông tin liên quan hơn đến chủ đề mà họ đang theo dõi.
Đây là một tiện ích được sử dụng rất phổ biến, và nó cũng có rất nhiều “biến thể”. Hôm nay iTechPlus sẽ giới thiệu đến các bạn một số style được sử dụng phổ biến nhất trên các trang Web/Blog trong cũng như ngoài nước, nhằm cung cấp cho các bạn có nhiều lựa chọn hơn trong việc áp dụng vào Blog của mình.
A. Style 1 : Related Posts Widget for Blogger v1 ( BloggerPlugins )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1AtWSE49oK2-WH_9ewa5pACx1h8-6eBT6lLMhxoYQIKS5rvpHyrgGaxMRbDcRP7L8Pht6zFZD2ymPRV8xXdT9-i-6klxBgmpstbWikqd5CnXKtPKa3oKzM-UdQrQ0PZ15Wkql_GveU68/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
</b:if>
3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<div class='post-footer-line post-footer-line-1'>
hoặc
<p class='post-footer-line post-footer-line-1'>
và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>
với var maxresults=5; là số bài viết sẽ hiển thị trong widget ( mặc định là 5 )
4. Save Template
B. Style 2 : Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYO3QbkA7rQRebIHBL9E6uP4D_tL6CDxBexts6r73Zf7Odlv8M9bk35pxeit-WZT-2NF_0zkrQ5Y1cFiJLY95MQkJcEm0IfkW0nBtaEM9Tb7nqndRQcU3pB-ymnJoFGdYxv5-B8j8ifv0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<div class='post-footer-line post-footer-line-1'>
hoặc
<p class='post-footer-line post-footer-line-1'>
và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.itechplus.info/' ><img style="border: 0" alt="Kiến thức – Thủ thuật – Giải pháp công nghệ" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
4. Thay thế code màu đỏ theo ý bạn
5. Save Template.
C. Style 3 : Related Posts by Categories ( Jackbook )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Tìm trong Template của bạn đoạn code sau :
<data:post.body/>
hoặc
<p><data:post.body/></p>
và ngay sau nó chèn đoạn code bên dưới :
<b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
        <div class='widget-content'>
        <h3>Related Posts by Categories</h3>
        <div id='data2007'/><br/><br/>
            <script type='text/javascript'>
            var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
            var maxNumberOfPostsPerLabel = 4;
            var maxNumberOfLabels = 10;
            maxNumberOfPostsPerLabel = 10;
            maxNumberOfLabels = 3;
            function listEntries10(json) {
              var ul = document.createElement(&#39;ul&#39;);
              var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                             json.feed.entry.length : maxNumberOfPostsPerLabel;
              for (var i = 0; i &lt; maxPosts; i++) {
                var entry = json.feed.entry[i];
                var alturl;
                for (var k = 0; k &lt; entry.link.length; k++) {
                  if (entry.link[k].rel == &#39;alternate&#39;) {
                    alturl = entry.link[k].href;
                    break;
                  }
                }
                var li = document.createElement(&#39;li&#39;);
                var a = document.createElement(&#39;a&#39;);
                a.href = alturl;
                if(a.href!=location.href) {
                    var txt = document.createTextNode(entry.title.$t);   
                    a.appendChild(txt);
                    li.appendChild(a);
                    ul.appendChild(li);   
                }
              }
              for (var l = 0; l &lt; json.feed.link.length; l++) {
                if (json.feed.link[l].rel == &#39;alternate&#39;) {
                  var raw = json.feed.link[l].href;
                  var label = raw.substr(homeUrl3.length+13);
                  var k;
                  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
                  var txt = document.createTextNode(label);
                  var h = document.createElement(&#39;b&#39;);
                  h.appendChild(txt);
                  var div1 = document.createElement(&#39;div&#39;);
                   div1.appendChild(h);
                  div1.appendChild(ul);
                  document.getElementById(&#39;data2007&#39;).appendChild(div1);
                }
              }
            }
            function search10(query, label) {
            var script = document.createElement(&#39;script&#39;);
            script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
             + label +
            &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
            script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
            document.documentElement.firstChild.appendChild(script);
            }
            var labelArray = new Array();
            var numLabel = 0;
            <b:loop values='data:posts' var='post'>
              <b:loop values='data:post.labels' var='label'>
                textLabel = &quot;<data:label.name/>&quot;;
                var test = 0;
                for (var i = 0; i &lt; labelArray.length; i++)
                if (labelArray[i] == textLabel) test = 1;
                if (test == 0) {
                   labelArray.push(textLabel);
                   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
                          labelArray.length : maxNumberOfLabels;
                   if (numLabel &lt; maxLabels) {
                      search10(homeUrl3, textLabel);
                      numLabel++;
                   }
                }
              </b:loop>
            </b:loop>
            </script>
        </div>
    </div>
</b:if>
3. Thay đổi code màu đỏ theo ý bạn, trong đó :
- maxNumberOfPostsPerLabel : số bài viết  tối đa được hiển thị theo mỗi Label
- maxNumberOfLabels : số Label được hiển thị
4. Save Template
Chúc các bạn thành công !

Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

Thanh trạng thái "breadcrumb" cho Blogspot

0 nhận xét
Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích “ Page Navigation – phân trang cho Blogspot “, cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.
Hơn nữa, với breadrumb, độc giả có thể biết được chủ đề mình đang theo dõi thuộc trương mục ( Breadcrumbs based on a post's category ) nào, thời gian nào ( Breadcrumbs based on a post's date ), có thể giúp gia tăng lượng click của độc giả và kéo họ ở lại Blog của bạn lâu hơn. Chính từ những ưu điểm đó, hôm nay iTechPlus sẽ giới thiệu cho các bạn 2 style của tiện ích này : một cái dựa trên trương mục ( có dạng : Browse » Home » Category » Post Title ) và một cái dựa trên thời gian ( có dạng : You are here: Home > Year > Month > Post Title )
A. Style 1 : Breadcrumbs based on a post's category ( BloggerPlugins )
1. Tìm đoạn code bên dưới :
<b:include data='top' name='status-message'/>
và thay thế thành :
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
2. Tiếp theo, tìm đoạn code này :
<b:includable id='main' var='top'>
và thay thế thành :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
3. Cuối cùng, thêm đoạn code CSS bên dưới vào trước thẻ đóng </b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
4. Save template
B. Style 2 : Breadcrumbs based on a post's date ( PurpleMoggy )
1. Tìm đoạn code tương tự như bên dưới :
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
Ngay sau nó các bạn chèn đoạn code này :
<b:include data='post' name='breadcrumbs'/>
2. Cuộn xuống dưới cùng của widget này ( xem hình minh họa bên dưới )
và dán code sau vào giữa </b:includable> và </b:widget> :
<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type="text/javascript">
//<![CDATA[
var strCrumbHref = location.href.toLowerCase();
var intCrumbHtml = strCrumbHref.indexOf('.html');
var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
var intCrumbYearStart = intCrumbWhereAt - 7;
var intCrumbMonthStart = intCrumbWhereAt - 2;
var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
var intCrumbYearPlusOne = intCrumbYear + 1;
var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
var strCrumbMonth = '';
switch(strCrumbMonthNum) {
case '01':
strCrumbMonth = 'January';
break;
case '02':
strCrumbMonth = 'February';
break;
case '03':
strCrumbMonth = 'March';
break;
case '04':
strCrumbMonth = 'April';
break;
case '05':
strCrumbMonth = 'May';
break;
case '06':
strCrumbMonth = 'June';
break;
case '07':
strCrumbMonth = 'July';
break;
case '08':
strCrumbMonth = 'August';
break;
case '09':
strCrumbMonth = 'September';
break;
case '10':
strCrumbMonth = 'October';
break;
case '11':
strCrumbMonth = 'November';
break;
case '12':
strCrumbMonth = 'December';
break;
}
var strCrumbOutput = ' > ';
strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';
strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
document.write(strCrumbOutput);
//]]>
</script>
<noscript>
<b:if cond='data:post.labels'>
>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
</b:if>
</noscript>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>
3. Cuối cùng, chèn đoạn code sau vào trước thẻ đóng </b:skin>
.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}
4. Save template
Chúc các bạn thành công !
 Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

Hướng dẫn SEO cho Blogger Template

0 nhận xét
Bài viết này sẽ hướng dẫn các bạn cách tối ưu template Blogspot sao cho thân thiện với các bộ máy tìm kiếm ( Search Engine Optimize ).
Tôi tin rằng bài này không phải là hướng dẫn SEO hoàn thiện nhất cho mẫu blogger. Vì vậy, nếu bạn có bất kỳ ý tưởng nào, hãy để lại phản hồi ở đây, chúng ta sẽ cùng thảo luận để có thể hoàn thiện hơn thủ thuật này.
Page Title
Tiêu đề trang mặc định của một bài viết trong Blogspot theo thứ tự Tiêu đề Blog : Tiêu đề bài đăng. Điều này không tốt cho SEO. Vì vậy, chúng ta sẽ đổi thành Tiêu đề bài đăng | Tiêu đề blog. Tìm đoạn code bên dưới trong Template của bạn :
<title><data:blog.pageTitle/></title>
và thay thế thành :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Bạn cũng có thể thêm một số từ khóa vào tiêu đề Blog, ví dụ :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> ~ iTechPlus | Kiến thức – Thủ thuật - Giải pháp công nghệ</title>
</b:if>
META Keywords And Description

Một số Blogger chuyên nghiệp đã viết hướng dẫn về việc làm thế nào để chèn từ khóa và mô tả vào Blog. Thực ra điều này rất dễ : bạn chỉ cần chèn đoạn code bên dưới vào sau Title tab hoặc trước <b:skin><![CDATA[/*
Ví dụ :
<meta name="description" content="Kiến thức – Thủ thuật – Giải pháp công nghệ" />
<meta name="keywords" content="hệ điều hành, tin học văn phòng, đồ họa, bảo mật" />
Tuy nhiên, đoạn code trên sẽ chèn từ khóa và mô tả trên tất cả các bài viết trong Blog. Điều này không tốt cho SEO vì bạn có thể nhận được cảnh báo từ Google Webmaster Tools rằng nó đã phát hiện có nội dung trùng lặp trên Blog của bạn. Do đó, cách tốt nhất là chỉ chèn từ khóa và mô tả tại trang chủ của Blog. Bạn thêm đoạn code in đậm vào đoạn code trên, như bên dưới :
<b:if cond='data:blog.url == data:blog.homepageUrl'> <meta name="description" content="Kiến thức – Thủ thuật – Giải pháp công nghệ" />
<meta name="keywords" content="hệ điều hành, tin học văn phòng, đồ họa, bảo mật" />
</b:if>
Heading
Heading Tag ( H1, H2, H3, H4, H5 ) cũng rất quan trọng cho SEO. Tiêu đề các Widgets ( Gadgets ) sử dụng H2 tab. Tiêu đề bài viết sử dụng H3 tab ( Minima Template ) và một số template khác lại sử dụng H2 tab cho tiêu đề bài viết. Để cải thiện SEO, bạn cần sử dụng H1 tab cho tiêu đề bài viết, ví dụ, tìm đoạn code sau :
<b:if cond='data:post.title'>
<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>
</b:if>
Ví dụ trên cho thấy mẫu của bạn sử dụng H3 tab cho tiêu đề bài viết ( nếu bạn không tìm thấy, mẫu của bạn có thể sử dụng H2 tab ). Thay thế H3 ( H2 ) tab thành H1, như bên dưới :
<b:if cond='data:post.title'>
<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ạn sẽ cần thay đổi font size cho tiêu đề bài đăng bằng cách chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
Trong ví dụ này, tôi sử dụng font size là 1.5em, bạn có thể thay đổi nếu muốn.
Tham khảo thêm ở đây ( nâng cao )
Social Bookmarking
Tham gia và quảng bá Blog của bạn trên các mạng xã hội là một trong những cách tốt nhất để tăng cường khả năng SEO cho Blog. Bạn có thể làm theo hướng dẫn ở đây để biết cách chèn Social Bookmarking vào Blog của bạn.
Breadcrumb
Bạn có thể sử dụng Breadcrumb để giúp điều hướng blog của bạn dễ dàng hơn cho khách viếng thăm. Hướng dẫn tạo thanh Breadcrumb cho Blog bạn có thể tham khảo ở đây.
Related Posts
Bài viết liên quan hiện nay là một tiện ích không thể thiếu cho Blog hay Website, giúp người đọc dễ dàng hơn trong việc tìm kiếm những bài viết cùng chuyên mục đang theo dõi. Các bạn xem hướng dẫn cách tạo tiện ích bài viết liên quan ở đây.
Auto Readmore Link
Sử dụng tiện ích Auto Readmore sẽ giúp Blog của bạn trông gọn gàng hơn : chỉ hiện thị tiêu đề và một đoạn trích dẫn ngắn ( với ảnh đại diện ). Không những vậy nó còn có thể giúp giảm thời gian tải trang cho Blog.
Tiện ích này có 2 loại : một sử dụng CSS và một sử dụng JavaScript. Bạn có thể đọc hướng dẫn ở đây ( CSS ) và ở đây ( JavaScript )
Chúc các bạn thành công !
Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

 

16 thg 3, 2011

Sitemap widget – Sơ đồ Blog cho Blogger

0 nhận xét
Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan

Sơ đồ Blog - Sitemap hay còn gọi là Table of Contents là một bảng phụ lục liệt kê tất cả các bài viết trên Blog theo từng trương mục ( Labels ) hoặc theo thời gian ( Archived ) một cách tự động.
Cùng với các tiện ích như Numbered Page Navigation, Related Posts hay Breadcrumb, góp phần tạo nên sự điều hướng dễ dàng và thuận tiện cho độc giả, giúp gia tăng Pageview và giữ chân độc giả ở lại Blog bạn lâu hơn.
Ý tưởng bắt nguồn từ Amanda - một Blogger tên tuổi, sau đó được Abu-Farhan cải tiến giúp tiện ích trở nên đơn giản và bắt mắt hơn.
Chính vì những lợi ích rất thiết thực mà tiện ích mang lại, hôm nay iTechPlus xin giới thiệu đến các bạn 3 style của tiện ích này nhằm giúp các bạn có nhiều sự lựa chọn phù hợp cho Blog của mình.
Style 1 : Table of Contents by Label
Table of Contents by Label
1. Vào Chỉnh sửa Bài đăng > Chỉnh sửa Trang > Trang mới để đặt tiện ích trên một Static Page
2. Chuyển qua chế độ Chỉnh sửa HTML và dán vào đoạn code bên dưới
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.itechplus.info/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
3. Thay đoạn code in đậm bằng địa chỉ blog bạn rồi nhấn Xuất bản trang là OK.
* Vì là một trang Page nên bạn có thể đặt đâu tùy ý, hoặc get link và tạo một liên kết trên thanh menu giống iTechPlus chẳng hạn.
Style 2 : Table of Contents by Date ( Archived )
Table of Contents by Archived
Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://www.itechplus.info/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Style 3 : Table of contents and Accordion
Table of contents and Accordion
Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.itechplus.info/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
* Lưu ý : các bạn nên download các file .js và .css về lưu trữ hoặc upload lên host riêng đề phòng trường hợp host trên die.
Như vậy là bạn đã tạo cho mình một Sơ đồ Blog update bài viết hoàn toàn tự động rồi đó