Được tạo bởi Blogger.

Độc giả phản hồi

Tin bài mới nhất

(HN) - (TP.HCM)

BẢN QUYỀN

CÔNG NGHỆ

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

Thứ Sáu, 10 tháng 4, 2015

Đây là một số code trong các mẫu mặc định của blogger mà có thể nhiều người chưa biết. Các code này được blogger sử dụng để trang trí phần chân mỗi bài viết trong blog của bạn.
Code ở chân bài viết

Với tất cả các mẫu Simple của blogger cuối mỗi bài đăng sẽ có một hệ thống các thành phần phụ như: tên tác giả, tên nhãn, nút chia sẻ, nút đánh giá bài viết,... bạn có thể xem chúng ở hình dưới.

Các thành phần tồn tại ở chân mỗi bài viết
Vậy khi bạn muốn xóa hoặc cho thêm những thành phần này thì phải làm sao. Rất đơn giản chỉ cần xóa hoặc thêm nó vào thoi. bài viết sau đây sẽ giúp bạn làm được điều đó một cách đơn giản.

» Code tác giả:

- Khi sử dụng code này thì cuối mỗi bài viết của bạn sẽ hiển thị một mục là bài viết được đang bởi tác giả nào đó....
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

» Code thời gian đăng bài:

- Đây là đoạn code hiển thị thời gian đăng bài của bạn. Gồm giờ, phút đăng bài; ngày tháng đăng bài và năm bạn đăng bài viết đó. Phần này để người đọc có thể biết được bài viết của bạn được đăng lúc nào. Phần này rất quan trọng nếu trang của bạn là trang tin tức.
<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

» Code đánh giá.

- Đây là đoạn code để người đọc đánh giá về bài viết của bạn xem nó thú vị, hấp dẫn hay dở ẹc,.... Hiện nay không nhiều trang sử dụng tiện ích này vì nó không hỗ trợ nhiều cho seo và khá nặng khi tải trang của bạn.
<span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>
Code đánh giá:
<span class='star-ratings'>
        <b:if cond='data:top.showStars'>
           <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
- Code back link nếu bạn bật trong bài viết.
<!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span>

» Code nút chia sẻ bài đăng:

- Đoạn code này sẽ hiển thị các nút chia sẻ bài viết lên các mạng xã hội. Kiểu chia sẻ này không được đẹp và tiện cho lắm nên nếu có thể hãy sử dụng các nút chia sẻ của riêng bạn,
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

» Code chỉnh sửa nhanh bài viết hình bút chì:

- Đoạn code này sẽ giúp hiện thị một nút chỉnh sửa nhan bài viể cuối trang của bạn. hoặc cuối bài viết. Bạn có thể xóa nó đi vì để nó không có lợi nhiều cho SEO và không chuẩn HTML5.
<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>
- Code nút chia sẻ:
<!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

» Code tên nhan:

- Đoạn code này sẽ hiển thị tên nhãn bài viết của bạn. Tất nhiên nó sẽ không hiển thị gì nếu bạn không gắn nhãn cho bài viết của bạn.
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
Chúc bạn thành công.

Đánh giá sản phẩm

0.0 / 5

0 đánh giá

5 ⭐
0%
4 ⭐
0%
3 ⭐
0%
2 ⭐
0%
1 ⭐
0%

Lọc đánh giá:

Thứ Tư, 8 tháng 4, 2015

Trước đây mình đã từng viết 1 bài viết hướng dẫn thiết kế template blogger. Sau 1 thời gian trôi đi, bài viết được copy ra rất nhiều nơi nhưng dường như hiệu quả mà nó đem lại vẫn chưa như mình mong đợi nên hôm nay mình viết bài viết này vẫn với mục đích giúp bạn "Tự tạo nên website mang phong cách riêng của mình" nhưng sẽ ở mức độ chi tiết hơn rất nhiều.
Cấu trúc 1 trang web



