Aug 30, 2011

Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

bloglist for blogger
Tiện ích bài viết mới nhất từ bloglist hoặc popuplar của blogger đã không còn xa lạ với chúng ta nữa. Các tiện ích này hầu như chỉ được tùy biến đơn điệu và chưa trang trí gì được . Nay yolks sẽ thêm hiệu ứng tooltips vào cho 2 tiện ích này càng vượt trội hơn.







1.Bloglist ( bài viết mới nhất ):
Với cách tùy biến gọn gàng và đẹp mắt , với tốc độ vượt trội vì no Javascript . Ngoài ra, nó rất đơn giản và dễ dùng.
Đăng nhập Blogger, vào Page Elements >> Add a Gadget chọn Blog List.

Tại mục Title, bạn hãy đề là Bài viết mới nhất.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Bloglist1

Nhấn ADD TO LIST.



bloglist 2

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://vngreenzone.blogspot.com/feeds/posts/default/?start-index=1
or
http://vngreenzone.com/feeds/posts/default/?start-index=1
Cho tên miền tùy chỉnh
Bạn cần thay vngreenzone bằng tên blogspot của bạn. Nhấn Add rồi tiếp tục nhấn ADD TO LIST và dán vào URL sau đây.

http://vngreenzone.blogspot.com/feeds/posts/default/?start-index=2
or
http://vngreenzone.com/feeds/posts/default/?start-index=2


Cứ như vậy lần lượt đến

http://vngreenzone.blogspot.com/feeds/posts/default/?start-index=3
or
http://vngreenzone.com/feeds/posts/default/?start-index=3


rồi đến

http://vngreenzone.blogspot.com/feeds/posts/default/?start-index=4
or
http://vngreenzone.com/feeds/posts/default/?start-index=4




http://vngreenzone.blogspot.com/feeds/posts/default/?start-index=5
or
http://vngreenzone.com/feeds/posts/default/?start-index=5


cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích Bài viết mới nhất thì dừng lại, rồi nhấn SAVE để lưu tiện ích.
Sao đó tìm đoạn code tương tự:
Từ
<b:widget id='BlogList1' locked='false' title='Bài mới nhất' type='BlogList'>
Đến thẻ đóng của widget bloglist:
</b:widget>
Và thay thế tất cả thành:
<b:widget id='BlogList1' locked='false' title='Bài mới nhất' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-content'>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<img class='item-thumbnail' expr:alt='data:item.itemTitle' expr:src='data:item.itemThumbnail.url' height='40px' width='40px'/>
<b:else/>
<img alt='no image' class='item-thumbnail' height='40px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilC0SfzzEgSuhMdGzrjKNZOC4M4bfjtSFSvN0vGxu9zk5JpNaCgWtFi_rjGXu3eGbOUmnRHcYvg9CBmYAg4sJFNkFEUhMYxqtVqpsSRdaX0-q80Fpul-oysSV6sar-FUFm6P9Kke_NhfE/s288/noimage.png' width='40px'/>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a class='tooltips' expr:href='data:item.itemUrl'><data:item.itemTitle/><span><data:item.itemSnippet/></span></a>
<b:else/>
<span><data:item.itemSnippet/></span> </b:if>
</span>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
</div>
</div>
</b:includable>
</b:widget>
Thế là xong. Thủ thuật trên sẽ giúp các bạn nhiều thứ.
Hiển thị mặc định ảnh không có trong bài viết
Thêm nhiều bài viết. Không tối đa. Load nhanh
Hiển thị tooltips với css sau đây , css này sử dụng cho 2 thủ thuật luôn:
.tooltips {position:relative}
.tooltips span {display: none}
.tooltips:hover span {display: block;background: #212121;padding: 10px;border: 1px dashed #ccc;position:absolute;color: #ccc;width: 240px;z-index: 100;top: 0;left: -340px}
Nên chỉnh lại chỗ hiển thị tooltips các bạn nhé.
2.Popuplar posts:
Tìm đoạn:
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
Và thay thế tất cả thành đoạn code :
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-title'>
<b:if cond='data:post.thumbnail'>
<img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' height='38px' width='38px'/>
</b:if>
<a class='tooltips' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a>
</div>
</div>
Lưu ý: css tooltips dùng chung các bạn nhé. Các bạn nên save temp trước khi làm nhầm tránh xảy ra biến cố. Ban quản trị không chịu trách nhiệm
Thủ thuật sử dụng bài viết của duypham.infothuthuatblogger.info xin cảm ơn 2 bác đã giúp yolks có ý tưởng này

Aug 28, 2011

Các host lưu trữ JavaScrip hàng đầu

hosting
JavaScript là 1 phiên bản hiện hành , là ngôn ngữ được dùng rộng rãi trên các web site hiện nay và blogger không nằm ngoài qui luật đó. Nhưng để tìm được 1 số host lưu trữ được chúng thì không ai khác đã có Yolks đây.









 1.Với Google Code


    Google Code là một trang web của Google trong đó tập trung các nhà phát triển các dự án phần mềm mã nguồn mở được hỗ trợ bởi Google. Trang có rất nhiều mã nguồn phần mềm và danh sách các dịch vụ có hỗ trợ các API công cộng để phục vụ cho việc phát triển các phần mềm hỗ trợ khác. (Wikipedia).

Các bước thực hiện:

a. Đăng ký tài khoản Google (gmail, google adsense,….) 

b. Đăng nhập Google Code 

c. Nhấn vào mục Creat a new project




d. Điền vào form đăng ký. Ô Version control system và Source code license thì tùy bạn lựa chọn. Dùng cho nhu cầu cá nhân thì không cần quan tâm.
e. Creat Project. Sau đó, bạn sẽ có 1 trang tương tự như: https://code.google.com/p/minhmeofiles/
f. Nhấn vào Tab Downloads >>> New download. Rồi lựa chọn files cần upload (không quá 100 MB)
g. Lựa chọn file lưu trữ là Js file.Up load file js của mình lên.
h. Upload xong, bạn có thấy đường link tải files bạn vừa up.


Download>New Download

Nhấp chuột trái vào file js lấy link download nhúng vào blog_> Ẹnjoy ^^2.Google sites:
Google sites đã trở nên quá quen thuộc với chúng ta , với tốc độ vực trội không host nào sánh kịp, nhưng ngoài việc chúng ta có tài khoản gmail ra chúng ta cần phải thực hiện 1 số nội dung sau:
Không lạm dụng google sites để làm việc xấu ( sẽ bị block ngay lập tức)
Không sử dụng được với tên miền nâng cao (custom domain)
Và đây là link:
Google sites

Đây là cách tạo upload file mới:
  1. Truy cập vào www.google.com.vn/sites.
  2. Đăng nhập với Tài khoản Google của bạn. Nếu bạn chưa có tài khoản, hãy nhấp vào Đăng ký Google Sites và làm theo các bước để tạo Tài khoản Google.
  3. Nhấp vào nút Tạo trang web mới để bắt đầu.
  4. Đặt tên cho trang web. Khi bạn nhập tên, một URL sẽ tự động được khởi tạo trong hộp dưới đây. (Lưu ý: Khi bạn tạo tài khoản AdWords, bạn cần nhập URL này trong bước số 2).
  5. Nhập đoạn mô tả ngắn về trang web (bước này là tuỳ chọn).
  6. Bên cạnh Chia sẻ với, chọn nút radio cho Mọi người trên thế giới có thể xem trang web này, để bất kỳ ai cũng có thể xem trang web của bạn.
  7. Bấm More actions chọn Manage Site.
  8. Sau đó bấm Upload để đăng tải file JS đó lên..

Sau khi upload thành công thì link của file Java Script có dạng:

http://sites.google.com/site/yourblog/date.js?attredirects=0&d=1

bạn chỉ việc bỏ đi ?attredirects=0&d=1 để được link trực tiếp để nhúng vào Blogger Template:

http://sites.google.com/site/yourblog/date.js

Vậy là đã thành công. Bây giờ bạn không phải bận tâm nữa vì file của bạn được lưu trữ trên máy chủ Google.
2.Dropbox:

1 nơi lưu trữ dữ liệu cực khủng thuộc hàng nổi tiếng nhất hiện nay. Tuy gói free của nó chỉ được 2GB storage và bandwidth 10GB / ngày nhưng như vậy là quá đủ đối với một blog. Tốc độ download/upload khá nhanh và ổn định. Link hoàn toàn là direct.
dropbox

Sau khi đăng kí một tài khoản trên trang chủ, bạn tiếp tục download chương trình Dropbox tại đây. Tiến hành cài đặt và log in bằng tài khoản vừa đăng kí. Một folder mới tên là DROPBOX sẽ được tự động khởi tạo, trong folder này có thêm 2 thư mục con khác là Photos và Public. Bạn có thể upload bất kì thứ gì lên server của Dropbox bằng cách copy nó vào thư mục Public, đợi một lúc rồi click chuột phải vào file và chọn Copy Public Link để lấy link sử dụng. Khi muốn cập nhật file js thì chỉ việc mở Dropbox và copy đè lên file cũ, rất nhanh và tiện lợi.Ngoài ra các bạn có thể tạo các thư mục trong thư mục Public đều được cả.

3.Yourjavascript:
1 dịch vụ Public dữ liệu .js trực tiếp không cần đăng kí hihi . Nhưng tốc độ không cao, nhưng vẫn có thể cho anh ta sếp hàng thứ 3. bên thuthuatblogger.info đã thấy sử dụng dịch vụ này và dịch vụ thứ nhất.
Cách sử dụng:
  1. Bấm upload file .js của bạn
  2. Cách bạn chọn vào Make private ( nếu không muốn chia sẻ ) và chỉ trỏ về tên miền của blog/web của bạn 
  3. Điền email để link có thể chuyển qua email của bạn
Hi vọng bài viết này sẽ giải quyết được nhiều vấn đề nan giải cho chúng ta về các vấn đề nhức đầu này. Thân ái và hẹn gặp lại các bạn.

Aug 24, 2011

Comment của Anonymous có ích hay hại ??

Comment luôn luôn là phần quan trọng nhất của 1 blogger chuyên nghiệp , các comment luôn luôn làm chúng ta cảm thấy vui vẻ , cảm thấy chúng ta được chào đón và được biết đến.Nhưng comment của các  Anonymous có ích hay hại đây???












Nói cho cùng các Anonymous là 1 người như thế nào chúng ta không cần biết , thật chất con người họ xấu xa hay hiền lành gì đó chúng ta cũng chẳng cần quan tâm.Chỉ cần biết họ , những con người nặc danh luôn luôn là người gây cho chúng ta những cảm nhận của chính họ, gây cho chúng ta có sự nhiệt huyết làm blog
1.Anonymous như là 1 vị khách ghé thăm ?
Anonymous chính là những người nặc danh, họ chẳng khác chúng ta chút nào , họ cũng làm blog nhưng họ muốn giấu kín blog của họ , họ không muốn người ta biết đến họ chỉ vì họ không thích. Chính vì vậy Anonymous nhằm để che thân phận cho 1 người khách , 1 người cùng chung 1 sở trường với chúng ta.
2.Lợi ích khi anonymous ghé thăm ?
Họ ghé thăm chỉ vì họ yêu thích blogger, hoặc cũng có thể là 1 vị khách đơn phương nào đó yêu nền tảng blog ( WP , bo-blog) cũng có nhiều trường hợp thủ thuật blogger cũng có cái hay nên đã lôi cuốn được họ qua chăng.
Họ đã gây dựng cho ta những gì họ nghĩ , họ không thích về blog chúng ta ở điểm nào ---> đó là 1 sự chân thật , chân thành cùa Anonymous .Chỉ có họ muốn nói chính xác những gì chúng ta cần mà củng chỉ có chính họ mới dám nói sự thật. Nếu họ có nói sai hãy nói với họ những suy nghĩ đúng của chúng ta. Điều đó sẽ giúp thiện cảm đôi bên tăng lên gấp bội và số lượng comment lận traffic không còn là mơ ước.

2.Những trở ngại anonymous ghé thăm ?
Ngược lại, đó là hiện tượng spam comment của các blogger , hôm trước vngreenzone đã lãnh 50 comment liên tục của người nặc danh. Huhu.
Và bây giờ 2/9 sẽ nhận 1 lời khiêu khích của 10 bạn anonymous
Sau đây là 1 hình ảnh thật tế
1 lời chân thành vngreenzone chưa có thù với ai trừ code1k.com. Tôi xin nhận lời khiêu chiến của các bạn , tôi cam đoan mấy bạn chỉ tốn sức lực mà thôi , chỉ cần vài cú click chuột tôi có thể xóa gọn 291 tôi cho 300 luôn đó ^^.
3.Lời kết:
Người nặc danh( Anonymous ), nói cách khác là vừa có lợi cũng vừa có hại , nhưng theo mình nghĩ các bạn này chỉ nông nỗi hành động thôi , mình mong bạn suy xét lại lời ăn tiếng nói lẫn sự việc trên

Aug 20, 2011

Tạo author-box cho blogger

author-box cho blogger
Bạn là 1 tác giả 1 blog nào đó , bạn muốn nhiều người biết đến bạn thông qua bài viết, cụ thể là ở dưới mỗi bài viết . Vậy tại sao chúng ta ko tự làm 1 Author-box vừa nhanh vừa cơ bản lại vừa đẹp mắt.Xin lưu ý thủ thuật này áp dụng được cho tất cả các tác giả trong blog -> thú vị chưa ???







Chúng ta sẽ bắt đầu ngay với việc thêm css vào blog:
1.Thêm css:
Tìm thẻ
]]></b:skin>
và thêm vào trước nó đoạn css sau:
.author-box{background:#CFCFCF;width:570px border:1px dashed #999; margin-top:20px; overflow:hidden; padding:10px}
.avatar-author{border:1px solid #888; float:left; padding:5px}
.info-author{float:right; width:483px}
.info-author h2{font-size:18px}
2.Code trình bày:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<b:if cond='data:post.author == &quot;Thay tên tác giả vào đây&quot;'>
<img class='avatar-author' height='80' src='Hình tác giả' width='80'/>
<div class='info-author'>
<h2>Đôi chút thông tin về tác giả <a href='http://www.blogger.com/profile/ID profile của bạn' target='_blank'>Tên tác giả</a></h2>
<p>Lời giới thiệu</p>
</div>
</b:if>
</div>
</b:if>
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/>
Xin lưu ý đoạn code:
<b:if cond='data:post.author == &quot;Yolks&quot;'>
đây là đoạn mã về bài viết của tác giả , tác giả nào đăng bài thì cái khung author-box sẽ hiện lên cho các bạn.
Ví dụ nhiều tác giả thì bạn làm nhiều khung nhưng chữ Yolks sửa thành tên của profile của tác giả ấy thì mới chạy được nhé các bạn.

Aug 19, 2011

Tạo 1 Image Captions với css

Image captions
Trong bài viết này Yolks sẽ hướng dẫn với các bạn 1 hiệu ứng chú thích ảnh cực độc đáo để các bạn có thể gây ấn tượng với các bạn đọc cũng như tăng thêm vẻ đẹp cho bài viết 1 cách hoành tráng và tuyệt vời









Xin lưu ý: những hiệu ứng mà yolks đề cập đến đây là ko sử dụng Javascript nên vì vậy blog sẽ load nhanh , nhưng cũng ko gây trở ngại đến tốc độ là bao, hiệu ứng này sử dụng dc với mọi trình duyệt. Đây là điểm quan trong nhất của thủ thuật này
1.Thêm css vào blog:

.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}
.imgteaser a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}
.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}
.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}
2.Cách add vào bài viết:
<div class="imgteaser">
<a href="#">
<img src="Link ảnh" alt="Thẻ alt" />
<span class="more">&raquo; Learn More</span>
<span class="desc">
<strong>Tên ảnh</strong>
chú thích ảnh ở đây.
</span>
</a>
</div> 
3.Xem thành quả: