Thủ thuật Blogger- Blog Minh (01666055006)

Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.

Trong bài viết này mình sẽ áp dụng cho Popular Posts có id là PopularPosts1.

Bước 1: Thêm đoạn mã dưới đây vào sau thẻ <b:skin><![CDATA[ trong template của bạn.

/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Bước 3: Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Thay thế nó bằng đoạn mã dưới đây.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirx9bRdcYJWUrc0JJEUDI2s4iQL2nq4bZXyPRzpMf-gksyhZR4yoMyqvHLBHgiOJ_CNk0t2m5LT_Rgx8P1rynSB7oh_dsy5MxwM-iGmrnRitwbHlzwS76pXDxjeOh2TdVi2bJEpAaf1Np0/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirx9bRdcYJWUrc0JJEUDI2s4iQL2nq4bZXyPRzpMf-gksyhZR4yoMyqvHLBHgiOJ_CNk0t2m5LT_Rgx8P1rynSB7oh_dsy5MxwM-iGmrnRitwbHlzwS76pXDxjeOh2TdVi2bJEpAaf1Np0/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>

Bước 4: Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.

Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.

Nguồn: http://blog.duypham.info

Đọc tiếp»

26/3/12

Tạo logo liên kết chạy ngang

Posted by Minh on 26.3.12 with No comments so far

Đối với các blog riêng tư, không muốn chia sẽ cùng mọi người thì việc liên kết không đáng quan tâm. Tuy nhiên đối với các blog phục vụ công chúng thì việc muốn được nhiều người biết đến blog mình là điều rất quan trọng. Một trong những cách làm cho đọc giả tìm đến blog là liên kết với các blog khác có cùng chủ đê. Khi liên kết của bạn quá nhiều nó sẽ chiếm một không gian đáng kể trên nền blog của bạn, để giảm thiểu việc này bạn có thể cho nó chạy ngang hoặc dọc trên blog của bạn. bạn có thể tham khảo cách tạo logo liên kết chạy ngang từ trái sang phải bên dưới (Theo yêu cầu của bạn Libra)

DEMO

1. Đầu tiên bạn hãy đăng nhập vào tài khoản Blogspot
2. Tiếp đến vào bố cục (Thiết kế)
3. Tạo 1 phần tử HTML/Javascript 4. Thêm code bên dưới vào phần tử vừa tạo trên

<div style="background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaqBe_5OiZoANnnqlXmeOyJHWDV99Ks6nIeP9GcSkjHbYnYF2GvyIV4sxNmFktdwIQlpAnU25wrRnN81-vdB8F5dsaYW42eWmnIfInLOGnb_S5zI296Vo-2OGa4aVvEFuXS8RNlVaQqtbo/) no-repeat left; border-top:#999 1px solid; border-bottom:#999 1px solid; padding-left:19px;padding-right:2px;width:100%;">
<marquee onmouseout="this.start()" direction="left" behavior="50" scrollamount="5" height="60" onmouseover="this.stop()" scrolldelay="50" width="511">
<a href="URL liên kết 1" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 1"/> </a>
<a href="URL liên kết 2" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 2"/> </a>
<a href="URL liên kết 3" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 3"/> </a>
<a href="URL liên kết 4" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 4"/> </a>
<a href="UR Lliên kế 5" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 5"/> </a>
</marquee></div>

Tùy chỉnh: Bạn hãy thay các dòng text màu đỏ trong code thành địa chỉ blog bạn liên kết và các dòng màu xanh thành địa chỉ logo tương ứng.
Ở đây mình chỉ cho 5 logo chạy ngang từ trái sang phải nếu muốn thêm nhiều hơn bạn chỉ việc thêm code bên dưới vào sau các logo trên và sửa lại cho phù hợp.

<a href="UR Lliên kế 6" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 6"/> </a>

5. Việc cuối cùng là bạn tìm vị trí thích hợp để đặt nó là xong.

Theo traidatmui.com

Đọc tiếp»

Tạo trang in chuyên nghiệp nhiều tùy chọn cho Blogspot

Posted by Minh on 26.3.12 with No comments so far

Hiện tại thì Blogger chưa có tính năng tạo trang in cho bài viết như các trang web được thiết kế trên joomla. Các blogger có thủ thuật về tạo nút print bài viết (bạn có thể xem tại đây) tuy nhiên với cách in bài như thế không chuyên nghiệp lắm và nó không loại bỏ được hết những phần thừa của trang blog như những hình ảnh, những tiện ích nhỏ lẻ trên blog đó. Mặc dù có thể thêm phần css để loại bỏ khi in ra, tuy nhiên nó không chuyên nghiệp. Hôm nay mình chia sẻ cùng các bạn các tạo trang in dưới dạng lightbox với Print Friendly, tức là trang in bài viết sẽ hiện ra trước blog và các phần khác của blog sẽ bị che lại giống như hiệu ứng lightbox cho hình ảnh.

Với Print Friendly thì có nhiều lựa chọn cho người dùng khi in bài viết của blog bạn rất tiện lợi,người dụng có thể chọn không in hình ảnh trong bài viết chỉ với thao tác đơn giản, có thể save nội dung bài viết của bạn thành file PDF rất dễ dàng và nhanh chóng. Hơn nữa, người dùng hoàn toàn có thể xóa phần nội dung bất kỳ chỉ với cái nhấp chuột để không in nội dung đó ra, ngoài ra nó còn có thể giúp người dùng lựa chọn file chữ để in ra hay save thành file pdf.

Hình ảnh minh họa

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F)

6. Thêm code bên dưới vào ngay code vừa tìm được

<b:if cond='data:blog.pageType == "item"'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhNbng5ci8-W_bN9OJlTBd7cJ11XrSyVuYx4T03K3d1cBSIXWlCZfCjtfpJ7NcPaxccINFqAriXd8bMoBJgTyfH_eJJ-vmVGu8Oz239lYwHWY4zY8Y2yLDNrkKCEksVHA-9gcn2VHaIVe/) left no-repeat; padding-left: 25px;'><a class='printfriendly' href='#' onclick='window.print(); return false;' title='In bài viết này'>In bài này</a></span></b:if>

7. Cuối cùng save template lại là xong

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

Nguồn: TRAIDATMUI.com

Đọc tiếp»

Tự động làm mới trang Web/blog và chuyển hướng

Posted by Minh on 26.3.12 with No comments so far

Thông thường muốn làm mới lại trang phải nhấp vào nút chức năng làm mới Refresh (F5) trên trình duyệt để làm mới lại trang blog hoặc website. Tương tự như thế với thủ thuật nhỏ nầy người đọc không cần phải bấm nút refresh trên thanh công cụ mà trang sẽ được làm mới tự động theo thời gian được định trước giúp cập nhật thông tin kịp thời đặc biệt đối với những trang cần cập nhật về giá cả, thị trường chứng khoán, tỉ số...

Chèn đoạn code dưới đây vào giữa thẻ <head> .... </ Head>
<meta http-equiv="refresh" content="10"/>

Chú ý: content="10" là thời gian làm mới sẽ được thực hiện trong một khoảng là 10 giây. Vì vậy, con số phải được thiết lập này không quá nhanh bởi vì nó có thể gây khó chịu cho người đọc.

Cũng với thủ thuật nầy có thể tạo sự chuyển hướng từ một địa chỉ URL nvào địa chỉ URL khác được chỉ định trước (giống như tạo một đị chỉ liên kết một hình ảnh hay đoan văn bản). Code nầy hữu dụng khi thay đổi về đị chỉ Blog/web hay đưa đến một trang giới thiệu sản phẩm (quảng cáo).

Chèn đoạn code dưới đây vào giữa thẻ <head> .... </ Head>

Chú ý: content="0" là thời gian chuyễn hướng đến một trang khác. Nếu muốn chuyển hướng cho người đọc đến một trang khác thì cần tùy chỉnh lại thời gian trên cho thít hợp (đơn vị tính là giây).

Đọc tiếp»

25/3/12

Tùy biến label thành tag cloud giống WP

Posted by Minh on 25.3.12 with No comments so far

Bạn có thấy tag cloud của WP đẹp không ? , vậy giờ chúng ta sẽ làm giống y hệt nhé , chúng ta sẽ làm cho WP phải lác mắt với sức mạnh blogger.

1.Nói lại code hiển thị số bài đăng trong label của Duypham (blog.duypham.info) :
Bởi vì trong blog chúng ta sẽ có 2 thẻ <data:label.count/> một cho dạng list , một cho dạng tag cloud như trong ảnh của bạn Duy Phạm chụp

Ta thay thế:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

Thành:

<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

Rồi tiếp tục:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>

Thành:

<b:if cond='data:showFreqNumbers'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; Bài đăng trong nhãn &quot; + data:label.name'><data:label.name/></a>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:if>

2.Tạo dạng tag cloud:
Các bạn vào Thiết Kế >>> Phần tử trang và bấm vào chỉnh sửa , chúng ta sẽ có như hình trên và làm theo 2 bước như trong hình

Sau đó thêm đoạn code sau trước ]]></b:skin> :

.sidebar .list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.sidebar .list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.sidebar .list-label-widget-content li a:hover{border:1px solid #F26535}

Nếu các bạn thấy không chạy thì hãy làm theo bỏ đoạn css trên và thay bằng đoạn css bên dưới:

.list-label-widget-content li{display:inline;font-size:10px;text-transform:uppercase;white-space:nowrap;line-height:2.5em}
.list-label-widget-content li a{-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #BBB;padding:3px 6px;opacity:0.7}
.list-label-widget-content li a:hover{border:1px solid #F26535}

Theo: vngreenzone.com

Đọc tiếp»

K14 - Pro Menu (với hiệu ứng prodown)

Posted by Minh on 25.3.12 with No comments so far

Lấy ý tưởng từ việc thực hiện demo cho bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống mình dự định sẽ updated thủ thuật lên bằng việc tạo các giao diện khác nhau cho menu khi xem ở các trang khác nhau, ví dụ như các trang label. Nhưng sau đó mình nhớ đến kênh14 cũng có menu như vậy (chỉ khác là không có dropdown) mà giao diện lại đẹp nữa, nên mình quyết định Rip menu này. Và ở bài này menu sẽ không có hiệu ứng dropdown, mình dự định sẽ thêm hiệu ứng dropdown trong thời gian tới.

Xem DEMO

Hình ảnh minh họa :

Updated: Đã cập nhật hiệu ứng sổ dọc cho menu, các bạn có thể xem ở bên dưới

Do làm biếng design giao diện cho nó, nên mình lấy hình nên bên kênh 14 về rồi fix lại để giới thiệu cho mọi người. Và sau đây là 1 số tính năng của nó :
- Tự động thay đổi giao diện của menu cho các trang định sẵn.
- có hiệu ứng trang hiện hành (current) trên menu.
- có 6 kiểu giao diện cho các lựa chọn để thay đổi.

Sau đây là các bước thực hiện :
- Tạo 1 widget HTML/javascript ở nơi muốn đặt menu (tốt nhất là trên header của blog), sau đó dán đoạn code bên dưới vào :

Một vài hướng dẫn :
- Việc đầu tiên là thay http://demo.fandung.com thành tên miền của blog bạn, nhớ là không có dấu (/) theo sau tên miền.
- Để thêm menu, bớt menu, thay đổi tên hiển thị của menu, thay đổi link liên kết của menu,... các bạn chỉnh sửa ở đoạn code như bên dưới :

...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];
...
...

- http://demo.fandung.com thay bằng địa chỉ trang chủ của blog bạn
- link_menu1, link_menu2, ... là đia chỉ liên kết của các menu.
- Menu1, Menu2, ... là tên hiển thị của các menu.
- nếu muốn thêm nhiều menu nữa thì các bạn thêm code tương tự như bên dưới :

- để tùy chọn style cho menu ở mỗi trang, các bạn chỉnh sửa ở đoạn code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- ttmenu[1][0], ttmenu[2][0], ..., ttmenu[6][0] ; đây là các phần tử trong mảng 2 chiều ttmenu, tương ứng với địa chỉ liên kết của các menu : Menu1, Menu2, ..., Menu6
- ở trên menu0, tức là menu HOME mình cho style mặc định là style1. cùng style với các trang liên kết không có trong menu (ví dụ các trang archive hoặc trang bài viết, ...) , hoặc các liên kết không được chọn style để hiển thị.
- code trên sẽ được hình dung như bên dưới :

Menu0 ------ style1
Menu1 ------ style2
Menu2 ------ style3
Menu3 ------ style4
Menu4 ------ style5
Menu5 ------ style6
Menu6 ------ style2
Trang khác ------ style1

- Nếu muốn thay đổi style cho các trang, các bạn chỉ cần đổi tên style1, style2,... thành các style khác là được. tức là các vị trí trong code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Nếu như có nhiều menu thì các bạn cứ thêm code như bên dưới để chọn style cho nó :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[8][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- lưu ý : ttmenu[7][0], và ttmenu[8][0] là liên kết của các Menu7, và Menu8.
- nếu muốn chỉ 1 trang nào đó có giao diện đặc biệt khác với các trang còn lại (ở đây mình ví dụ là trang Menu1) thì đoạn code ở trên sẽ chỉ còn như bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Đoạn code trên có nghĩa là chỉ có trang Menu1 là có giao diện riêng biệt là Style2, còn các trang khác sẽ có giao diện Style1.

Như vậy mình hướng dẫn đã xong. các bạn cứ test thử, nếu có trục trặc gì mình sẽ fix lại bài viết và cập nhật thêm hướng dẫn.

----- UPDATED -----

K14 - Promenu (với hiệu ứng sổ dọc)

- ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống

Xem DEMO

Hình ảnh minh họa :

- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài Tạo Menu Thanh menu ngang có sổ dọc xuống để có thể chỉnh sửa lại từ code mẫu :

- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể.

Theo: fandung.com

Đọc tiếp»

Tạo ảnh loading đẹp với css và js

Posted by Minh on 25.3.12 with No comments so far

Cái thủ thuật này xưa lắm rồi các bạn ạ , nhưng làm thì chúng ta phải có ảnh loading , mà trong khi đó thì các ảnh không được đa dạng và nhìn nó chạy cảm thấy rất nặng , nhưng với cssload.net Chúng ta không phải ngại về vấn đề trên nữa.
1.Thêm .js:
Thêm đoạn js sau vào trước </head> :

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("loading").style.display="none";
}
</script>

2.Đoạn html:
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:

<style>
#circleG{
width:149.33333333333334px;
}
.circleG{
background-color:#48c7a9;
float:left;
height:32px;
margin-left:17px;
width:32px;
-webkit-animation-name:bounce_circleG;
-webkit-border-radius:21px;
-webkit-animation-duration:1.35s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circleG;
-moz-border-radius:21px;
-moz-animation-duration:1.35s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
opacity:0.3}
#circleG_1{
-webkit-animation-delay:0.27s;
-moz-animation-delay:0.27s}
#circleG_2{
-webkit-animation-delay:0.63s;
-moz-animation-delay:0.63s}
#circleG_3{
-webkit-animation-delay:0.8099999999999999s;
-moz-animation-delay:0.8099999999999999s}
@-webkit-keyframes bounce_circleG{
0%{
opacity:0.3}
50%{
opacity:1;
background-color:#19409a}
100%{
opacity:0.3}
}
@-moz-keyframes bounce_circleG{
0%{
opacity:0.3}
50%{
opacity:1;
background-color:#19409a}
100%{
opacity:0.3}
}
</style>
<div border="0" style="position:fixed; width: 100%; height: 70px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="0" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="0" style="background-color: #000; color: #fff;filter: alpha(opacity=70); opacity: .7; width: 190px; height: 70px; z-index: 1; border-collapse: collapse;-moz-border-radius: 5px;
-webkit-border-radius: 5px;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br /><div id="circleG">
<div id="circleG_1" class="circleG">
</div>
<div id="circleG_2" class="circleG">
</div>
<div id="circleG_3" class="circleG">
</div>
</div> Nhấn F5 nếu đợi quá lâu</div> </td> </tr> </table> </div>

Nếu các bạn không thích thì vào cssload.net để tạo các style khác nhau , và thay chỗ css màu xanh thành đoạn css mà bạn muốn , thay code màu đỏ thành chỗ hiển thị ảnh loading. Đoạn code màu vàng để thay đổi chiều cao cho khung.
Theo: vngreenzone

Đọc tiếp»

BlogSpot cải thiện tính năng SEO cho blog

Posted by Minh on 25.3.12 with No comments so far

Blogger hôm nay đã cập nhật nhiều tính năng SEO mới cho Blogger. Phải tranh thủ xem qua mới rõ hết được, có lẽ giao diện blog cũ sẽ không được nâng cấp thêm. Các bạn hãy vào giao diện Blog mới để thiết kế tuỳ chỉnh. Địa chỉ giao diện mới tại đây.

Một số điểm mới có thể kể ở đây, cụ thể là :

1. Thẻ mô tả
- Tuy đã được hỗ trợ trong phần cài đặt chính nhưng nó vẫn được gom nhóm vào phần tìm kiếm chung cho blog của bạn. Hãy bật nó lên lần nữa nhé.

2. Lỗi và chuyển hướng

- Bạn đã có thể tạo thông báo lỗi bằng các đoạn mã, hay ảnh hiển thị.

- Tính năng chuyển hướng mới đã được cải thiện, giờ bạn có thể dùng javascript để tạo thêm các link cho mình. Một các hack tag SEO cho blog, mình sẽ sớm công bố tiện ích này, gộp chung nó vào phần tìm kiếm theo tag, keywords của từ khoá.

- Mọi người có thể check thử link sau : .. sieuluoi, bạn sẽ nhận được thông báo Rất tiếc, trang bạn đang tìm trong blog này không tồn tại. Nhưng với vài thủ thuật nhỏ ta sẽ biến nó thành một phần của Blog, như một Website hoàn thiện, hay đúng hơn là hoàn thiện.

3. Robots.txt và tuỳ chỉnh tìm kiếm của Robots.txt.

- Với dự án mở của Blogger này ta có thể mở phần /search bị đóng lâu nay của Blogger.

User-agent: * Disallow: /search == > Allow: /search
Allow: /

- Chưa biết có thăng thêm index lên Google không nhưng mình tin là có.

- Tuỳ chỉnh các thẻ meta robots mà không cần mó tay vào code temp blog.

Kết chung lại, blogger đang càng ngày càng thân thiện với người dùng, trong năm tới và kể cả ngay về sau này nó còn tiếp tục miễn phí không thì mình không đoán được. Chỉ biết bay giờ mình yêu BlogSpot, một thứ ngon bổ rẻ.

Theo: fandung.com

Đọc tiếp»

10/3/12

ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.

Posted by Minh on 10.3.12 with No comments so far

Plugin mới này mình cũng mới test thử và hiệu quả cũng rất tốt. Còn về khách quan mà nói, mình không phải một dân chuyên SEM, SEO. Nên kinh nghiệm về SEO và SEM còn hạn chế. Có một pro đã nói plugin này không an toàn với Sanbox của Google, hoặc index từ Google. Do vậy các bạn nên cân nhắc khi sử dụng tool này.

Nói sơ qua về plugin này, nó có thể nói là một công cụ mạnh cho việc tạo và hỗ trợ thêm về từ khoá cho site của bạn. Đôi khi bạn hay phải cập nhật từ khoá hot cho site, nhưng công việc bận rộn, khiến bạn không thể rảnh tay mà cập nhật được. Mình làm tool này mong làm giảm nhẹ việc đó. Tất cả các từ khoá sẽ được cập nhật từ người dùng, các từ khoá tìm kiếm nhiều nhất, hot nhất đều được tự động thêm vào sau mỗi ngày, mỗi giờ, tuỳ vào tuỳ chỉnh của bạn.

Sử dụng như sau:

1. Hãy đăng ký một nick tại đây (có thể coi đây là trang lưu trữ thông tin keywords cho site bạn.)

2. Đăng nhập vào vào phần chữ đỏ sau để lấy KeyAPI cho site.

Lấy KeyAPI tại đây : các bạn cần phải lấy bao gồm Your secret API key & Your site guid

3. Sử dụng ANCKeywords để tạo keywords cho site từ KeyAPI lấy được.
Tạo một file js vào cho đoạn mã sau upload lên Google Code.

//Begin code
var aseo = {
tag:"{các từ khoá liên quan đến site bạn, 4 từ, ngăn nhau bởi dấu ,}",num:"",ap:"Tên site hoặc domain",as:'Lời giới thiệu'
}
veo = "{domain},{subdomain}";
function s_write(keysite,keyapi)
{
surl = 'https://api.tynt.com/publisher/v1/keyword/inbound?site_guid='+keysite+'&api_key='+keyapi+'&hours=24&callback=ancseo';
var sr = document.createElement('script');
sr.src = surl;
document.getElementsByTagName('head')[0].appendChild(sr);

sdata = "if(document.location.protocol=='http:'){"
   +"var Tynt=Tynt||[];Tynt.push('"+keysite+"');"
   +'Tynt.i={"ap":"'+aseo.ap+'","as":"'+aseo.as+'","st":true};'
   +"(function(){var s=document.createElement('script');"
   +'s.async="async";s.type="text/javascript";'
   +"s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();}";
  var srr = document.createElement('script');
srr.innerHTML = sdata;
document.getElementsByTagName('head')[0].appendChild(srr);
}
function ancseo(x){
num_seo = x.data.length;
for(var i=0; i<num_seo; i++){
veo += x.data[i];
}
  var meta = document.createElement('meta');
meta.name = 'keywords';
meta.content = veo.replace(/\,[\d]*/gi,",") + aseo.tag;
document.getElementsByTagName('head')[0].appendChild(meta);
aseo.tag = veo + aseo.tag; }
function diseo(name,content){
var mt = document.createElement('meta');
mt.name = name;
mt.content = content;
document.getElementsByTagName('head')[0].appendChild(mt);
}
//Endcode

Sau khi tạo xong bạn lấy link và chèn vào phần header đoạn code sau.

<script src="//Link file của bạn"></script>
<script>
/*--- Auto SEO Update Keyword ---*/
s_write('{Your site guid}','{Your secret API key}');
</script>

Số 24 bạn có thể thay thành các số sau: 1, 8, 12, 24. Đây là thời gian update keywords cho các bạn.

Kết quả từ sau một đêm của mình các bạn có thể xem và cho nhận xét.

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

Đọc tiếp»

7/3/12

Tạo hộp tìm kiếm cho blogspot

Posted by Minh on 7.3.12 with No comments so far

Để cho người xem blog dễ dàng tìm kiếm các bài đã đăng trên Blog của mình, bạn có thể tạo hộp tìm kiếm (Search...) trên Blog với một số mẫu dưới đây.
Ứng với mỗi mẫu là code phía dưới, nếu thích mẫu nào bạn chỉ cần đăng nhập vào Blog > chọn thiết kế > thêm tiện ích HTML/Javacript rồi dán code tương ứng phía dưới vào và bấm Lưu lại là xong.
Mẫu 1:

Mẫu 2:

Mẫu 3:

Mẫu 4:

Mẫu 5:

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

Đọc tiếp»

29/2/12

Hướng dẫn xem các kênh SCTV không bị chặn hình ảnh

Posted by Minh on 29.2.12 with No comments so far

Vào file hosts trong ổ đĩa C:\Windows\System32\drivers\etc.Sau đó mở file này lên bằng Notepad của file hosts lên và dán vào dưới cùng của file đó bằng đoạn code: 123.30.187.2 tv24.vn (copy dòng bôi đen đó paste vào cuối cùng của file host)->xong save lại.
Tắt mở lại trình duyệt để xem. Vậy là xong rồi nhé.