1. Một số lưu ý trước khi bắt đầu
» Để có thể tự thiết kế ra giao diện mang phong cách riêng của chính mình thì đòi hỏi bạn phải hiểu về css. Nếu không biết gì về css thì bạn hãy đọc hết bài viết TỰ HỌC CSS TOÀN TẬP để có thể hình dung ra CSS là gì. Và mình khẳng định lại 1 lần nữa. Chỉ khi bạn biết CSS bạn mới có thể thiết kế ra được 1 website mang phong cách riêng của mình.

» TUYỆT ĐỐI KHÔNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH CỦA MÌNH. Hãy tạo 1 trang blog mới và thiết kế trên đó. Sau khi hoàn thành hãy đem giao diện đó về sử dụng ngay trên blog chính của mình.

» Trên bài viết này mình sẽ không đề cập nhiều đến css. Mọi vấn đề liên quan đến trang trí blog bạn đọc qua bài viết TỰ HỌC CSS TOÀN TẬP và tùy biến theo ý của mình nha.

» Trước khi thiết kế bạn nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết phải làm gì.

» KIÊN NHẪN LÀM TỪ TỪ. Không thể làm xong 1 website chỉ trong vài tiếng được đâu bạn àh. Với khả năng hiện tại của mình thì nhanh lắm mình cũng phải mất 2 - 3 ngày mới xong được 1 trang web, nên đòi hỏi bạn phải kiên nhẫn 1 tí. 
 2. Chuẩn bị:
Bạn cần phải trả lời hết các câu hỏi sau: 
» Bạn đã phát thảo giao diện web mình mong muốn ra giấy chưa? Nếu chưa thì lấy giấy viết ra phát thảo sơ bộ đi. Mình đảm bảo chỉ với trí tưởng tượng thì bạn không thể thiết kế được như ý đâu.

» Phát thảo xong rồi đúng không? Vậy blog của bạn có bao nhiêu module chính tất cả? Module chính là module sẽ chứa các module nhỏ bên trong. Header (phần đầu blog), 2 Sidebar (2 thanh công cụ trái phải), Main (module chứa bài viết), Footer (Chân blog)... còn gì nữa không? Xem hình bên dưới bạn sẽ hiểu module chính là gì. 
Theo hình bên trên thì mình muốn blog của mình bao gồm 3 phần chính: 
» Ở đầu trang là header.
» Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post)
» Ở cuối trang là footer.
Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa.

3. Tiến trình thiết kế template blogger: mỗi thành phần bên dưới mình sẽ đưa vào 1 bài viết và hướng dẫn chi tiết hơn. Bạn nên làm từng bước từ trên xuống dưới đừng đốt giai đoạn, xảy ra lỗi mình không chịu trách nhiệm đâu àh.

1. Cấu trúc cơ bản của template blogger.
2. Tạo thẻ meta description và title cho website.
3. Xây dựng cấu trúc website của bạn.
4. Sidebar toàn tập.
5. Header toàn tập.
6. Main toàn tập. (Bài quan trọng nhất)
7. Footer toàn tập.

4. Túm lại:
Về cơ bản template blogspot chỉ có bao nhiêu đó thôi. Ngoài ra cũng chẳng còn gì nữa.
Tiếp theo là bạn áp dụng những thủ thuật khác để tạo ra những nét đặc trưng riêng cho blog của mình là được rồi.

Xem qua chắc chắn bạn sẽ nghĩ trong đầu "blog gì mà thấy gê" :D nhưng thật sự thì không gê đâu bạn. Blog hiện tại mình đang dùng cũng từng trãi qua những lúc ghê như zậy đó.
Nguyên nhân nhìn thấy gê là do trong bài hướng dẫn này mình chưa xài nhiều những thuộc tính css. Bài viết này mình chỉ đề cập đến việc tạo ra và nắm bắt được cấu trúc template của mình thôi.
Việc trang trí là sao cho đẹp là ở chổ bạn có thật sự sáng tạo khi kết hợp các thuộc tính css lại với nhau hay không thôi.
 5. Bonus 1 số class và id mặc định blogger tạo ra.
Bằng cách chỉnh sửa css cho các class và id này bạn cũng sẽ tùy biến được khá nhiều thứ đó.
  h1 /* đây là thẻ chứa tiêu đề của blog */
