vietnamese Tiếng Việt english English
Hôm nay:
  • RSS
  • Hotline: .... chưa có
Tin mới đăng:
Thứ Hai, 9 tháng 6, 2014 | 16:54

Mẫu website bán quần áo cực cool

Đọc tiếp...
Thứ Sáu, 6 tháng 6, 2014 | 20:43


Khung Like Fanpage góc màn hình cho blogspot
Sau đây  sẽ hướng dẫn các bạn thủ thuật chèn khung Like Fanpage ở góc phải hoặc góc trái màn hình giống như các popup quảng cáo ở các trang phim. Bạn có thể mở rộng hoặc thu nhỏ chúng tùy theo ý muốn của bạn.Để làm được điều này các bạn làm như hướng dẫn sau đây:

Các bạn có thể xem hình ảnh minh họa ở bên cạnh để hiểu rõ hơn nguyên tắc hoạt động của tiện ích này nha:

» Thêm Khung Like Fanpage ở góc màn hình bên trái hoặc bên phải cho blogspot


1- Vào Bố cục (Layout)
2- Tạo một tiện ích HTML/Javascripts và dán code bên dưới vào (Hãy chọn một trong 2 kiểu bên dưới nha):
2.1- style 1: Khung sẽ hiện ở góc dưới cùng bên tay phải của trình duyệt khi bạn xem trang.
<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt box fanpage [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem box fanpage...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt box fanpa [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/namkna.blogspot&amp;width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=230" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 230px; width: 250px;background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>
Tùy chỉnh:
  • https://www.facebook.com/namkna.blogspot là URL trang fanpage facebook của bạn.
  • width=250 : Chiều rộng khung
  • height=230: Chiều cao khung
2.2- style 2: Khung sẽ hiện ở góc dưới cùng bên tay trái của trình duyệt khi bạn xem trang.
<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt box fanpage [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem box fanpage...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt box fanpage [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
   <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/namkna.blogspot&amp;width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px;background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>
3- Lưu mẫu lại và kiểm tra thành quả của bạn nha,

Đọc tiếp...
20:42

Thanh menu trong thiết kế web là rất quan trọng nó giúp khách truy cập của blog có thể định hướng nội dung chính của trang web và dễ dàng trong việc tìm kiếm các thông tin mà họ quan tâm. Namkna đã giới thiệu tới các bạn rất nhiều thanh menu khác nhau. Tuy nhiên trong bài hướng dẫn này Namkna sẽ giải thích về cách thêm các tab sub menu chỉ hiện ra khi bạn click chuột vào đó. Đây là một ý tưởng mới với mẫu menu hoàn toàn từ CSS 3 (không sử dụng bất kỳ một hình ảnh nào) và phải sử dụng tới các click chuột phần nào giúp độc giả của bạn cảm thấy hứng thú hơn trong việc xem xét các nội dung chứa đằng sau các tab đó.

Các bạn có thể xem hình ảnh minh họa bên dưới hoặc xem trực tiếp trên blog demo:
Menu xổ dọc bằng click chuột cho blogger - Add Clickable Tabs Style Navigation Bar for Blogger

VIEW DEMO

» Cách tạo một menu xổ dọc nhiều cấp với hiệu ứng hiện các menu con khi click chuột vào tiêu đề menu chính:

1. Đăng nhập vào blog
2. Chọn Bố cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscipts và dán đoạn code bên dưới và dán vào.
<style>
/* http://namkna.blogspot.com/*/
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;white-space:nowrap;}
#bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }
#bt_tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}
#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bt_tabmenu  > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bt_tabmenu li a  {box-shadow: 0px 3px 10px  -5px black;float:right;}
#bt_tabmenu p {position:relative;height:1.6em;}
#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bt_tabmenu p:focus:after {content:'';}
#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;/* padding-top:7px;padding-bottom:6px */}
#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
 #bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
 #bt_tabmenu ul ul a {margin-left:-9999px;/* padding-top:7px;padding-bottom:6px */}
 #bt_tabmenu ul ul li a:focus  {margin-left:19998px;}
#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bt_tabmenu ul li a:focus.fermoir  + ul {
margin-left:10001px;}
#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}
</style>

<div id="bt_tabmenu">
    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
<li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
</div>
» Tùy chỉnh: 
  • background:#333 là viền màu đen ngoài thanh menu. Nếu muốn xóa phần đường viền này đi bạn chỉ cần xóa đoạn background:#333 và đoạn màu xanh phía sau đi là được.
  • Phần màu cam làm màu của menu con bên trong bạn có thể đổi màu ở phần màu cam nếu không hiểu về mã màu đó bạn có thể viết gọn thành background:#fff. Bạn có thể xóa bo góc của menu con bằng cách xóa đoạn màu xám.
  • Thay các dấu thăng (#) thành các liên kết tới các bài viết hoặc các nhãn mà bạn muốn.
  • Thay các từ List tương ứng thành tiêu đề của các liên kết tới các bài viết hoặc các nhãn mà bạn đặt.
  • Nếu menu con không liền nhau bạn hãy sửa /* padding-top:7px;padding-bottom:6px */thành  padding-top:7px;padding-bottom:6px
4- Lưu tiện ích lại và kiểm tra thành quả nha.

Đọc tiếp...
20:41

Hẳn các bạn đã quyen với các tiện ích Bài viết mới nhất và Nhận xét mới nhất được trình bày theo phương pháp truyền thống trong một tiện ích HTML rồi phải không, Để tạo phong cách riêng và mới lạ cho cả tác giả và độc giả của blog trong cách trình bày của 2 tiện ích này, bài viết này mình sẽ hướng dẫn thêm hai tiện ích này vào trong thanh menu. Bình thường chúng sẽ được ẩn ở dưới tiêu đề của menu và sẽ hiện ra dạng sổ dọc khi người dùng dê chuột hoặc bấm vào tiêu đề đó như trên trang facebook. Khá thú vị phải không? Vậy còn chần chừ gì nữa hãy bắt tay vào làm thôi.

Để hiểu rõ hơn nguyên tắc hoạt động của menu này các bạn vui lòng xem ảnh động bên dưới:
Các bạn cũng có thể xem trực tiếp trên blog demo của mình ở bên dưới:

VIEW DEMO

Trên thưc tế menu này được viết bởi tác giả dte.web.id một blogger nổi tiếng của malaysia. Mình giới thiệu cho những ai chưa biết. Để có được một menu như thế bạn chỉ cần làm theo các bước ở bên dưới:

» Cách tạo Menu xổ dọc tích hợp bài đăng mới nhất và nhận xét mới nhất cho blogspot.

1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào trước thẻ </head>
<style type='text/css'>
#autonav {
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
  z-index:9999;
  margin:0px 0px;
  padding:0px 0px;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  border-bottom:2px solid #333;
  -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  box-shadow:0px 1px 7px rgba(0,0,0,.4);
}

#autonav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
  background-color:#0F5079;
}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0px 0px;
  padding:0px 0px;
  position:relative;
}

#autonav ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0px 0px;
  padding:0px 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,.4);
  color:white;
  font-weight:bold;
}

#autonav ul li a:hover {
  background-color:#0F486C;
}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0px;
  z-index:99;
  background-color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  box-shadow:0px 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;
}

#autonav ul ul:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;
}

#autonav ul ul li {
  display:block;
  float:none;
}

#autonav ul ul li a {
  border:none;
  color:#999;
}

#autonav ul ul ul {
  top:0px;
  left:100%;
}

#autonav li:hover > ul {
  display:block;
}

/* Khusus JSON */
#autonav ul.json-dropdown {
  overflow:hidden;
}

#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0px 0px;
  overflow:hidden;
}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0px 0px;
}

#autonav ul.json-dropdown li a:hover {
  text-decoration:underline;
  background:transparent;
}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {
  background-color:#222;
}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0px 0px;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0px 10px 0px 0px;
  width:40px;
  height:40px;
}

#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Arial,Sans-Serif;
  color:#666;
  font-size:9px;
}

/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {
  width:400px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numposts = 7,
    cmtext = "Nhận xét",
    pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4MAUUjELaU4hHNL_75sXO9mLdEXt3eZhyLmVX_AqRgsYSi6Uqa80z__Mwj5yiSOZ2wiElOhcR5nt5lvfWGgq-lOBXrD2vbNPrOI_WaIZ2zOFEf9vjiSbp-8-kWyQR5dV_InwhSZTTXSn/s512/no-image.png",
    numcomment = 7,
    cmsumm = 100;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>
» Tùy chỉnh code:
  • var numposts = 7, Số bài viết mới nhất sẽ hiện thị khi menu xổ dọc xuống phía dưới. 
  • cmtext = "Nhận xét", là ký tự xuất hiện trong phần đếm số comment của mỗi bài viết như hình minh họa bên dưới:
    Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger
  • numcomment = 7, Số nhận xét mới nhất sẽ hiện thị khi menu của bạn xổ dọc xuống.
  • http://....no-image.png link ảnh thay thế cho các bài viết mới nhất không có hình ảnh minh họa. Bạn nên sử dụng hình ảnh có kích thước 72x72 picel để tối ưu được tốc độ load trang web của bạn.
  • cmsumm = 100; là số ký tự mô tả (tóm tắt) của phần nhận xét mới nhất trong menu bạn có thể chỉnh lại theo ý muốn của bạn. Tuy nhiên không nên để quá lớn như vậy bố cục giữa những nhận xét ngắn và nhận xét dài sẽ không đẹp.
  • http://......../json-dropdown.js link của file Js. Bạn hãy tải về tại đây và upload lên host riêng để dùng lâu dài nha. Nếu chưa có host riêng thì bạn có thể xem bài này để tạo cho mình một host riêng nha.

4-  Tiếp tục dán đoạn code bên dưới vào trước thẻ </body> . (Bạn cúng có thể dán ở các vị trí khác trong mẫu của bạn, nếu không xác định được vị trí cần chèn theo ý của bạn thì hãy comment bên dưới mình sẽ chỉ đoạn đó cho các bạn)
<nav id='autonav'>
    <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>Music</a></li>
        <li><a href='#'>Recent post</a>
            <ul class='json-dropdown subposts wide'>
                <script src='http://namkna.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Reccent comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
            </ul>
        </li>
        <li><a href='#'>Liên hệ</a>
            <ul>
                <li><a href='#'>Sub menu 1</a></li>
                <li><a href='#'>Sub menu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
» Tùy chỉnh code:
  • Thay thế http://namkna.blogspot.com/ thành link blog của bạn hoặc link blog bạn muốn lấy bài viết cho vào trong menu.
  • Thay các đoạn màu xanh thành các tiêu đề của menu theo ý thích và nội dung của blog bạn nha.

Đọc tiếp...
20:40

Hôm nay hướng dẫn các bạn cách để thêm một hiệu ứng dê chuột tuyệt vời cho hình ảnh Blogger chỉ sử dụng CSS, Với cách này chỉ cần di chuyển chuột qua một hình ảnh từ các hướng khác nhau (từ trên xuống, từ dưới lên, vv) sẽ gây ra một lớp phủ từ các hướng mà bạn di chuột tới. Thủ thuật này sẽ thay đổi không chỉ những hình ảnh xuất hiện khi di chuyển chuột lên chúng, mà cũng cho phép bạn thêm bên trong một văn bản với một mô tả.

Các bạn có thể xem demo ở hình ảnh bên dưới bằng cách di chuột lên hình ảnh từ nhiều vị trí khác nhau nha.

VIEW DEMO

» Thêm hiệu ứng hover ảnh sử dụng CSS cho blogspot

1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>
/* The container and the image */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}

