Chủ Nhật, 31 tháng 7, 2011

Đăng kí liên kết blog - Công đồng blogger


Liên kết


Trao dổi link để tăng backlink là điề quan trọng đối với mỗi blogger. Với mình cũng vậy, nhưng quan trọng hơn cả điều đó là kết nối blogger khắp nơi lại với nhau để trao đổi, giao lưu, học hỏi..v.v.


Mình luôn sẵn sang kết nối với mọi người..Các bạn muôn trao đỏi link thì reply bên dưới với nội dung

Title :
Url :
Link your favicon: ( ko có cũng được )



Rồi đặt  code này lên trang chủ của bạn.



<p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumkH2PlwTBgPs0zFWqh-gUyoQl093peL8_F9ybuINYm1NmGxqnEKJq311gLYjRo1Q81M6xyuU3N2XpC5yKHsPY0vnQgQylRGH10bTcqP194LeoHW5NtOsqLcUZg5RY-8BIK5ZLc-QYcs/s1600/logo.png" class="favicon" /> <a href="
http://trangtincongnghe.blogspot.com" target="_blank">Trang tin công nghệ/thủ thuật.v.v</a></p>





Tạo “Friend Connect” widget cho Blogger - Update


Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.
Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.
Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :
  • Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer ( bên ngoài content-wrapper ).
  • Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác. Chi tiết bạn có thể xem tại đây.
Chính vì lý do đó, và cũng theo yêu cầu của bạn Trung, hôm nay iTechPlus sẽ giới thiệu đến các bạn từng bước để tạo tiện ích này một cách dễ nhất.
Tạo “Friend Connect” widget cho Blogger

Hình minh họa
1. Chuẩn bị
- Favicon của Blog bạn muốn liên kết
- Link đến Blog bạn muốn liên kết
2. Thực hiện
- Vào Thiết kế > Phần tử trang
- Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới ( không cần tạo tiêu đề cho widget )
<style type="text/css">
#itechconnect{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyesv5whOnsVkPOB5UaBltigxAMWUgVSqplrkQZ24xXN7Dy1MM69Atkp5hYWakt-6lBKBpAqY1LzjR3zq3aFiNOz9dxx5SpkGEZlhg4sm3-ukZU81oQOehmfB__fYDFGEyZ6XOQlHcY8U/) no-repeat bottom right; font-weight:bold}
#itechconnect p {margin:0; padding:2px 10px}
.favicon {width:16px; height:16px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style>
<div id="itechconnect">
<center style="margin-bottom:15px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYRS2KXIlGLV37zMPCz1JKGcBzd_HckjDeBvOZ8dwa2gw_XZDuIxparFbgzarXQGRZEDA4hY75LdmbSbozed0xe2fCVJhvuWRxdmvjUECEQKt2GR1CeM4loyifT7eg7CwzVqFdfSe4L8/" class="connect"/><a href="http://www.itechplus.info/">KẾT NỐI BẠN BÈ</a></center>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">iTechPlus.info</a></p>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">VNPCTech</a></p>
<!—tương tự cho các liên kết khác -->
</div>
Thay đoạn code được in đậm cho phù hợp.
* Update : do có bạn yêu cầu làm cho danh sách liên kết chuyển động từ dưới lên ( hoặc từ trên xuống ) để làm cho Blog trông đỡ “tĩnh lặng” hơn. Để làm điều đó, các bạn chỉ việc thay đoạn code bên trên bằng đoạn code sau :
<style type="text/css">
#itechconnect{margin:0; padding: 0; border:double #ccc; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyesv5whOnsVkPOB5UaBltigxAMWUgVSqplrkQZ24xXN7Dy1MM69Atkp5hYWakt-6lBKBpAqY1LzjR3zq3aFiNOz9dxx5SpkGEZlhg4sm3-ukZU81oQOehmfB__fYDFGEyZ6XOQlHcY8U/) no-repeat bottom right; font-weight:bold}
#itechconnect p {margin:0; padding:2px 10px}
.favicon {width:16px; height:16px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px 0 0}
</style>
<div id="itechconnect">
<center style="margin-bottom:25px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYRS2KXIlGLV37zMPCz1JKGcBzd_HckjDeBvOZ8dwa2gw_XZDuIxparFbgzarXQGRZEDA4hY75LdmbSbozed0xe2fCVJhvuWRxdmvjUECEQKt2GR1CeM4loyifT7eg7CwzVqFdfSe4L8/" class="connect"/><a href="http://www.itechplus.info/">KẾT NỐI BẠN BÈ</a></center>
<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='165' width='100%'>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">iTechPlus.info</a></p>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">VNPCTech</a></p>
<!--tương tự cho các liên kết khác-->
</marquee>
</div>
Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà đẹp mắt rồi đó.
Chúc các bạn thành công !

[Blogspot] – PC Tab Recent posts

Tiếp tục là 1 giao diện mới cho tiện ích recent posts, hôm nay theo yêu cầu của bạnthienthan mình sẽ giới thiệu cho các bạn 1 dạng mới, dạng này nó cũng gần giống như dạng hiển thị bài viết giống trang news.zing.vn (có thể xem lại thủ thuật ở đây) . Vì là tiện ích quá quen thuộc nên mình sẽ không hướng dẫn chi tiết.
Hình ảnh minh họa
PC Tab Recent Posts1 - mothuthuat.com
Xem DEMO : PC Tab Recent Posts
* Các bước thực hiện :
1. Vào bố cục
2. Vào phần tử trang
3. Tạo 1 widget HTML/javascript rồi dán code bên dưới vào:

<link href="http://data.fandung.com/blog/demo/PCtab-recentposts/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.top-left
{
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/gray-box-top.png);
background-repeat:repeat-x;
background-position:right center;
height:29px;
}
.top-right
{
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/gray-box-top.png);
background-repeat:repeat-x;
background-position:left center;
margin-right:5px;
height:28px;
padding-top:1px;
}
.bottom-left
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/red-box-bottom.png);
background-repeat:repeat-x;
background-position:left top;
height:8px;
}
.bottom-right
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/red-box-bottom.png);
background-repeat:repeat-x;
background-position:right top;
height:8px;
margin-left:10px;
}
</style>

<div class="article-list-tabbed-box">
<div class="top-left">
<div class="top-right" style="padding-left: 7px;">
<div style="float: left; margin-right: 4px; font-size: 11px;cursor: pointer; font-weight: bold" class="is-section"> Blogger</div>
<div class="sc_menu" style="float: left; overflow-x: hidden; overflow-y: hidden; ">

<ul class="tab-header sc_menu">
<li class="tab-name" ><a href="#">Top 200 Thủ thuật</a></li>
<li class="sep">|</li>
<li class="tab-name" ><a href="#">Yêu cầu thủ thuật</a></li>
<li class="sep">|</li>
<li class="tab-name"><a href="#">Hỏi đáp</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
</div>

<div style="clear: both;" class="zone">

<script type="text/javascript">
home_page = "http://www.fandung.com/";
label = "Thu%20Thuat%20Blog";
numposts = 11;
sumTitle = 40;
sumTitle2 = 65;
sumPosts = 151;
textmore = "Xem tiếp ...";
labelURL = "http://www.fandung.com/search/label/Thu%20Thuat%20Blog?max-results=10";
</script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/PCtab-recentposts/rc-post-PC.js"></script>

</div>
<div class="bottom-left"><div class="bottom-right"></div></div>
</div>

- Nếu muốn hiển thị cho cả blog thì dùng file js bên dưới :

http://data.fandung.com/blog/demo/PCtab-recentposts/rc-post-PC-all.js

4. Save widget.
- Hình ảnh minh họa bên dưới sẽ giúp các bạn dễ điều chỉnh các biến hơn:
PC Tab Recent Posts2 - mothuthuat.com
- Một chú ý nhỏ, nếu số bài viết bạn muốn hiển thị lớn hơn số bài viết có ở 1 nhãn thì tiện ích sẽ không hiển thị. Ví dụ 1 nhãn tên “Label1” hiện có 7 bài viết, nhưng giá trịnumposts bạn set là 8 thì tiện ích sẽ không hiển thị, khi đó bạn phải thay đổi lại giá trịnumposts thành 7 hoặc nhỏ hơn. Lưu ý, giá trị numpost không được nhỏ hơn 5.
PC Tab Recent Posts3 - mothuthuat.com
Chúc các bạn thành công !

[Blogspot] – Thủ thuật yêu cầu : Trình diẽn bài viết dạng Slide với jQuery (cập nhật)


Đây là 1 thủ thuật mà bên BlOg YSK đã có nhờ mình thử nó với blogger từ lâu, nhưng bây giờ mới test và giới thiệu cho mọi người. Ở bài viết này mình sẽ phổ biến thủ thuật ở dạng thủ công, tức là tự add các bài viết theo ý muốn của mình. Còn việc tự cập nhật bài viết mình sẽ test thử sau, nếu thành công sẽ post bài hướng dẫn.
Cập nhật bản auto (tự động cập nhật bài viết) – (7/7/2009)
Xem demo của thủ thuật : LIVE DEMO
Hình minh họa thủ thuật:

☼ Giới thiệu sơ về thủ thuật:
- Thủ thuật sử dung jQuery để hiển thị các bài viết.Có 2 phần, phần bên trái là phần hiển thị, phần bên phải là danh sách các bài viết. Bình thường thủ thuật sẽ tự thay đổi bài viết trong 1 khoảng thời gian nhất định, tùy vào mình cài đặt. Khi nhấp vào 1 bài viết nào trong phần bên phải, thì bài viết sẽ hiển thị ảnh thumbnail lớn vào tiêu đề (hoặc có thể là đoạn mô tả nhỏ về bài viết) ở phần bên trái.
☼ Bắt đầu thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery.js” type=”text/javascript”></script>
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery-ui.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#featured > ul”).tabs({
fx: {
opacity: “toggle”
}
}).tabs(“rotate”, 3000, true);
});
</script>
<style type=”text/css”>
#featured{
/* width:400px;
padding-right:250px; */
position:relative;
border:1px solid #ccc;
height:252px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:12px;
color:#034E8F;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:48px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url(‘http://data.fandung.com/blog/demo/slide-jQuery/selected-item.gif‘) left -5px no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:337px;
height:251px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:196px;
left:2px;
height:55px;
width:336px;
background:url(‘http://data.fandung.com/blog/demo/slide-jQuery/transparent-bg.png‘) repeat;
}
#featured .info h2{
font-size:12px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
</style>
- Số 3000 ở trên chính là thời gian thay đổi bài viết, tính bằng ms (mini giây)
4. Save template.
5. Tạo 1 widget HTML/Javascript và dán code của thủ thuật vào.
<div id=”featured”>
<ul class=”ui-tabs-nav”>
<li class=”ui-tabs-nav-item” id=”nav-fragment-1″>
<a href=”#fragment-1″>
<img src=”link anh bai viet 1” alt=”"/>
<span>{Tieu de bai viet 1}</span>
</a>
</li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-2″>
<a href=”#fragment-2″>
<img src=”link anh bai viet 2” alt=”"/>
<span>{Tieu de bai viet 2}</span>
</a>
</li>
<li class=”ui-tabs-nav-item ui-tabs-selected” id=”nav-fragment-3″>
<a href=”#fragment-3″>
<img src=”link anh bai viet 3” alt=”">
<span>{Tieu de bai viet 3}</span>
</a>
</li>
<li class=”ui-tabs-nav-item ui-tabs-selected” id=”nav-fragment-4″>
<a href=”#fragment-4″>
<img src=”link anh bai viet 4” alt=”">
<span>{Tieu de bai viet 4}</span>
</a>
</li>
<li class=”ui-tabs-nav-item ui-tabs-selected” id=”nav-fragment-5″>
<a href=”#fragment-5″>
<img src=”link anh bai viet 5” alt=”">
<span>{Tieu de bai viet 5}</span>
</a>
</li>
</ul>
<div style=”" id=”fragment-1″ class=”ui-tabs-panel ui-tabs-hide”>
<a style=”color: rgb(255, 255, 255);” href=”link bai viet 1“>
<img src=”link anh bai viet 1” alt=”" width=”337″ height=”250″/>
</a>
<div class=”info”>
<h2><a href=”link bai viet 1“>{Tieu de bai viet 1}</a></h2>
<p></p>
</div>
</div>
<div style=”" id=”fragment-2″ class=”ui-tabs-panel ui-tabs-hide”>
<a style=”color: rgb(255, 255, 255);” href=”link bai viet 2“>
<img src=”link anh bai viet 2” alt=”" width=”337″ height=”250″/>
</a>
<div class=”info”>
<h2><a href=”link bai viet 2“>{Tieu de bai viet 2}</a></h2>
<p></p>
</div>
</div>
<div style=”" id=”fragment-3″ class=”ui-tabs-panel ui-tabs-hide”>
<a style=”color: rgb(255, 255, 255);” href=”link bai viet 3“>
<img src=”link anh bai viet 3” alt=”" width=”337″ height=”250″/>
</a>
<div class=”info”>
<h2><a href=”link bai viet 3“>{Tieu de bai viet 3}</a></h2>
<p></p>
</div>
</div>
<div style=”" id=”fragment-4″ class=”ui-tabs-panel ui-tabs-hide”>
<a style=”color: rgb(255, 255, 255);” href=”link bai viet 4“>
<img src=”link anh bai viet 4” alt=”" width=”337″ height=”250″/>
</a>
<div class=”info”>
<h2><a href=”link bai viet 4“>{Tieu de bai viet 4}</a></h2>
<p></p>
</div>
</div>
<div style=”" id=”fragment-5″ class=”ui-tabs-panel ui-tabs-hide”>
<a style=”color: rgb(255, 255, 255);” href=”link bai viet 5“>
<img src=”link anh bai viet 5” alt=”" width=”337″ height=”250″/>
</a>
<div class=”info”>
<h2><a href=”link bai viet 5“>{Tieu de bai viet 5}</a></h2>
<p></p>
</div>
</div>
</div>
- Thay đổi các link liên kếtảnhtiêu đề của bài viết theo đúng như nội dung bạn muốn hiển thị.
☼ Cập nhật bản Auto, tự động cập nhật bài viết theo từng nhãn, hoặc cho cả blog.
(Cập nhật ngày 7/7/2009)
- Ở phần trên, khi muốn hiển thị chúng ta phải add từng bài viết vào. Hơi mất công 1 chút. Nhưng việc này lại có ích nếu ta chỉ muốn hiển thị 1 số bài viết nổi bật nào đó trong blog của mình.
- Còn ở phần này mình sẽ giới thiệu 1 cách để thủ thuật tự động cập nhật các bài viết cho các bạn. Thực ra đây cũng là thủ thuật Recent posts thôi, nhưng ở đây mình chỉnh sửa file JS lại để áp dụng được cho thủ thuật này.
- Tùy theo yêu cầu của các bạn, có thể lựa chọn cách thủ công hoặc tự động.
Xem demo ở đây : LIVE DEMO
Còn đây là hình ảnh mình đã thực hiện:
- Tương tự như ở phần thủ công, phần này bạn cũng thực hiện các bước tương tự từbước 1 đến bước 4 như ở trên.
- Đến bước 5 thì code sẽ hoàn toàn khác. Bạn tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào:
<script language=”JavaScript”>
imgr = new Array();
imgr[0] = “http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif“;
showRandomImg = false;
fntsize = 12;
acolor = “#E67C15″;
aBold = true;
text = “comments”;
showPostDate = true;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = “#000″;
numposts =5;
label = “Film“;
home_page = “http://www.fandung.com/”;
</script>
<div id=”featured”>
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/slide-j1.js” type=”text/javascript”></script>
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/slide-j2.js” type=”text/javascript”></script>
</div>
- Do hiệu chỉnh phần CSS của thủ thuật hơi phức tạp, nên mình khuyên các bạn giữ nguyên bố cục của thủ thuật này là hiện thị 5 bài. Tức là giữ nguyên đoạn code màu đỏ(numposts =5;)
- Các file JS trên là để hiển thị các bài viết của 1 nhãn nào đó, nếu các bạn muốn hiển thị cái bài viết mới của cả blog thì đổi file javascript lại như bên dưới (lưu ý : phải giữ đúng thứ tự của các file javascript)
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/post-slide-j1.js” type=”text/javascript”></script>
<script src=”http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/post-slide-j2.js” type=”text/javascript”></script>
- Muốn thay đổi màu chữ của tiêu đề bài viết ở phần bên trái, các bạn chỉnh sửa trong đoạn code CSS như bên dưới :
#featured .info a{
text-decoration:none;
color:#f00
font-size:13px;
Một vài lưu ý khác về việc hiển thị :
trước tiên hãy xem hình mình họa này
a. Ở phần bên phải :
- trong hình ta thấy phần post summary nằm trong class #featured .ui-tabs-panel .info , hãy điều chỉnh số kí tự của phần summary post để nó không bị tràn ra khỏi khung hiển thị. Nếu muốn mở rộng phần hiển thị này (tăng chiều cao) , bạn hãy thay đổi 2 đoạn code màu đỏ như bên dưới :
#featured .ui-tabs-panel .info{
position:absolute;
top:196px; 
left:2px;
height:55px;
width:336px;
background:url(‘http://data.fandung.com/blog/demo/slide-jQuery/transparent-bg.png‘) repeat;
}
Lưu ý là 196px + 55px = 251px , với 251px là chiều cao của vùng hiển thị ảnh của bài viết(trong hình minh họa mình có điều chỉnh hơi khác so với code gốc 175px + 75px = 251px)
b. Phần bên trái :
- Tương tự, phần bên trái sẽ gồm 2 phần, ảnh thumbnail và tiêu đề bài viết. Và ta lưu ý là khi tiêu đề của bài viết quá dài thì nó sẽ bị tràn ra khỏi khung hiển thị, như thế sẽ rất xấu. Vì thế hãy mở rộng vùng hiển thị này ra, bảo đảm sao cho tiêu đề dài nhất cũng ko bị tràn.
- Để mở rộng vùng hiển thị này, bạn hãy tìm tới đoạn code CSS như bên dưới :
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}
Thay đổi đoạn code màu đỏ là được.
- Và kích thước ảnh thumbnail ở phần này có thể điều chỉnh ở đoạn code bên dưới:
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
Tuy nhiên mình có lời khuyên, tốt nhất là giữ nguyên như thế, nếu bạn thay đổi nó thì sẽ làm ảnh hưởng nhiểu tới việc hiển thị của tiện ích. Do đó nếu ai thật sự rành về việc canh chỉnh các kích thước trong code CSS thì mới làm việc này.
Tham khảo source từ site ctyhanlamvien
Chúc các bạn thành công.