Oct 20, 2011

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

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

Oct 13, 2011

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.

Oct 12, 2011

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é.

Oct 3, 2011

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:





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ẻ