/* The texts that, by default, are hidden */
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    height: 100%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: 100%;
  }

/* And this is what will generate the effect */
 /* right */
  div.multi-hover span:nth-child(1) {
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
 /* top */
  div.multi-hover span:nth-child(2) {
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
  }
/* left */
  div.multi-hover span:nth-child(3) { 
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
  }
/* bottom */
  div.multi-hover span:nth-child(4) { 
    background: none repeat scroll 0 0  rgba(97, 181, 115, 0.6);
    left: 0;
    top: 80%;
  }

  div.multi-hover span:hover {opacity: 1;}
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  div.multi-hover span:nth-child(2n):hover {top: 0;}
4. Lưu mẫu lại và tiến hành bước tiếp theo.


5. Bạn chọn Viết bài mới và chọn tab HTML. Bây giờ để thêm hiệu ứng vào hình ảnh thì bạn sử dụng cấu trúc như bên dưới.
<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Z9dClggyNmQiLOyjffQTZeKhpCedwxRcSRdD8A1O2hyphenhyphenCuirclNk1tj9-vqD5Vj2aGdH6ahRhiRkmbaMzPTBE63f4auStPHYyGepXCINXDOXfp3r7c_Wbt_-pI7U6DJLK6IjZme2x1l90/s1600/hoat+hinh+dep+tao+nen+hover.jpg">
</div>
Hãy chỉnh sửa các đoạn văn bản in đậm mô tả theo ý thích của bạn nha.
6. Bấm xuất bản và xem thành quả của bạn nha.

Lưu ý quan trọng. Do thủ thuật này có sử dụng thẻ span nên bạn không được bấm trở lại tab viết nếu không các cài đặt cảu bạn sẽ bị mất.

Đọc tiếp...
20:39

Thuật này sẽ hướng dẫn bạn tạo một tiện ích bài viết ngẫu nhiên cho nhãn hoặc tất cả bài viết mới trên blog. Điểm đặc biệt của tiện ích này là mỗi một bài khác nhau thì màu nền cũng khác nhau (mình sử dụng 7 màu) tất nhiên bạn có thể thay đổi nó nếu bạn cảm thấy thích, và một điều nữa là có đánh số bài viết theo cấp bậc khác nhau.

Bạn có thể xem hình ảnh minh họa bên cạnh hoặc xem trực tiếp trên blog demo ở bên dưới:.


Nếu từng theo dõi blog của namkna bạn sẽ thấy rằng mình từng giới thiệu một tiện ích Cool popular post có hình dáng và màu sắc tương tự như tiện ích này. Bạn có thể kết hợp với tiện ích đó để tạo phong cách riêng cho blog của bạn :)

