Nov 21, 2011

Manga-Anime [template]

Tag
Lại 1 templates được ra mắt vào hôm nay . Trước khi làm tôi chỉ muốn nói 1 lời với cái bạn : " Template này làm từ 2010" Không sao cái thời mà Yolks chỉ mới bước chân vào blogger . Ngày 7/1/2010 là ngày Yolks tạo cái template này.



1.Ưu điểm:

  • Lưu trữ dạng lịch ( load sẽ nặng hơn nếu blog tầm 300 trở lên)
  • Tiện ích share cho Y!H
  • Auto readmore thông minh
  • Khó lòng bắt chước template thứ 2
  1. Hỗ trợ ie 6 , 7 , 8 , 9
  2.            firefox: 3x >>>>>>>>6x
  3.           opera: tốt trên mọi phiên bản

Nói chung template này rất công phu
2.Khuyết điểm:
Lâu quá rồi cũng ko nhớ , mà nó không có khuyết điểm gì
 Template code
Hãy gõ vào khung "Xin cảm ơn" nó sẽ tự hiện Link download cho các bạn
Download
Khi thấy lưu trữ báo lỗi :
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
Thì các bạn hãy làm theo hình trên
Save template

Nov 8, 2011

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

Tag
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}

Xây dựng một vngreenzone hoàn hảo , tại sao không ?

Tag
Nút +1 đã đi sau vào tìm thức mỗi con người blogger chúng ta. Từ khi thành lập blog vngreenzone nó đã như là của bạn. Bạn hãy xem vngreenzone như một nơi thư giãn cũng được , là một quán bar , là một ngôi nhà , một gốc cây đễ chúng ta nghĩ lưng.

Vngreenzone không đòi hỏi các bạn phải donate gì cả , dù thủ thuật có cao siêu thì cũng không phải trả phí. Nhưng ngược lai, chúng ta hãy +1 cho ngôi nhà chúng ta , và ngôi nhà sẽ được sơn phết lại theo từng năm tháng bỏ lỡ

Các bước thực hiện ( vì web không có add nút +1 nên các bạn hãy add vào trình duyệt):

Truy cập http://www.google.com/chrome/intl/vi/p/google-plus.html cài đặt cho google chrome bạn nhé:
Các bạn hãy tìm lại các bài viết bạn thích và +1 và nó sẽ là động lực để vngreenzone.com có thể mở 1 sự kiện tặng template chẳng hạn.

Nov 2, 2011

Social media icons tuyệt đẹp cho blogger

Tag
Yolks sẽ mở thêm 1 thư mục là trang trí . Ở mục này sẽ có nhiều bài viết về các icons , các thủ thuật về thiết kế cho đẹp mắt , các bạn chú ý đón xem. và đây là bài đầu tiên.



1.Link download:
Downloads:

2.Áp dụng vào blog:
<a href="http://facebook.com/Yourlink" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKb0ct5XEhUwsbKWt4j7nPwuPtPBaKAgEKkh-8PySQinilw-oQC0pSOrF1E8qBwq7mjcFWjuggqSrCurE-Ry4mI8DhyphenhyphencH2TO9kTCp93i8P5w1TNt-X52Nvl24UlxJGGppUXhkRmLmQyY/s1600/facebook-30x43.png" /></a><a href="http://twitter.com/vngreenzone" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjdepdUX-6UeTVc3aQ-6VRp6T3XsNOID4o2DBtO8fxiSyM2aH2xRrZzXo_CoqgBeWEiqNiu2XM8RdI_Wf9mZsRC06dcYaJv1_DVbQc8kWkqv7LMfZ8zkWaNrJXUv5s9VX589-CA3OyhQ/s1600/twitter-30x43.png" /></a><a href="https://plus.google.com/104766042142182533647/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatAbCsXj5D6UKVCGPLK_ohqd7XCjTdtVTJCK0zAeU-PCGxN9wI3W4KSS07ogET2DZe4exPoFYy0LS-7vS1vMl5j2KOf2MLgdRBnkcd2LMZh6AYt05xwlkZ0la2nh0Yqqx9TjlNSEgBzg/s1600/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/vngreenzone" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPirFV1D5Yniyq90_-3mMPeuNzHlGIWyfLHLlUuTus0OJTdAkgNuSBkBHfV9rRaxizBB8X9RSbz6W8shD1pDNk2e9jOPdQDs52SZw8sRKDUSHDzPdMtQTHw2L3XpcNApHfDOhHmM80T24/s1600/rss-30x43.png" /></a>
và có kết quả


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

Tag
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

Nov 1, 2011

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

Tag
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:
<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:
  Youtubevimeo Megavideo Facebook Dailymotion veoh Metacafeclip.vn 
<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
<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>


Oct 20, 2011

Seo Template cho blogspot không còn là mơ ước

Tag
Với tiêu chuẩn người dùng Seo tốt , nhanh gọn , nhẹ là 3 tiêu chí mà nhiều người nghĩ đến , hôm nay Yolks xin share temp của chính mình với quan niệm là "Biết gì share đó" hihi.Đây là temp mà Yolks cũng hơi thích nên đề nghị các bạn giữ các bản quyền trong temp và các thủ thuật khác của các blogger khác nhé.










1.Ưu điểm:
  • Load nhanh
  • Seo tốt 
  • Tương thích mọi trình duyệt
  • Menu 3 trong 1
  • Comment phân cấp
  • Phân trang giống WP
  • Popular và recent post đã được thêm tooltips
2.Khuyết điểm:
  • Do temp 1 cột sẽ không có sidebar
  • Khó khăn trong việc thêm các tiện ích
Hi vọng với 2 khuyết điểm này mình sẽ làm v2 để các bạn có thể khắc phục mong các bạn đón xem và sau đây là temp:Template code
Please input your BLOG ID into the blow textbox and click MAKE to get your template code
Lấy code
Cách sử dụng template code?
Vào phần chỉnh sửa html ----> mở rộng----> copy template code vào 
Cách add các tiện ích:Tìm và edit các tiện ích như hình trên:
Về tiện ích recent post và popular thì chỉ cần chỉnh sửa recent post là đượcThêm các link bài viết theo bài viết này
Subscribe to: Posts (Atom)