.description /* đây là class chứa mô tả mặc định của blog */
.post /* đây là class post chỉ chứa nội dung của bài viết (không có comment) */
.post h3  /* đây là thẻ h3 của class post chứa tiêu đề bài viết */
.comments /* đây là class chứa nội dung toàn bộ comment */
.widget h2  /* đây là thẻ h2 của class widget chứa tiêu đề các tiện ích */
.widget-content /* đây là class chứa nội dung các widget (không có tiêu đề) */

Và vấn đề cuối cùng. Nếu quá trình thiết kế có vấn đề gì thì đừng ngại để lại comment bên dưới mình sẽ hồi âm trong thời gian sớm nhất có thể. Chúc bạn thành công và có được một ngôi nhà trực tuyến như mơ ước! 
Tác giả bài viết: Võ Quốc An

Đánh giá sản phẩm

0.0 / 5

0 đánh giá

5 ⭐
0%
4 ⭐
0%
3 ⭐
0%
2 ⭐
0%
1 ⭐
0%

Lọc đánh giá:

Thứ Tư, 7 tháng 3, 2012

(SN-MS)- Menu trang thethao.zing.vn nhìn rất đẹp với hiệu ứng hover, đây là menu dạng nằm ngang kèm theo hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) làm nhiều Blogger rất thích sử dụng cho Blog của mình.
Nếu muốn thay lá cờ thành  hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) có thể xem TẠI ĐÂY Còn bài này mình com hướng dẫn các bạn thực hiện mene điều hướng đơn giản có đồ họa giống vậy được thay Tab Menu Mouseover bằng tiện ích Translate bằng hình ảnh lá cờ các quốc gia.

1Các bước tạo menu điều hướng :

1. Truy cập vào Blogger : Bảng điều khiển (Dashboard)  >> Bố cục (Layout)  >>  Phần tử trang (Page Element)  >> Click vào Thêm tiện ích (Add a Gadget).

2. Click chọn tiện ích  HTML/JavaScript widget và dán  Navigation Menu Code (Code của menu điều hướng) ở phần dưới vào trong khung nội dung của HTML/JavaScript widget .
3. Kéo HTML/JavaScript widget và thả  vào vị trí phía dưới Blog Header.
<style type="text/css">
#kmenu
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-bg.gif) repeat-x;
}
#kmenu .kmenu-r
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-right-bg.gif) no-repeat top right;
}
#kmenu .kmenu-l
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-left-bg.gif) no-repeat top left;
}
#kmenu .homepage
{
    padding: 20px 0px 0px 8px;
    width: 78px;
    float: left;
}
#kmenu .homepage a
{
    font-weight: bold;
}
#kmenu .homepage a:hover
{
    color: #f68121;
    text-decoration: none;
}
#kmenu .mnav
{
    width: 854px;
    float: left;
    padding: 17px 0 0 20px;
}
#kmenu .mnav ul.zlstmnav
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    height: 28px;
}
#kmenu .mnav .zlstmnav li
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
}
#kmenu .mnav .zlstmnav li a
{
    float: left;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 0 0px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
}
#kmenu .mnav .zlstmnav li a span
{
    float: left;
    display: block;
    padding: 0 0px 0 20px;
}
#kmenu .mnav .zlstmnav li a:hover, #kmenu .mnav .zlstmnav li.selected a
{
    margin-top: 1px;
    height: 26px;
    line-height: 26px;
    background: #2e2e2e url(http://thethao.zing.vn/news/images/nav-left-bg.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li.first a:hover
{
    background: #2e2e2e url(http://thethao.zing.vn/news/images/nav-left-home.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li a:hover span, #kmenu .mnav .zlstmnav li.selected a span
{
    background: url(http://thethao.zing.vn/news/images/nav-right-bg.gif) no-repeat top right;
    padding: 0 20px 0 20px;
}
#kmenu .submenu
{
    padding-left: 10px;
}
#kmenu .submenu li
{
    float: left;
}
#kmenu .submenu li a
{
    color: #fff;
    display: block;
    padding-right: 15px;
}

.translate{
    display:inline;
    float:right;
    margin: 0px 20px 10px 0;
}

.google_translate img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; }
</style>
<div id="kmenu">
<div class="kmenu-r">
<div class="kmenu-l">
<div class="homepage"><a href="http://namkna.blogspot.com/">Trang chủ</a></div>
<div id="mn1" class="mnav">
<ul class="zlstmnav">

<li> <a href="#1"><span>Menu1</span></a> </li>

<li> <a href="#2"><span>Menu2</span></a> </li>

<li> <a href="#3"><span>Menu3</span></a> </li>

<li> <a href="#4"><span>Menu4</span></a> </li>

<li> <a href="#5"><span>Menu5</span></a> </li>

<li> <a href="#6"><span>Menu6</span></a> </li>


</ul>

<div class="submenu">
<div class="translate">

<div><b><span class="Apple-style-span"  style="color:#FFFFFF;"> Languages:</span></b>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOg8RcUnSbv_tp9BHs1cY_3pRC9mEuioTW_9p3qG-dM6N-9LM7zxBpQyTaoJQxJxcGnsJcZb4ZJG6ENqDftqp4TXPaMH_V6PSgGM0hE-2pBdw7b2uHjUjk_gVdJRA_Ef5FWC93kUVtvM/?imgmax=800" style="cursor: pointer;margin-bottom:1px; margin-right:10px " width="20" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVoKxZm7LkUZ7rjWv7h2LiRQQ91k3VrKIGMuuo7gODrTsLWNHSpy6Qxy7E_TSA4Ed8OARkJj4SN4kU6gMXdoRX1xRf8t3uAsNvDdDlQXNYDwLaBLqgVy8D66yEZpfxZ9lboXtOIsQsGw/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWTIvAabR5eHDWTVZ0as0rNggpikZIshSUWLH4KRTKzSWREGVd6RWaFO7PGpBSV7OkwcjQ6lsVkpWcBigEBc1V2fQmySONG5hvpI9pN5qAwui-PUR-5G5W0F8I9cefvl_JDS_BsJu_6zR/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrMRIL8PzFK9T7zr5T-L-GT10sNKfbrgb66giLAIQh9-STiqyZgEXAPHR0GWxcondF1Vk3rcgzoKwHk7W0lXX7yZf2RaXMSUQplvRU4_a48Z46bNYh1qPOen38HtKMc04hr9VSDaWBB77/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgTa7FmyKN98Cfh64VYs7rraThlvuTXAtsP4EeFAC4-SZg2Hkey2mQQJzNJqKKeGwhPW9fMSnLuIikf7LgphxY5EJQfKfqjxKT6lg-Ab2iUsu5xzUrqavq7dnvV9j2GNBpYdJKBhlsvUQ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7iN4K84XMxtCU_BVXUG31536SuqvNC_N5ASmJewsVDxzvolSPgYuAtvhYdUX7RNYGeMJWo_NsR5yQsO1_ZVedTNd6OjBrSSe14QVyPTKCM6mhUs6e3hs1TBog7chTOMDeVpFJ1hlv3g8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXwSMwgSzGXttvU1TewVkWxghHyBEUAmf4-MAd7Runoyo7sYvXDxnzjHFIf5iZfUvUsj7evi4zEweqPnq2zo8UoDiaXpvK9EJD0jFEGBcK-nnR-K2KIHYrPLgDZz8yASGiAOfB6UF5Qd4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg432npkcbWRb-_H8TdcXxazOKwAkputTeyS4zHEiAdVyoJt3LfF8jtJSy-m4cKJ-ESyVs9NFLZuA_ByRCkpPdv579MZKon5Mtvh9TZ6c7K8l1RMQeQ3mGdaQ-2v7DNABKCSDD7HtyhyaY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTWPoINoib14PGRR-XdmOsMdgzeqSiUhtaVllayIDezYApd9ExBKXWlzIXTHp6yWuH3_Z_vbbtz6ME7HDgJadfroVWSOcky4UYR0QWSsjsX5VbVpNcm8CojF7z6IsEreHr2OWPPFgoH_sK/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgRzLtGE6Qpfo0sC5gN5qB_eCLi98EDqBsHYGY19ajTexTmVXOoE7-0iZqZPcWRl5yMnx15ySHpKVtBfyEeMhpMGVfA_GoRjlAuSTUdV5C4jlZVXPSXv1FCosAeh3mFNGnuXu2ToY6Ik/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObChVl9mkewl0Hm2m9h3gZB89DF2MxcpuPkqYbQFPgLjB3euMe1X9YaktUsj55KrMBM1IeUJEL5Qn5tQRrRhyphenhyphenraCi8y8RnZI6HuulBcB1htcRAUerD4Z0XcC4JwbGiivH10Wu2ub4dqQ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQ6OvbUCJcleXuaAtOOAmiyM4oiBsnGYl6KtIIedU0B5r5l09EeR18lDYAO7t9sebYmVeYMvlVrvo1c43ud__wRve2fRZiP-ssd6fX3AauJW_Lrb4fk08a5AEC63RB1QEMIyRIJM56GU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> </div>

</div>
</div>
</div>
</div>
</div>
</div>
- Các bạn nên Downloand các file ảnh về Upload lên trang của mình sau đó thay vào để phòng link ảnh bên Zing die bạn có thể Downland file ảnh TẠI ĐÂY sau khi download về thay vào tên tương ứng là được
4. Sau khi đã thực hiện xong các bước trên, bạn cần chỉnh lại link liên kết hiển thị trong đoạn mã HTML.
- Thay thế các tiêu đề và đường link của các menu bạn chỉ cần thay đổi các dòng in đậm trọng đoạn code như dưới:

<li> <a href="#1"><span>Menu1</span></a> </li>
<li> <a href="#2"><span>Menu2</span></a> </li>

<li> <a href="#3"><span>Menu3</span></a> </li>

<li> <a href="#4"><span>Menu4</span></a> </li>

<li> <a href="#5"><span>Menu5</span></a> </li>

<li> <a href="#6"><span>Menu6</span></a> </li> 

- Thay thế  #1, #2, #3,...  bằng các địa chỉ  Trang, các Lable hoặc URL bài viết và thay thế  Menu1, Menu2, Menu3,...  bằng Tên các Label hoặc Page. Ví dụ với Các bài viết về Thủ thuật Blog trong blogger trên namkna sẽ như sau:

- Nếu cần thêm hay xóa đi các tab (link) bạn chỉ cần thêm hoặc xóa đi đoạn code HTML dưới:

<li> <a href="#"><span>Menu</span></a> </li> 
Chúc thành công;

Thứ Bảy, 11 tháng 2, 2012

(SN-MS) - Khi lướt web hoặc blog, thấy các bài hay, bạn muốn in ra để về nhà đọc khi tại gia không có internet hoặc máy tính. Ngoài việc, có thể copy bài đó rồi dán vào word để in bình thường, bạn có thể in trực tiếp trên trang web đó luôn mà không cần phải copy qua nhiều công đoạn. Vậy để làm được việc đó thì trên trang bài viết đó phải có nút in cho bài viết của mình. 
print-ck
printChip hướng dẫn lại cho các bạn thủ thuật chèn nút In bài viết ở cuối mỗi bài viết:

Bắt đầu thủ thuật:

Bước 1: Bạn vào bảng điều khiển - chỉnh sửa html -mở rộng mẫu tiện ích - nhấn ctrl + f tìm đoạn mã sau:

<data:post.body/> cái thứ 2 nhé.

Bước 2:Bạn copy đoạn code sau và chèn bên dưới mã code vừa tìm được.

<!--IN BÀI VIẾT CHIPKOOL-->
<b:if cond='data:blog.pageType == "item"'>
<span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0no3kde7p_uZDYrgilKLN67GYhgJW6G8DPAO0J9L3RTJzuXx3uMBG_ul4t3_Zg9yOX1wYB_29eOsAXNYMMBPLphgLhqef2X646qVQQDeQulLIgLvklg9W_h7yjjXDiGqWk9GOXZ2B8w/s1600/print-this.png) left no-repeat; padding-left: 25px;'><a href='javascript:window.print()'>In bài này</a></span>
</b:if>
<!--END IN BÀI VIẾT-->

Bước 3:Bạn copy hết đoạn code sau và chèn bên trên mã code </head>

<!--NUT PRINT-->
<style media='print' type='text/css'>
#linkbar-wrapper, 
#comments, 
#header-wrapper, .widget-content,
#lower-wrapper,
#header, #sidebar-wrapper,.sidebar, .comment-form,.post-footer,
#blog-pager,.post-feeds,
#backlinks-container,
#navbar-section,.lowerbar-wrapper, 
#backbutton {display:none !important;}
#content-wrapper,
#main-wrapper,
#main {font-size:12px;float:none !important;overflow:visible !important;width:auto !important;}
#main a{color:#0000ff;text-decoration:none;}
</style>  

Bước 4:save temple.Chúc các bạn thành công?mọi ý kiến thắc mắc comment bên dưới.
Nguồn chipkool.tk

Thứ Tư, 8 tháng 2, 2012

(SN-MS)-Đối với một hệ thống website (hay một trang blog) thì bộ đếm lượt truy cập rất quan trọng, nó sẽ giúp bạn xác định xem có bao nhiêu người đã truy cập vào website của mình để từ đó đưa ra các chiến lược hợp lý trong việc phát triển nội dung.
Histats-1
Tuy nhiên, để tạo ra một bộ đếm lượt truy cập, đòi hỏi bạn phải sử dụng thành thạo các ngôn ngữ lập trình web, chính vì vậy, để đơn giản và hiệu quả, bạn có thể chọn sử dụng bộ đếm của Histats, đây là một dịch vụ cung cấp bộ đếm lượt truy cập cho website hoàn toàn miễn phí với nhiều kiểu mẫu rất đẹp mắt. Không chỉ dừng lại ở việc đếm số lượt truy cập, Histats còn cung cấp cho bạn các thông tin khác như : Visit today (lượt truy cập trong ngày), Visits (tổng số lượt truy cập), Page views per visit (tỉ lệ xem trang web trên tổ số lượt truy cập) và Online (số người hiện đang truy cập website).

Histats-2

I/ Đăng ký một tài khoản tại Histats
Nguyên tắc hoạt động của Histats là cung cấp cho bạn một đoạn mã với các tùy chọn về giao diện và kiểu thống kê truy cập do bạn lựa chọn để từ đó bạn sẽ nhúng nó vào website hay blog. Để tạo một bộ đếm lượt truy cập với Histats, bạn làm như sau :
- Khởi động trình duyệt web rồi truy cập vào địa chỉ http://www.histats.com
- Từ giao diện chính của trang web, bạn nhấn chuột vào liên kết Register để vào trang đăng ký.
Histats
- Trong trang Create new account, phần Login data, bạn tiến hành khai báo các thông tin như địa chỉ email và password dùng để đăng nhập vào trang quản lý tài khoản của Histats sau này. Sau khi nhập xong, bạn nhấn chuột vào liên kết Continue để xác nhận.
Histats-4

- Trong phần additional information, bạn phải tiến hành khai báo thêm một vài thông tin cá nhân như : Họ, tên, quốc gia, múi giờ…v.v… quan trọng là bạn phải nhập chính xác dãy số Captcha vào ô Captcha code và đồng thời phải đánh dấu chọn vào ô I have read and agree Publisher Agreement Terms. Sau cùng, nhấn nút Save để xác nhận.
Histats-5
Histats-6

- Vậy là xong, công việc của bạn là đăng nhập vào tài khoản email vừa khai báo để thấy một email mà Histats vừa gửi, tại đây, bạn chỉ cần nhấn chuột vào một liên kết kèm theo theo trong email để kích hoạt tài khoản.
Histats-7

II/ Sử dụng dịch vụ Histats
Sau khi đã kích hoạt tài khoản thành công, bạn truy cập vào địa chỉ http://www.histats.com sau đó nhập địa chỉ email và password mà bạn đã đăng ký rồi nhấn nút Login để đăng nhập vào trang quản lý tài khoản.
Histats-8

Sau khi đăng nhập thành công vào tài khoản, bạn nhấn chuột vào nút Add a website để tiến hành đăng ký trang web mà bạn muốn gắn bộ đếm của Histats.
Histats-9

Lúc này, bạn sẽ được đưa đến một trang có tên là Create new website/blog, tại đây, bạn tiến hành khai báo các thông tin sau :
- Site url : địa chỉ của website mà bạn muốn đặt bộ đếm.
- Title : tiêu đề của website.
- Description : mô tả ngắn gọn về website.
- Page views start value : nhập vào số lượt xem trang web mà bạn muốn Histats bắt đầu đếm từ đây. Tối đa là 10.000.000.
- Visitors start value : nhập vào số lượt truy cập mà bạn muốn Histats bắt đầu đếm từ đây. Tối đa là 10.000.000. Lưu ý, trừ khi bạn chuyển đổi dịch vụ đếm lượt truy cập thì bạn có thể bắt đầu đếm từ số liệu hiện tại, còn không thì bạn nên bắt đầu từ số 0.
- Tiếp đó, bạn có thể lựa chọn múi giờ sau đó nhập dãy Captcha rồi nhấn nút Continue để xác nhận và kết thúc quá trình đăng ký website.
Histats-10
Histats-11

Sau khi đã đăng ký xong website, bạn có thể tiến hành tạo bộ đếm lượt truy cập bằng cách nhấn chuột vào địa chỉ của website vừa hiện ra thay thế cho nút Add a website.
Histats-12

Lúc này, bạn sẽ đưa tới một trang web chứa các thông tin thống kê lượt truy cập, để tạo một bộ đếm cho website, bạn nhấn chuột vào thẻ Counter CODE.
Histats-13

Lúc này, bạn sẽ nhấn nút add new counter để vào trang web hiển thị các kiểu mẫu hiển thị bộ đếm.
Histats-14

Từ trang chứa các kiểu mẫu, bạn có thể xem và lựa chọn cho mình một mẫu chứa độ đếm thích hợp theo các nhóm như : 1 line, 2 line, logo, animated, text… bằng cách nhấn chuột vào nó.
Histats-15

Lúc này, bạn sẽ được đưa tới một trang web có tên là Choose which informations will be displayed on your counter, tại đây bạn hãy lựa chọn một hoặc năm tùy chọn thống kê mà bạn muốn sử dụng như visitors today (đếm lượt truy cập trong ngày), Total visitors (tổng lượt truy cập), Page views today (lượt xem trang web trong ngày), Total page views (tổng số lượt xem trang web), Users online (số người đang xem trang web hiện tại). Bạn cũng có thể lựa chọn màu nền cho bộ đếm từ dãy màu trong mục preview (mặc định là màu trắng). Sau cùng, nhấn nút Save để xác nhận.
Histats-16

Sau khi tạo xong bộ đếm, bạn sẽ được đưa tới một trang web, tại đây, bạn hãy nhấn chuột vào tên của bộ đếm vừa tạo (đã thay thế chỗ cho nút add new counter) để bắt đầu lấy code để nhúng vào website hay blog.
Histats-17

Histats hỗ trợ cho bạn các đoạn mã theo các chuẩn như : standard, No JavaScript, XHTML và Async. Tùy theo nhu cầu và mục đích sử dụng mà bạn có thể lựa chọn một đoạn code phù hợp để nhúng vào website hay blog.
III. Nhúng mã vào Webblog: Các bạn nhìn hình sẽ rõ
blogspotBlogspot
1. Login in blogspot.com, click on 'Settings' from your homepage
blogspot_1

2. Select 'Layout' section and click on 'Page Elements'
blogspot_2

3. Click on 'Add a Gadget'
blogspot_3

4. Select 'HTML/JavaScript' from the list of Basic Gadget
blogspot_4

5. Put in "content" your Histats counter code, write a title and click on 'SAVE'
blogspot_5

6. Preview of Histats counter
blogspot_6

Histats-18

Nguồn http://www.chipkool.tk