☼ Cách thêm tiện ích bài viết liên quan nhiều màu sắc đẹp cho blogger.

1- Đăng nhập vào Blog
2- Vào Bố cục (layout) => Thêm tiện ích (Add widget)
3- Tạo một tiện ích HTML/javascript và dán đoạn code bên dưới vào nha.

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 91%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 16px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><script type="text/javascript" src="http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>
» Tùy chỉnh.
  • Phần màu cam là tên nhãn của bạn muốn hiển thị, Nếu nhãn có khoảng trắng thì thay khoảng trắng thành %20 nha bạn. (Tiện ích hoạt động tốt với những nhãn và blog có từ 500 bài trở xuống, nếu nhiều hơn sẽ sảy ra một số lỗi như hiển thị thiếu số bài bạn muốn).
  • Nếu muốn hiển thị cho cả blog thì bạn vui lòng xóa đoạn code có dạng  -/Blogspot-tips.
  • Thay http://namkna.blogspot.com/ thành địa chỉ blog bạn muốn hiển thị bài đăng này.
  • numofpost = 5; Là số bài viết hiển thị. Trường hợp tiện ích này bạn nên để hiển thị từ 9 bài viết trở xuống sẽ đẹp hơn, nếu bạn cho nhiều hơn thì bài số 10 trở đi sẽ không có màu nền. (Tất nhiên để có màu nền thì phải chỉnh sửa lại file CSS)
4- Lưu mẫu lại và kiểm tra kết quả nha.

Đọc tiếp...
20:38

Khung đăng ký nhận bài viết mới qua email được rất nhiều blogger nổi tiếng sử dụng, đây là sợi dây kết nối giữa họ và những người quan tâm đến bài viết được đăng tải trên blog của họ. Đây là hình thức nhận bài đăng qua mail phổ biến đồng thời thông dụng nhất cho tới thời điểm hiện nay. Nếu bạn cũng có một blog thì đừng ngần ngại hãy bắt đầu ngay hôm nay cài đặt nó vào blog của bạn.

Khung Subscribe dạng facebook cho blogger
Từ trước tới nay namkna đã giới thiệu tới các bạn rất nhiều mẫu Subscribe khác nhau từ đơn giản đến phức tạp, Bài viết hôm nay namkna sẽ giới thiệu thêm cho các bạn thêm một mẫu tiện ích đăng ký nhận bài qua email mang phong cách của trang facebook với màu xanh là màu chủ đạo.

☼ Khung Subscribe mang phong cách của trang facebook cho blogger

1- Đăng nhập vào Blog
2- Vào Bố cục (layout) => Bấm chọn mụcThêm tiện ích (Add widget) => Trong danh sách các tiện ích của blogger bạn chọn tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
 <h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/>
 <input type="hidden" value="--namkna--" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit" />
</form>
</center>
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 10px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>
» Tùy chỉnh:
  • Thay --namkna-- thành id trang feddbunner của bạn. Nếu chưa đăng ký feed bạn có thể xem bài viết hướng dẫn Tại đây.
  • Bây giờ nếu quay trở lại trang của bạn bạn sẽ thấy xuất hiện thêm một khung đăng ký nhận bài viết mới qua email đẹp đẽ và bắt mắt.

Đọc tiếp...
20:36

Với thủ thuật này khi thay vì sử dụng một tiện ích phân trang có các Button số để bấm thì nó sẽ hiển thị khi bạn bấm vào nút tải thêm bài viết. Điểm đặc biệt của phân trang này là nó sử dụng Ajax Jquery cho nên bài viết của bạn sẽ được tải thêm khi bấm vào nút tải thêm mà không cần phải tải lại trang web. Điểm đặc biệt khi áp dụng tiện ích này không hề phát sinh lỗi HTML 5 nên bạn có thể yên tâm áp dụng nó.

Phân trang tự động tải thêm bài viết cho blogger với Ajax Jquery

Các bạn có thể xem demo theo link bên dưới:

» XEM DEMO

» Thêm tiện ích Nút like với hiệu ứng ẩn hiện sau lá cờ trên sidebar cho blogspot

Để thêm nó vào blog bạn chỉ cần làm theo một số bước đơn giản sau:

1. Đăng nhập vào blog.
2. Chọn thẻ Bố cục (Layout).
3. Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin> trong mẫu của bạn.
.button {text-align: center;border: 1px solid #055;box-shadow: 0 1px rgba(255,255,255,.2) inset;background: #066;color: #fff!important;text-decoration: none!important;cursor: pointer;padding: 5px 10px;}
.button a{color: #fff!important;font-weight:bold;}
.button.medium {padding: 5px 10px;font-size: 15px;}
.button:hover {border: 1px solid #222;background: #2c2a28;}
4. Dán đoạn code bên dưới vào trước thẻ đóng </body>
(Bạn cũng có thể thêm bằng cách Chọn Thêm tiện ích => Tạo một tiện ích HTML/Javascriptsngay bên dưới phần bài đăng của bạn và dán đoạn code bên dưới vào).

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript'>
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
a('<a href="javascript:;" >Tải thêm bài viết</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGPHVms7wu8ERf15aEF8GWUSoiwYl8qcD1K4IZPyOwdMvu_wzQLme0H77ih7eSKdmf5E_855TmCHGysmhgD5E2BLsxmngE0AKk4oGzft9JAlToR1IIWP42EHPb-E5WBPDqL0vOQq_JNM/s1600/fb-style-loader-namkna.gif" style="display: none;">');f.scroll(k);b=a('<div class="button medium"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
</script>

» Tùy chỉnh code:
  • Xóa đoạn code màu xanh nếu trong blog của bạn đã có thư viện Jquery. (Lưu ý giữ lại nếu nó là phiên bản vao hơn nha).
  • Sửa lại đoạn mình tô màu đỏ cho phù hợp với trang web của bạn nha.
  • Link ảnh màu tím chính là link ảnh loadding hiển thị khi bạn bấm vào tải thêm bài viết. Bạn có thể sửa thành link ảnh khác nếu muốn.
5. Lưu mẫu lại và quay trở lại trang blog của bạn để xem kết quả bạn đã thực hiện nha.

Đọc tiếp...
20:34

Bài viết này mính sẽ hướng dẫn các bạn cách để trang blog của bạn xoay 360 độ khi bạn tải lại trang hoặc truy cập vào đọc một bài viết bất kỳ trên trang của bạn. Thủ thuật sẽ giúp cho trang blog của bạn đặc biệt hơn trong mắt độc giả.
Đoạn mã được sử dụng hoàn toàn là CSS3 sẽ giúp tốc độ tải trang của bạn không bị ảnh hưởng khi áp dụng thủ thuật này trên trang blog của bạn. Vì đoạn code là CSS3 nên trên một số trình duyệt như IE5,6,7 sẽ không hoạt động. Hoạt động tốt trên chroome, firefox, sarafi, IE9-10,....

Các bạn có thể xem demo bằng cách bấm nút tải lại (hoặc bấm phím số F5 trên bàn phím máy tính của bạn) khi xem bài viết này:

» Cách tạo hiệu ứng xoay tròn khi tải trang cho blogspot.

1. Đăng nhập vào trang blog của bạn.
2. Vào phần Chỉnh sửa HTML (Edit HLM)
3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
@-moz-keyframes roll {
 100% { 
 -moz-transform: rotate(360deg); 
} 
} 

@-o-keyframes roll { 100% {
 -o-transform: rotate(360deg); 
} 
} 

@-webkit-keyframes roll { 100% {
 -webkit-transform: rotate(360deg); 
} 
} 

body{
 -moz-animation-name: roll;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -o-animation-name: roll; -o-animation-duration: 2s;
 -o-animation-iteration-count: 2;
 -webkit-animation-name: roll;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 }
4. Lưu mẫu của bạn lại và xem kết quả đã làm được.

» Tùy chỉnh code: 
  • 360deg là độ xoay trang của bạn bạn có thể điều chỉnh lại cho giảm bớt hoặc tăng số vòng xoay ở đoạn này. Lưu ý chỉnh sửa cả 3 đoạn vì nó ứng với các trình duyệt khác nhau.
  • 2s là thời gian xoay 360deg trên. Bạn có thể kéo dài thời gian hoặc rút ngắn nó. mẹo, nếu số vòng quay càng lớn thì thời gian nên để càng dài nếu không nhìn sẽ rất rồi mắt đó.

» Cách khác: Bạn cũng có thể áp dụng nó cho một bài viết duy nhất bằng cách dán đoạn code bên dưới vào phần HTML của bài viết (Hoặc dán vào trong một tiện ích HTML.Javarscripts của bạn):
<style> 
@-moz-keyframes roll {
 100% { 
 -moz-transform: rotate(360deg); 
} 
} 

@-o-keyframes roll { 100% {
 -o-transform: rotate(360deg); 
} 
} 

@-webkit-keyframes roll { 100% {
 -webkit-transform: rotate(360deg); 
} 
} 

body{
 -moz-animation-name: roll;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -o-animation-name: roll; -o-animation-duration: 2s;
 -o-animation-iteration-count: 2;
 -webkit-animation-name: roll;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 } 
</style>

Đọc tiếp...
20:28

Gắn nhãn New/Old cho bài đăng

Bài viết này mình sẽ hướng dẫn các bạn thủ thuật gắn nhãn New (cho bài đăng mới) và Old (cho bài đăng cũ) ở góc trên bên phải bài đăng (từ MBT). Giúp độc giả có thể phân biệt và nhận biết đâu là bài đăng mới đâu là bài đăng cũ trong blogspot.


Gắn nhãn phan biệt bài đăng mới và bài đăng cũ cho blogspot (New/Old)
(Ảnh minh họa thủ thuật)

Các bạn có thể xem demo của thủ thuật này ở trang web bên dưới: (Chú ý góc trên phía bên phải của bài viết)

» VIEW DEMO

» Cách gán nhãn phân biệt bài đăng mới và bài đăng cũ cho blogspot.

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML), chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>:

.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9nDzalDep4F1wvqp1s7Qlupc02Ky-epz1yu1kHQC5QWatFT1urvDr7U_qhcQhQcfoHbCRd1jAKfLYHi8CRCFU6CLVK1Ys8hLXd0uy0iR2qkUg58430V79JGl_QSk0jTwzANcrrD92SVz/s400/New.png") no-repeat scroll 0% 0% transparent;
}
.old1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr5OPrNKm72HYC37WpqM7Nd4anxDVoz_MMFw-SlBTKVIrUJrY0fvXit9bEPj8Trr-h1RW1hoxdh7jh7Ntk7ruKqWTc_sGesmspGLk7z3Ldhpm-aqA39fpy8P84msDN1SctYVUEDACKmQv7/s400/old.png") no-repeat scroll 0% 0% transparent;
}

Bước 2: Chèn đoạn code sau vào sau thẻ <head> hoặc trước thẻ đóng </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
$('.blog-posts').find($('.post')).slice(1).prepend("<span class='old1'></span>")
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$('.blog-posts').find($('.post')).first().prepend("<span class='new1'></span>")
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>

- Nếu trong mẫu của bạn có thư viện Jquery rồi thì hãy xóa đoạn màu xanh đi nha.

Bước 3. Lưu mẫu của bạn lại và quay trở lại trang blog của bạn để xem thủ thuật này hoạt động như thế nào nha. Nếu gặp bất cứ khó khăn nào khi áp dụng hãy để lại comment của bạn ở dưới bài viết này để nhận được sự hỗ trợ của mình nha.

Chúc các bạn thành công !

Đọc tiếp...
20:27

Những nhận xét, bình luận là một trong những tiêu trí dùng để đánh giá mức độ thành công và nổi tiếng của blog bạn. Độc giả thường bình luận trên blog bạn để hỏi đáp những vấn đề họ khúc mắc trong bài viết của bạn, hay đơn giản chỉ để cảm ơn hoặc đánh giá về tác giả của bài viết đó. Một cách có thể khuyến khích độc giả comment trên trang của bạn là thông báo cho họ thấy bài viết họ đang xem có bao nhiêu người comment (tất nhiên nếu con số càng lớn thì co thấy bài viết đó được quan tâm càng nhiều). Bài viết này namkna sẽ hướng dẫn cho các bạn cách thêm một thông báo số lượng nhận xét được đăng trên một bài viết vào ngay sau tiêu đề của bài viết đó.

Tạo số đếm nhận xét đẹp sau tiêu đề bài viết
(Ảnh minh họa)

Xem trực tiếp trên blog minh họa:

» VIEW DEMO

» Cách tạo số đếm nhận xét đẹp sau tiêu đề bài viết.

1. Đăng nhập vào trang blog của bạn.
2. Vào phần Chỉnh sửa HTML (Edit HLM)
3. Dán đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1QXOaMl0gZZ7tkr2UCtcnvyYAkCcp12bsFBpUTQIBzV3CEvLw2m5yGEnG0L32XWVOgP-gT6Gjft8qOARERwWuVTAvvDa7UwZr0SDaeMmZsiv2ZhPcKBEpZPUC7sWfJlYYLqRw1g15wQ4/s1600/text_comment_bubble_comments-namkna-blogspot.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

4. Tìm đoạn mã chứa tiêu đề bài viết có dạng như bên dưới:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

- Tùy theo từng blog và tác giả của nó mà đoạn code có thể có sự khác nhau nhè nhẹ ví dụ như bên dưới:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

5. Sau khi tìm được đoạn code ở bước 4 bạn dán vào sau nó đoạn code bên dưới:
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000; font-size: 16px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

»Tùy chỉnh mã CSS.

  • Thay đổi mã màu chữ số đếm color: #000 cho phù hợp với màu nền của hình ảnh và màu nền trang của bạn nha. bạn có thể sử dụng bảng mã màu namkna cung cấp để chọn màu bạn thích. Bảng mã màu cho blogger.
  • Thay thế link ảnh màu đỏ thành link ảnh nền của số đếm nhận xét khác theo ý của bạn. Bạn có thể sử dụng và thay thế thành một số link hình ảnh khác mà mình cung cấp ở bên dưới:
    Tạo số đếm nhận xét đẹp sau tiêu đề bài viếtTạo số đếm nhận xét đẹp sau tiêu đề bài viết
  • font-size: 16px Là cỡ chữ của số đếm. bạn hãy điều chỉnh lại cỡ chữ cho phù hợp với từng ảnh nền để nó không bị tràn ra khỏi ảnh hay đè lên ảnh nha.
Namkna hy vọng bài viết sẽ giúp trang blog của bạn có thêm một trải nghiệm mới với giao diện blog có sự thay đổi theo chiều hướng tích cực hơn. Hãy chia sẻ và +1 nếu bài viết có ích với bạn nha. Tất nhiên là hãy để lại comment nếu có bất cứ khó khăn gì khi áp dụng thủ thuật này nha các bạn.

Đọc tiếp...
Sâu Ciu Blog