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

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.

Read More

Không cho sao chép nội dung bài viết cho blogger

Có thể mọi thành quả , công lao chúng ta khi chúng ta suy nghĩ hoặc tạo ra nó , các bạn muốn sự làm việc siêng năng của mình được bù đắp. Nhưng , đã có một số kẻ gọi là ăn cắp chất xám người khác vd : "copy cat" , con mèo con chỉ biết bắt chước mèo mẹ mà thôi.
Để chống lại tình trạng copy vô tội vạ của một số blogger . Chúng ta hãy thử cách này xem .








1.Đăng kí:
Vào trang  Tynt.com để đăng kí cho mình 1 tài khoản giống hình trên

2.Cách cài cho blogspot:
Vào giao diện chính của blogger

Vào mục thiết kế >>>> chỉnh sửa html:

Chèn đoạn js của Tynt vào trước thẻ html:

Đây là đoạn js lúc đầu các bạn nhận được lưu ý đây là code của vngreenzone.com , các bạn hãy thay nó thành code mình đã đăng kí , xin lưu ý là khi các bạn lấy code này vào , sẽ tự động dính thử nghiệm , mà các bạn sẽ hiểu code trên , nếu đã thấy thì các bạn hãy xóa nó đi nhé . Không bật mí đâu , trừ khi các bạn test :)):

<script type="text/javascript">
if(document.location.protocol=='http:'){
 var Tynt=Tynt||[];Tynt.push('adoU5Ihzqr4A9macwqm_6l');Tynt.i={"ap":"Nguồn bài viết :"};
 (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);})();
}
</script>

3.Cách thức hoạt động:
Quan niệm của Tynt

Nếu có một người copy bài viết của bạn , nó sẽ tự động chèn vào phím ctrl+C và khi các bạn ctrl+v thì coi như người đó đã giúp các bạn 1 vé , và thế là cứ tiếp tục và tiếp tục. Ví dụ như hình ảnh trên:

Thủ thuật trên cũng mang tính về seo khá nhiều đó các bạn ạ.

Read More

Các bước và cách bảo vệ blog khỏi google

Google là ông chùm của ngành internet . Ừm thì ông là vua tôi là giặc , tôi vi phạm thì ông xử chém . Qua việc vnblogspot.com bị google đá mất tài khoản là không chấp nhận được và hãy tìm cách làm sai cho ông vua nhà ta bớt giận.










1. Hãy tìm và đọc lại điều khoản:
Các bạn vào link sau vào xem lại ở đây . Sau khi đọc xong thì đến bước 2 thôi
2.Sao lưu blog lại khi có bài viết mới:

Các bạn nên làm những lúc có bài mới , xuất blog hàng ngày lưu vào 1 file mục . Thì chắc chắn google khóa tài khoản thì chuyển qua tài khoản mới
3.Sao lưu templates trên blog:
Làm theo các hình sau đây :

Xong . Chỉ cần làm theo 3 bước trên thì không lo google
Còn nếu như sub domain mà còn bị dính trên blog cũ thì chúng ta hãy liên hệ với google để giải quyết vấn đề này.

Read More

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

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}

Read More

Khung tìm kiếm biết nói cho blogspot

Bạn đã thấy khung tìm kiếm biết nói chưa ? Đa số là chưa đâu vì Yolks đã mới nghiên cứu trình duyệt  Google Chrome nên giờ thấy thích thú quá.

Demo sẽ là blog Yolks (Chỉ xem bằng Google Chrome)

1.Cách chỉnh sửa:

<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text'/>
<input class='button' type='submit' value='Search'/>
</div>

Chúng ta xem đoạn code màu đỏ , và chúng ta sẽ thay nó thành:

<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value='' x-webkit-speech='x-webkit-speech'/>
<input class='button' type='submit' value='Search'/>
</div>

Xong. Vậy là chúng ta sẽ có hệ thống đọc tiếng Anh giống Lạc Việt trên khung tìm kiếm

Read More

Trình diễn đa năng với koolbox

Trong lúc đi dạo các blog chuyên về design thì Yolks thấy, một số designer dùng plugin của jQuery là koolbox. Cho một số trang web của họ để làm đẹp ảnh trình bày bai viết.

Tuy nhỏ gọn , nhưng bảo đảm với các bạn koolbox có thể sẽ đánh ngã được prettyphoto trong thời gian sắp tới vì đây chỉ mới phiên bản v1.



Chúng ta sẽ xem qua các kiểu của nó nhé:

BASIC:

<a href="images/1.jpg" class="kool-box" title="Dragon ball"> <img src="images/thumb/1.jpg" alt="" /></a>
<a href="images/2.jpg" class="kool-box"> <img src="images/thumb/2.jpg" alt="" /> </a>
<a href="images/3.jpg" class="kool-box"> <img src="images/thumb/3.jpg" alt="" /></a> 

GALLERY:

<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a> 
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a> 
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>

GALLERY (Other theme):
 

<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a> 
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a> 
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>

HTML:

• noct-land
• vnblogspot
• TTB

<ul>
  <li><a href="#infoContent" class="kool-box {width:300,height:200}">Inline Content</a></li>
  <li><a href="ajax.htm" class="kool-box {width:600,height:400}">Ajax Content</a></li>
  <li><a href="http://www.google.com/search?sclient=psy&hl=en&biw=1920&bih=920&site=&source=hp&q=vngreenzone" class="kool-box {
type:'iframe',width:800,height:600}" >Iframe</a></li>
</ul>

MEDIA:
 

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf"
class="kool-box"><img src="images/video/flash.png" /></a>
<a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov"
class="kool-box"><img src="images/video/quicktime.gif" /></a> 
<a href="http://www.youtube.com/watch?v=EFJOZkKi7gk" class="kool-box"> <img src="images/video/youtube.png" alt="Youtube" title="Youtube" /></a>
<a href="http://vimeo.com/8578886" class="kool-box"><img src="images/video/vimeo.png" alt="vimeo" title="vimeo" /></a> 
<a href="http://www.megavideo.com/?v=22DU0O7O" class="kool-box"> <img src="images/video/megavideo.png" alt="Megavideo" title="Megavideo" /></a>
<a href="http://www.facebook.com/video/video.php?v=452462259845" class="kool-box"> <img src="images/video/facebook.png" alt="Facebook" title="Facebook" /></a>
<a href="http://www.dailymotion.com/video/xhzwb7_videotest-de-dragon-ball-z-budokai-3-sur-ps2_videogames"
class="kool-box"> <img src="images/video/Dailymotion.jpg" alt="Dailymotion" title="Dailymotion" /></a>
<a href="http://www.veoh.com/watch/v20859242sSZ5BzKR" class="kool-box"> <img src="images/video/veoh.png" alt="veoh" title="veoh" /></a> 
<a href="http://www.metacafe.com/watch/6415350/dragon_ball_game_project_age_2011_teaser_trailer/"
class="kool-box"> <img src="images/video/Metacafe.png" alt="Metacafe" title="Metacafe" /></a>
<a href="http://clip.vn/watch/DragonBallZ056,zOr" class="kool-box"><img src="images/video/clip.vn.png" alt="clip.vn" title="clip.vn" /></a>  

CÁC THEME KHÁC

• Facebook
• White
• Violet
• Widnow 7
• 003366

<ul>
  <li><a href="images/1.jpg" class="kool-box {theme:'facebook'}" title="Dragon Ball Z">Facebook</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'white'}" title="Dragon Ball Z">White</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'violet'}" title="Dragon Ball Z">Violet</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'window7'}" title="Dragon Ball Z">Widnow 7</a></li>
  <li><a href="images/1.jpg" class="kool-box {theme:'003366'}" title="Dragon Ball Z">003366</a></li>
</ul>

1.Cách cài vào blog:Thêm đoạn .js sau vào trước </body> rồi dùng các đoạn code nêu ở trên ví dụ để làm hiệu ứng:

  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/003366/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/facebook/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/white/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/violet/theme.css" rel="stylesheet" type="text/css" />
  <link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/window7/theme.css" rel="stylesheet" type="text/css" />
  <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>-->
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.validate.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.easing.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/metadata.min.js" type="text/javascript"></script>
  <script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/koolbox.min.js" type="text/javascript"></script>

<script type="text/javascript">





    $(function () {



      /* regex = /http\:\/\/www\.youtube\.com\/watch\?v=(\w{11})/;



      url = 'http://www.youtube.com/watch?v=Ahg6qcgoay4';



            var url = 'http://abc.com/a.swf'; // \\"http://vimeo.com/7058755";

            var regExp = /[^\.]\.(swf)\s*$/i; // /youtube\.com\/watch\?v=([A-Za-z0-9._%-]*)[&\w;=\+_\-]#1# ; ///youtube\.com\/watch\?v=(\w{11})/ ; // /vimeo.com\/(\d+)($|\/)/; //|| /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;

            

            var match = url.match(regExp);



            alert(match.length);



            if (match) {

              alert("id: " + match[1]);

            } else {

              alert("not valid url");

            }*/







      $('.kool-box').koolbox();



      $('img').css({ opacity: 0.8 }).hover(

        function () {



          $(this).animate({ opacity: 1.0 });

        }, function () {

          $(this).animate({ opacity: 0.8 });

        });

    });



  </script>

Read More

Menu cố định 3 chức năng đỉnh cho blogspot

Lại 1 menu Yolks sẽ hướng dẫn cho các bạn vào ngay hôm nay . Thú thuật không gì tuyệt bằng menu trên . Với tính năng Scroll Lên/Xuống và tính năng tìm kiếm thì quả thật là 3 trong 1.

Chúng ta sẽ bắt đầu ngay cho nóng. Và tất nhiên Demo là blog Yolks.



1.Thêm css:

Thêm đoạn css sau đây trước ]]></b:skin> :

#nav{
  height:35px;
  border-bottom:1px solid #ddd;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_Wm1Kr5imyoJUj_nqjFby-k0PpLaHfqZ76lOzTnUUXdxZAohiJN9-oSHbA0ci6UO9xBFChKzy3veDQeHNzJ1PkjTwIYDPlNxs6l0xn-d8myng7_LYTDK8P5KWcRyPrP7_SfVHjM82xw/s1600/nav.png) repeat-x center left;
  z-index:999999;
}
#nav ul{
  height:25px;
  list-style:none;
  margin:6px auto 0px auto;
  width:600px;  
}
#nav ul li{
  display:inline;
  float:left;
  margin:0px 2px;
}
#nav a{
  font-size:11px;
  font-weight:bold;
  float:left;
  padding: 2px 4px;
  color:#999;
  text-decoration: none;
  border:1px solid #ccc;
  cursor: pointer;
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ikl9dKDLpHX-lpK6isN6O1NIIOpEulFjDq-mMlAr9kUf5dU-80MJZHZrH73NsX2_pdErzQW-531wc5x37xDohbR4GGLs9J1zbM8Q6do0aU5t7yO6glKGKA-lSQ1FUoXsjB8tXLgRUA/s1600/overlay.png) repeat-x center left;
  height:16px;
  line-height:16px;
}
#nav a:hover{
  background:#D9D9DA none;
  color: #fff;
}
#nav a.top span, #nav a.bottom span{
  float:left;
  width:16px;
  height:16px;
}
#nav a.top span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsezl15w_CDp3JXs3vJSShj_zr7pC-02slX4i6YIdCv8GvScm1QC8OAxxN3PPuKlKqtnVT8LShmoge9qtOHz5dtUcSL46-EQUGqKAVzOVJWxClPm8zC5O_4SJoOru51Oa1pkZPM2TjkB4/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeukVBrkMcysDlmdgqj3GjmfFuZTPjgJ_tLefaFOoQLtKXN2czVPXTIhixuEXUPs1iqT9FQ5Whoi_V4v87Hx8ismKNuJApms4XSlq_woNdhtDLlD76R-nqB-QN_ajN2AssRJdWVeMyl8/s1600/bottom.png) no-repeat center center;
}

#nav ul li.search{
  float:right;
}
#nav input[type="text"]{
  float:left;
  border:1px solid #ccc;
  margin:0px 1px 0px 50px;
  padding:2px 2px 2px 2px;
}
input.searchbutton{
  border:1px solid #ccc;
  padding:1px;
  cursor:pointer;
  width:30px;
    height:22px;
  background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AFOg61VhSLoB5WM4ZD-4xXfZHmqEEeyIZ1btOzh7uEYuMjTqQKH3MdTLw-83B51oMuRPnz0xLk4Lh9yQrCwYBa958QGzW1zYyxYe07J_MHg2wEmm16yMiuZRQ5475FtsXLDnBj4xQyk/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
  background-color:#D9D9DA;
}

2.Thêm html:
Thêm đoạn thẻ html trên đoạn sau <body> :

<div id='top'/>
<div id='nav'>
 <ul>
 <li><a class='top' href='#top'><span/></a></li>
 <li><a class='bottom' href='#bottom'><span/></a></li>
 <li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
 <li><a href="Link 1 ">Tên link 1</a></li>
 <li><a href="Link 2 ">Tên link 2</a></li>
 <li><a href="Link 3 ">Tên link 3</a></li>
 <li><a href="Link 4 ">Tên link 4</a></li>
 <li><a href="Link 5 ">Tên link 5</a></li>
 <li><a href="Link 6 ">Tên link 6</a></li>
 <li class='search'>
<form action='/search' class='left form' method='get'>
<input class='left text gray' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Từ Khóa Tìm Kiếm&quot;;}' onfocus='if (this.value == &quot;Từ Khóa Tìm Kiếm&quot;) {this.value =&quot;&quot;;}' type='text' value='Từ Khóa Tìm Kiếm'/>
  <input class='searchbutton' type='submit' value=''/>
</form>
 </li>
 </ul>
</div>

3.Thêm javascript:

Đặt đoạn code sau vào trước </body>

<script type='text/javascript'>
//<![CDATA[      $(function() {
        $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else    
                        $('#nav').stop().animate({'opacity':'1'},400);
                });
                
                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
      });
    //]]>
</script>
<div id='bottom'/>

Đoạn code trên để sử dụng scroll lên/xuống.

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

Read More

Cảm nhận chân thành khi sử dụng blogger

Tôi tên Yolks , tôi thề chỉ theo blogger . Tôi biết các bạn hay chỉ trích nói blogger không có nhiều ưu điểm: seo thì tệ hại , plugins thì không có , tiện ích thì không thể tùy biến nhiều. Và chỉ 1 câu tôi tặng bạn : "Bạn lầm rồi , bạn của tôi ơi !".

Tôi biết nói thật lòng làm bạn đau , nhưng tôi phải nói rằng blogger mang lại nhiều điều không thể diển tả được.







1.Cuộc sống:

Nói thật blogger mang đến cho tôi nhiều cảm hứng trong việc thiết kế , từ khi làm blogger , tôi bắt đầu thích đồ họa , tôi bắt đầu thích môn mỹ thuật. Tôi không hiểu tại sao từ khi tôi gia nhập blogger , những cảm xúc vui và buồn tôi đều được trải qua nhờ cộng đồng blogger  đón nhận tôi.
Tôi thấy cuộc sống tôi bắt đầu có ý nghĩa , blogger làm cho tôi học tập đúng giờ , làm việc hợp lí , và cuối cùng tôi lại nhờ blogger giải tỏa căng thẳng của chính mình.
2.Bạn bè:

Trước đây , Yolks là 1 kẻ kiêu ngạo , hiếu thắng , nhưng giờ đây tôi như "Ếch ngồi đáy giếng" , tôi nhận thấy tài năng mình thật kém cỏi , chính vì vậy tôi đã tu tâm dưỡng tính và gầy dựng lên VGZ đến ngày nay. Không những thế tôi tìm thêm 1 số bạn cùng chung chí hướng với mình. Các bạn ấy đã có nhiều lúc rất bực tôi chính vì tôi hay tự cao tự đại , nhưng chính vì như thế tôi lại trưởng thành hơn và đứng vững được . Người ta còn nói tôi học lớp 9 nói thì nói cho vịt nghe hay sao. Tôi buồn khi nghe câu nói này , nhưng cũng lấy lời nói ấy làm mục tiêu để tiến đến tương lại.

3.Mục tiêu:

Làm blog mà không có mục tiêu là không được , tại sao tôi lại chọn chuyên mục khó với kiến thức css , kiến thức .js thì càng bó tay.
Nhưng tôi vẫn làm vì bạn , vì cộng đồng , tôi không muốn blogger không được công nhận là mã nguồn mở  tốt nhất , tôi không muốn người bạn blogger này chết trong mắt tôi. Từ khi gia nhập blogger tôi đã xem blogger như một người thân , một người bạn , và từ lâu tôi đã không rời xa blogger dù 1 ngày. Hãy gúp Yolks phát triển blogger nhé.

Read More

MOBILYBLOCKS - Chia sẻ lên các mạng xã hội

Với tiêu chí nhỏ gọn , có nhiều Social Media không phù hợp với blog bạn. Bạn nghĩ sao khi có 1 Social Media vừa nhỏ gọn , vừa có hiệu ứng tuyệt đẹp như trong:

Demo

Quả thật hiệu ứng mượt mà , không thể tả nổi với hiệu ứng chuyên nghiệp của nó

Để có thể sử dụng lâu dài , phòng khi host của demo die nên Yolks có 1 file lưu trữ các bạn Download tại đây.

Đọc kỹ hướng dẫn trước khi dùng.

1.Thêm .js và teamplate:

Đầu tiên tìm thẻ </head> và thêm trước nó :

<script src='http://dl.dropbox.com/u/39436129/jquery.js' type='text/javascript'></script>
<script src='http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js' type='text/javascript'></script>
<script type="text/javascript">
$(function(){
    $('.socials').mobilyblocks({
        trigger: 'click', //Hover hoặc Click
        direction: 'counter', //clockwise hoặc counter (Cùng hoặc ngược chiều kim đồng hồ
        duration:500,//Thời gian hiển thị vòng tròn (Số càng nhỏ, hiển thị càng nhanh)
        zIndex:50,//Giá trị z-index của thẻ li
        widthMultiplier:1.15//Phạm vi của vòng tròn sau khi click
    });
});
</script>

2. Thêm css vào template:
Tìm ]]></b:skin> thêm vào trước nó:

.socials {float:left;display:block;width:32px;height:32px;background:url(http://i.imgur.com/lmSYJ.png) no-repeat;cursor:pointer;position:relative;margin:14px 0 0 30px}
ul.reset,ul.reset li {display:block;list-style:none;padding:0;margin:0}
ul.reset li {position:absolute}
ul.reset li a {outline:none}

3. Thêm đoạn code vào nơi bạn muốn:

<div class="socials">
  <ul class="reset">
    <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/F8dqt.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/Wy83E.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/xy0Ln.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/3XABb.png" alt="" /></a></li>
    <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/sizrF.png" alt="Facebook" /></a></li>
    <li><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/KFgDs.png" alt="" /></a></li>
  </ul>      
</div>  

Các bạn có thể chèn ở:
Chèn vào sau:

<div class='post-footer-line post-footer-line-1'>

Or

<div class='post-footer-line post-footer-line-2'>

Or

<div class='post-footer-line post-footer-line-3'>

Nếu ko có các bạn cứ để dưới

<data:post.body/>

Chúc các bạn vui vẻ

Read More

Menu nằm dọc blog với jQuery và css

Đây là một thủ thuật về cách tạo 1 danh mục với jQuery và css.

Danh mục này được cố định trên blog và nó có thể ẩn hiện một cách nhẹ nhàng với css.

Demo

Có thể nói đây là 1 menu trong suốt đẹp nhất từ trước tới giờ mà Yolks từ thấy và từng được xem.

1.Dăng nhập vào tài khoản --> bảng điều khiển --> Thiết kế --> Chỉnh sửa html

2.Thêm css:

/*----------------------------------------------------
{--------} Menu navigation {--------}
----------------------------------------------------*/
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 10px;
  left: 0px;
  list-style: none;
  z-index:9999;
}
ul#navigation li {
  width: 100px;
}
ul#navigation li a {
  display: block;
  margin-left: -2px;
  width: 100px;
  height: 70px;  
  background-color:#CFCFCF;
  background-repeat:no-repeat;
  background-position:center center;
  border:1px solid #AFAFAF;
  -moz-border-radius:0px 10px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  /*-moz-box-shadow: 0px 4px 3px #000;
  -webkit-box-shadow: 0px 4px 3px #000;
  */
  opacity: 0.8;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjAZRJShxl_m7gxparvBJzczeCbiMk49yNn6ydBRFsfJl2P6nNj_Sz2AKNT3_JTx-ix_pXqsvxSKMDrdUPCh6T3Vymv9NjyeOrFRWonfOvchvs1zJkbLuag0k_N4pYPeTaBMKpPtkMWg/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik08m1FeUI3NoyD936KTS5SWaaIyWoGQEXcG_TTH5V7f1zI5fJlxnCRpr9vLKL0-FyBvUqp-TyNd_LMju9b-OGa0GXPf2yRylJG_1FxYRjv-7slOPxxq8SXL-xo1w0bvswlwGFIeriDfw/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp6Iye-9N4t3zjrKKzHTtNZoVQRR7-ewRU81jjNFDBF7-wAUmz9hC60XRMfcbOBW92gIg7yGeiXIomEeaINOkZ3V7gKDkmkuZ1V0CNPHtt9V8uChvRP-fE8qIay0pp5R-En5GWvV-kMpE/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7m5U8RBgQMuskPtGd6VdrE3OJvEQd_seI-yB1sxll-R6qCAHWdlJ2vz_fs_zHUGEOGlKFLvchjk8afixlqJ0i7M7tlpryYPVpoOHSFfyyW97KWtiT-sze3JicMQVUTwczLPC7my8Jjfk/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEwz4VWjNk75jTmyINLN8EnV6IdMfUf6kJuM3EJqYMiMhbioQsrCI7pXw9c02K4rVyNiXnVJJGqf87QO1kpuXeEfqshRPW2m7klY73RXlpAlp1VXl2iWO5I_4R04BWE0PBU7ae0uOirk/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkHxbAFIxopQUW0iIod0fI7KVhbgzkx_lx8oIGtZraYZI0K4nVHcOseEIQJDyGo_0DZAcVcXIVl32zJWl8v5ALJQJ2Lri5egRqZKGFgHlFbJY9XGBLk8IeH6Sgdg1ZyGqe3037lkObLo/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFbl8k7d1O37tW6AM3_3MffQHwLzudWHqejoIWMslL7L2C0_9O0YycM0G3lWUp2XEpDDdUOP0jlbVEz9GIq54UvTYy1NW-5z3Ka6RPT61kf6VZsBbmyIKuwzyXDeELaQSkgVDGvASesz8/s1600/mail.png);
}

Những cái mà mình chú thích là màu xanh thì mấy bạn thấy nó sẽ liên quan đến các hình ảnh hiển thị trên menu. VD: bạn muốn làm 1 cái hình thông báo chẳng hạn thì đoạn mã css như sau:

ul#navigation .thongbao a  {
  background-image: url(link ảnh);
}

3.Thêm js:
Tìm thẻ </head> và thêm đoạn js này trước nó:

<script type="text/javascript">
      $(function() {
        $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

        $('#navigation > li').hover(
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
          },
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
          }
        );
      });
    </script>

4.Chèn html:
tìm </body> và chèn trước nó đoạn code:

<ul id='navigation'>
      <li class='home'><a href=''><span>Home</span></a></li>
      <li class='about'><a href='http://www.vngreenzone.com'><span>About</span></a></li>
      <li class='search'><a href='vngreenzone.com'><span>Search</span></a></li>
      <li class='photos'><a href='http://www.vngreenzone.com'><span>Photos</span></a></li>
      <li class='rssfeed'><a href='http://www.vngreenzone.com'><span>Rss Feed</span></a></li>
      <li class='podcasts'><a href='http://www.vngreenzone.com'><span>Podcasts</span></a></li>
      <li class='contact'><a href='http://www.vngreenzone.com'><span>Contact</span></a></li>
</ul>

Nếu bạn muốn thêm 1 thẻ thông báo với đoạn code css mà Yolks nói thì như thế này

<li class='thongbao'><a href=''><span>Thông báo</span></a></li>

Nguồn : Tympanus

Read More

Tạo chương trình chia sẽ doanh thu cho từng tác giả trong bài viết của họ

Bạn là một fan hâm mộ blogger và bạn chẳng muốn đổi qua WP chút nào.Để thắng được WP chúng ta phải nổ lực bằng cách thu hút nhiều tác giả viết blog , vậy tai sao chúng ta không dùng chương trình chia sẻ doanh thu cho từng tác giả với bài viết của họ nhỉ.Làm như thế nào và làm sao thì chúng ta hãy theo dõi các bước này nhé.





Bước 1:
Đăng nhập tài khoản blogger của bạn,  vào bảng điều kiển ---> thiết kế---> chỉnh sửa html. Check vào cái ô Mở rộng Mẫu Tiện ích
Bước 2:
Tìm đoạn code sau :

<data:post.body/>

Bước 3:
Add đoạn code sau vào bên trên hoặc bên dưới vào đoạn code vừa tìm được , tùy trường hợp bạn làm sao cho thích hợp.

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Author1"'>
PASTE THE ADSENSE CODE FOR AUTHOR 1
</b:if>

<b:if cond='data:post.author == "Author2"'>
PASTE THE ADSENSE CODE FOR AUTHOR 2
</b:if>

<b:if cond='data:post.author == "Author3"'>
PASTE THE ADSENSE CODE FOR AUTHOR 3
</b:if>

</b:if>

ở đây các bạn nên dùng ADSENSE của google thì nó hay hơn và cũng dễ sử dụng. Thay "Author 1", "Author 2", "Author 3", thành tên của tác giả bài viết , lưu ý thay PASTE THE ADSENSE CODE FOR AUTHOR thành ADSENSE CODE của các tác giả.

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

Read More

Các chương trình thiết kế cho 1 blogger

Làm blog chắc ai cũng muốn giao diện của mình gây được ấn tượng với người xem , visit . Nhưng để được sự thật như thế chúng ta phải có nhiều công cụ và  chương trình viết code hỗ trợ. Hôm nay Yolks xin bật mí nhiều công cụ cho anh chị em blogger chúng ta sẽ dễ dàng trong thiết kế giao diện.






 1. Thiết kế về đồ họa:
Chương trình mạnh bạo nhất trong mạnh bạo là Photoshop ( PTS) , với phiên bản vượt trội CS5 thì mức thẩm mĩ của blog sẽ tăng lên đáng kể đấy.

Tính năng mới của Photoshop CS5
- Tạo hiệu ứng tuyệt đẹp cho bức ảnh. Công cụ Meeks bàn chải "cho phép bạn pha trộn màu trực tiếp trên bức hình, thiết lập các thông số khác nhau để thực hiện các nét cọ thực tế, màu sắc bảng màu trên màn hình, và nhiều tính năng khác.
- Cải thiện thêm nhiều tính năng giúp làm việc với các đối tượng 3D, vật liệu...
- Hình ảnh trực quan, thoải mái trong thiết kế.
- Làm việc với các công cụ tiên tiến nhất để xử lý hình ảnh RAW chất lượng cao.
Và nhiều tính năng khác...
Phiên bản Adobe Photoshop CS5 có lẽ là một đột phá mới của hãng Adobe, mà một chuyên gia photoshop khó có thể cưỡng lại:)

Download Free Adobe Photoshop CS5 Full
http://www.mediafire.com/?12li2kfo7x5iu

Adobe Fireworks CS5 cho phép bạn tạo các ảnh đồ họa tối ưu ấn tượng cho web hay bất kì thiết bị nào — từ Smartphone đến các ki-ốt hiển thị. Tạo ra trang web, giao diện người dùng, cùng các mẫu hình chỉnh sửa được cả ở dạng vector lẫn bitmap.
Có gì mới trong Fireworks CS5
Nhiều cải thiện hiệu năng mở rộng
Cải thiện hiệu quả với tốc độ tăng cường, bộ công cụ đồ họa cập nhật, cùng khả năng kiểm soát tốt hơn vị trí pixel.
Dựng hình với độ chuẩn xác mức pixel
Tính năng dựng hình chuẩn pixel giữ cho các bản thiết kế luôn hiển thị rõ ràng trên màn hình bất kể kích cỡ.
Hoạt động liên thông với các ứng dụng Adobe Flash
Xuất các đối tượng, trang hay toàn bộ tài liệu ra ứng dụng Adobe Flash qua FXG nhằm tăng cường tương tác.
Thiết kế mẫu
Lưu các dự án thường dùng thành mẫu thiết kế để chia sẻ với nhóm thiết kế.
Hỗ trợ Adobe Swatch Exchange
Hợp màu chuẩn xác với các thiết kế từ các Phần mềm tại ChợĐiệnTử – eBay Việt Nam”
phần mềm đồ họa Adobe khác với Adobe Swatch Exchange.
Thiết kế toàn bộ trang web
Tạo mẫu trong Fireworks sau đó xuất ra các bố cục CSS tiêu chuẩn hoàn chỉnh trong Dreamweaver.
Tích hợp với Adobe Device Central
Khởi động các dự án di động tự tin với các mẫu hồ sơ thiết bị trong Adobe Device Central.
Những cải tiến mở rộng
Tùy biến các mã cho phép xuất, xử lý hàng loạt cùng các định dạng FXG với giao diện lập trình ứng dụng (API) mở rộng.

Hướng dẫn cài đặt:
1. Chạy setup, chọn Install this product as a trial
2. Chạy keygen, ấn Patch Hosts File
3. Điền tên vào Name và chọn Adobe Master Collection CS5
4. Bật Adobe Fireworks CS5, chọn Provide a serial number và điền Serial ở Keygen vào sau đó ấn Continue.
5. Tận hưởng thành quả.
 Note: Nếu bạn gặp lỗi Invalid Serial Number thì thêm dòng sau vào file hosts (C:\WINDOWS\System32\drivers\etc\hosts)

127.0.0.1 activate.adobe.com
Thêm dãy số này vào mục hosts.

Note: với mục này banner của Vnblogspot.com đã thật sự được tô điểm tăng thêm vẻ đẹp blog.
 Ngoài ra, các bạn hãy tìm hiểu thêm như Adobe Dreamweaver CS5 , Adobe Illustrator CS5, Adobe InDesign CS5 Final , Adobe Flash Professional CS5.
2.Chỉnh sửa css:
Với css chúng ta có các phần mềm sau : 

Simple CSS

Đây là 1 chương trình dễ sử dụng, Simple CSS cho phép bạn dễ dàng tạo ra Cascading Style Sheets đẹp mắt , có thể chỉnh sửa  mọi thứ đặt biệt thích ứng với mọi hệ điều hành Mac, Windows và Linux.

Stylizer Css Editor

Chương trình như 1 trình duyệt  gồm chrome , firefox 3.6 --> 4.0 , ie 7 ,8 , 9 rất thích hợp cho chúng ta thiết kế tương thích với chúng.

Macrabbit

Thiết kế đẹp, sáng tạo và nhanh chóng tải các trang web ... với một ứng dụng đẹp, sáng tạo và nhanh chóng,. Phương pháp tiếp cận trực quan CSSEdit  với  phong cách và tính năng xem trước mạnh mẽ sẽ làm cho bạn cung cấp các trang web dựa trên các tiêu chuẩn tuyệt vời để tiết kiệm thời gian của bạn  

Download v2.6.1

3.Chỉnh sửa xml:
Notepad ++:

Hầu như đã quen thuộc với mọi người nhỉ . Ở đây Yolks ko đề cập nữa
EditPlus
Edit Plus 3.0 là phần mềm đa tính năng thay thế cho công cụ Text hay Notepad của Windows, cho phép sửa nhiều loại file, hỗ trợ tốt tiếng việt và chứa nhiều công cụ khác cho bạn tạo và chỉnh sửa 1 file như ý muốn.

 Các tính năng:
Đánh dấu ngữ pháp
EditPlus cung cấp tính năng đánh dấu ngữ pháp rất mạnh mà lại dễ dàng tùy biến, mặc định hỗ trợ các ngôn ngữ HTML, CSS, PHP, ASP, Perl, C/C++, Java, JavaScript và VBScript. Không những thế, bạn còn có thể tự tạo những file ngữ pháp để hỗ trợ cho những ngôn ngữ lập trình khác.
Các tính năng hỗ trợ Internet
- Trình duyệt web tích hợp cho phép duyệt trước nội dung các file HTML hoặc Java Applet mà không cần chuyển qua ứng dụng khác. Cửa sổ trình duyệt hỗ trợ những lệnh trên các trình duyệt thông thường nên bạn có thể lướt web dễ dàng như xem các file HTML trên máy của mình.
- Tập lệnh FTP cho phép upload các file trên máy của bạn lên má chủ FTP hoặc chỉnh sửa các file từ xa.
- Đánh dấu địa chỉ URL & email trong văn bản cho phép bạn kích hoạt ngay bằng phím F8 hoặc giữ Ctrl và nhấn đúp chuột.
HTML toolbar
HTML Toolbar cho phép chèn những thẻ HTML thường gặp một cách nhanh chóng và dễ dàng. Nó còn có những công cụ rất tuyệt như HTML Color Picker, Character Picker, Table Generator và Object Picker.
Document Selector
Document Selector cho phép dùng chuột để truy nhập tất cả các cửa sổ văn bản đang mở, nhanh hơn nhiều so với chọn trên menu Window hay ấn Ctrl+Tab nhiều lần.
Các công cụ hỗ trợ người dùng
EditPlus hỗ trợ các công cụ do người dùng tạo ra, cung cấp các file trợ giúp cũng như các file ghi lại thao tác trên bàn phím. Kết quả khi sử dụng một công cụ nào đó được đưa vào cửa sổ Output Window, nên bạn chỉ cần nhấn đúp vào dòng lệnh bị lỗi là sẽ tự động mở file và chuyển con trỏ đến dòng đó.
Auto-completion
Auto-completion là tính năng tiết kiệm thời gian sẽ chuyển các chữ viết tắt ngắn sang thành một xâu đầy đủ. Mặc định hỗ trợ các ngôn ngữ Perl và C/C++. Bạn còn có thể tự tạo file auto-completion để hỗ trợ những ngôn ngữ khác.
Cửa sổ cliptext
Cửa sổ cliptext có chứa nhiều đoạn text cho phép bạn sử dụng nhanh chóng và tiện lợi. Bạn có thể tinh chỉnh lại, và cũng có thể tự tạo cho mình các file cliptext.
Mẫu văn bản
Cung cấp nhiều mẫu văn bản cho phép bạn nhanh chóng bắt đầu soạn thảo với mẫu văn bản có sẵn.
Các tính năng khác
Đánh số dòng, thước căn, cột chọn, tìm và thay thế, hỗ trợ undo/redo nhiều lần, kiểm tra chính tả, các phím tắt...
Download:

http://www.mediafire.com/?0qkwmydnnmm

Read More