Hiển thị widget ở những trang nhất định

Trên blog bạn thường có nhiều Widget, và việc hiển thị chúng cũng làm mất thời gian khi load trang. Bây giờ mình giới thiệu cách tùy chỉnh cho nó hiển thị ở những nơi bạn muốn hiển thị. Nó sẽ giúp bạn có thể sắp xếp các widget ở các trang mà bạn muốn để trang blog hay web của bạn trông thẩm mĩ hơn. Để thực hiện thủ thuật này , trước tiên bạn phải xác định được Widget id của widget đó như hình bên dưới:

☼Bây giờ là cách để tùy chỉnh Widget đó:

1. Đăng nhập blog
2. Vào chỉnh sửa code HTML (edit code HTML)
3. Chọn mở rộng mẫu tiện ích (Expand Widget Templates).
4. Tìm đọan Widget id bạn muốn chỉnh (vd:HTML3)
Code thường có dạng mhư bên dưới

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<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'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

☼ Sau khi đã biết được "Widget" đó thì chúng ta sẽ tùy chỉnh hiển thị chúng
bây giờ bạn hãy chọn nơi để hiển thị "Widget" đó, bạn chỉ việc thêm code màu đỏ vào đúng vị trí như bên dưới

I. Chỉ cho phép widget hiển thị ở trang chủ

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- 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'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

II. Chỉ cho phép widget hiển thị ở từng bài viết:

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

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

<!-- 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'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

III. Chỉ cho phép widget hiển thị ở những trang nhất định:

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "Link của bạn"'>

<!-- 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'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Bạn hãy thay code màu xanh trên thành đường link mà bạn muốn widget đó hiển thị (ví dụ:http://www.traidatmui.com/2010/03/chen-google-translate-vao-blogger.html). Khi bạn chọn đường link như vậy thì khi bạn click đến link đó widget mới hiển thị, còn những đường dẫn khác widget đó sẽ không hiển thị

IV. Hiển thị ở trang label nhất định

<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "http://www.traidatmui.com/search/label/Advanced blogger"'>

<!-- 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'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Bạn hãy thay dòng màu xanh (http://www.traidatmui.com) thành địa chỉ blog của bạn và dòng (Advanced blogger) thành tên nhãn bài viết của bạn.

[Read More...]

Cuộn góc Peel với hiệu ứng flash cho blogspot

Bài viết trước mình đã có giới thiệu bạn cách thực hiện thủ thuật Cuộn góc Peel cho blog với css và JQuery. Hôm nay cũng cách cuộn góc cho trang như vậy nhưng chúng ta sẽ ứng dụng flash cho hiệu úng này. Với hiệu ứng flash này có về blog bạn sẽ trông đẹp hơn, cuộn góc trông mượt hơn. Bạn có thể xem hình ảnh bên dưới hoặc click demo để thấy rỏ hơn.

DEMO >> http://client-gaincapital-tradingcentral.blogspot.com/

Hình ảnh ban đầu chưa rê chuột

Hình ảnh sau khi rê chuột

☼ Thực hiện thủ thuật

1. Đăng nhập vào tài khoản BLogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add gadget)
4. Thêm 1 phần tử HTMl/Javascript và thêm vào nó code bên dưới

<script type="text/javascript">
var ppimg = new Image();
ppimg.src = '';

var ppo = new Object();
ppo.ad_url = escape("http://www.traidatmui.com/");
ppo.small_path = "http://www.swfcabin.com/swf-files/1292894738.swf";
ppo.small_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqjjvdy9K2m6s09WyP55gMVdSQoT0KCtFW-ur2Awj1wf4ddkcdCHsRvMTXFFW60JgTqQr6mXRGAtlcUxpTaK_xbLtEuXJ04KV0uGdOYoTcjGhHhhz8oAHW0aGryx1tZ9HrAI7qrT9aTr4/");
ppo.big_path = 'http://www.swfcabin.com/swf-files/1292894665.swf';
ppo.big_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW07I6uSB0FT5AXNM_4ocydfoyqMieFXDs9b5DKvcTt5HQz_z1pHyTJJav3WQJcFysY95eCsughMVDTSEYBjFKiFUeoazNcFjbIKIxbOxdqAQYRCnNRj5LHtu_ERmcjvluOO98LYiOFJQY/s576/peel.png");

ppo.small_width = '100'; //độ rộng phần cuộn khi chưa rê chuột
ppo.small_height = '100'; //độ cao phần cuộn khi chưa rê chuột
ppo.small_params = 'ico=' + ppo.small_image;
ppo.big_width = "450"; //độ rộng phần cuộn khi rê chuột
ppo.big_height = "450"; //độ cao phần cuộn khi rê chuột
ppo.big_params = 'big=' + ppo.big_image + '&ad_url=' + ppo.ad_url;
</script>

<script src="http://traidatmui-tips.googlecode.com/files/flash_peel.js" type="text/javascript"></script>

☼ Chỉnh code:
- Link màu xanh là phần bạn nhìn thấy ban đầu, khi chưa rê chuột vào phần cuộn góc.
- Link màu tím than là phần ảnh bạn nhìn thấy khi phần ẩn bạn rê chuột vào phần cuộn đó, nói cách khác đây là phần nằm bên dưới phần cuộn góc.
- Link màu đỏ đậm là link cho phần cuộn góc, khi người dùng click vào đây nó sẽ dẫn đến địa chỉ được thiết lập trong phần này. Bạn thay thành link mà bạn muốn.

5. Sau khi chỉnh sửa xong, bạn save tiện ích lại.

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

[Read More...]

Ẩn bài viết ở trang chủ

Thực ra việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh <b:if> để ẩn nó.

Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.
Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1". (xem trong code template (mở rộng mẫu tiện ích))

Xem hình họa :

Sau khi xác định đc id này, ta thực hiện các bước sau:
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 sau dòng code ]]></b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

#Blog1 {
display:none;
visibility:hidden;
}

</b:if>
</style>

4. save template.

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

[Read More...]

Tạo phân trang cho Blogger

Đầu tiên, ta chèn đoạn code CSS sau vào ngay trên dòng ]]></b:skin> trong phần chỉnh sửa HTML của Blog :

.showpageArea {padding: 0; margin:0;
}

.showpageArea a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
background-color: #6f6f6f;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #3D3D3D;
}

.showpageNum a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #5D5D5D;
}

.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

.showpage a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #000;
color: #fff;
background-color: #6f6f6f;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

Tiếp theo, tạo một tiện ích HTML/javascript rồi dán đoạn code sau vào:

<script type="text/javascript">

var home_page_url = location.href;

var pageCount= 5;
  var displayPageNum=9;
  var upPageWord ='Trang trước';
  var downPageWord ='Trang sau';

function showpageCount(json) {
  var thisUrl = home_page_url;
  var htmlMap = new Array();
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);
  var title = post.title.$t;
 if(title!=''){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }
  if(title!='') postNum++;
  htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
  }
  }
  itemCount++;
  }
  for(var p =0;p< htmlMap.length;p++){
  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  if(fFlag ==0 && p == thisNum-2){
  if(thisNum==2){
  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
  }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
  }
  fFlag++;
  }
  if(p==(thisNum-1)){
  html += '<span class="showpagePoint">'+thisNum+'</span>';
  }else{
  if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';
}
else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
  }
}
  if(eFlag ==0 && p == thisNum){
  downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
  eFlag++;
  }
  }
}
  if(thisNum>1){
  html = ''+upPageHtml+' '+html +' ';
  }
  html = '<div class="showpageArea">'+html;
  if(thisNum<(postNum-1)){
  html += downPageHtml;
  }
  if(postNum==1) postNum++;
  html += '</div>';

var pageArea = document.getElementsByName("pageArea");
  var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
  html ='';
  }

for(var p =0;p< pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&&pageArea.length>0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Ở đây "var pageCount=5;" là số bài viết sẽ hiển thị ở mỗi phân trang, còn  var "displayPageNum=9;" là số phân trang. Lưu ý là thủ thuật này chỉ hoạt động khi số bài đăng trên blog bạn đủ nhiều, trong ví dụ này thì số bài viết mà blog của tôi cần phải nhiều hơn 5x9 = 45 bài thì tiện ích phân trang mới hoạt động. Bạn có thể điều chỉnh lại cho phù hợp. Save lại và kiểm tra kết quả. Chúc thành công.

[Read More...]

Tạo hình ảnh xuất hiện trước blog

Trong blog bạn thường sử dụng hình ảnh để blog trông thu hút hơn, thường bạn sử dụng ảnh trông bài viết hay gắn vào các sidebar, footer hay head... ở hai bên blog. Tuy nhiên, có một cách gắn ảnh nữa mà không sử dụng đến sidebar mà chúng ta sẽ gắn trực tiếp vào body của blog. Hôm nay mình xin chia sẻ với các bạn thủ thuật này, cách thực hiện cũng khá đơn giản.

☼ Cách thực hiện

1. Đăng nhập vào Blogger
2. Vào bố cục
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến thẻ </body> và thêm code sau vào trước nó

<a href="http://www.traidatmui.com/"><img width="200px" height="150px" src='http://lh6.ggpht.com/_TaHzV-QgYq0/S2JNbSOi9zI/AAAAAAAAFXA/QIMtL5Oyg8g/vietnamagtravel.gif' style='position:fixed; bottom:60px; left:15px;'/></a>

☼ Lưu ý:
- Bạn hãy thay link hình ảnh http://lh6.ggpht.com/_TaHzV-QgYq0/S2JNbSOi9zI/AAAAAAAAFXA/QIMtL5Oyg8g/vietnamagtravel.gif trên thành link ảnh của bạn và link liên kết http://www.traidatmui.com/ thành link của bạn. Nhớ chỉnh độ rộng (width="200px") và độ cao (height="150px") của ảnh cho phù hợp.
- Ở trên là mình đã thiết lập cho ảnh cố định ở bên trái phía dưới, bạn có thể cho ảnh xuất hiện ở các vị trí khác cho phù hợp với blog bạn bằng cách thay bottom và left thành các lệnh : top, right. Hình ảnh ở trên là cố định ở một vị trí bạn có thể cho ảnh di chuyển khi kéo chuột bằng cách thay lệnh "fixed" trong code thành "absolute"

5. Save tamplate lại và xem kết quả

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

[Read More...]

Tạo banner trượt dọc hai bên - Bản hoàn thiện

Trước đây mình có giới thiệu cùng các bạn một thủ thuật là tạo banner chạy dọc hai bên của blog. Tuy nhiên với thủ thuật cũ thì banner chỉ trượt tốt với trình duyệt IE (Internet Explorer) còn với Firefox thì banner không chạy được. Cũng chính vì hạn chế của thủ thuật trước, hôm nay mình xin giới thiệu với các bạn một bản hoàn thiện hơn, banner sẽ chạy tốt hơn trên cả hai trình duyệt. Các bước thực hiện thủ thuật này cũng không phức tạp hơn thủ thuật cũ, bạn chỉ việc làm theo một vài bước đơn giản bên dưới.

DEMO >>

1. Đăng nhập vào tài khoản
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code sau vào bên dưới thẻ <head>

<style type='text/css'>
#slideads{
position: absolute;
visibility: hidden;}

#slideads1{
float:left;
margin-left: 20px;}

#slideads2{
float:right;
margin-right: 20px;}
</style>
<script src='http://traidatmui-tips.googlecode.com/files/slide_ads.js' type='text/javascript'/>

4. Bây giờ save template lại và trở về phần tử trang, tạo thêm 1 phần tử HTML/Javascript
5. Thêm vào phần tử HTML/Javascript code bên dưới

<div id="slideads">
<div id="slideads1" class="slideads1">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0x6gNSkRZdKmHUWO7ezyr9eAE8fhlHZ8eHD56w4L-0Ri6QDzHfk1bTEB7lpKR-vpHp1rHC77DuNSFUy41CXR1ULQ4PMAyAw1izzAV1Qf6Fo1hi5NHsSsaADSrzWjZefPQDzxFor-D2_D/" border="0"/></a>
</div>
<div id="slideads2" class="slideads2">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtuyVZRypLiLaqOM26keQcnzggzT8HRbVnoh5XmQxJEcS06vBiulPHk4JZzAijGGxUPg2o6i6LJc1egpJEJ4ErIYHLbSYGfshF1qjMh0STiLoD9p5cXJUq7UBKAEU0u9LfZgwGzirSz2ew/" border="0"/></a>
</div>
</div>

Chỉnh code: Bạn hãy thay link ảnh trong code (dòng màu cam) thành banner của mình có thể bạn thêm độ rộng và độ cao của ảnh tùy ý.
- Thay đường dẫn cho banner tương ứng dòng màu xanh đậm trong code trên.

6. Đến đây bạn chỉ việc save lại là xong

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

[Read More...]

Tạo hiệu ứng rung rinh cho ảnh khi rê chuột

Thứ năm, ngày 23 tháng chín năm 2010

Bạn có muốn những tấm ảnh trên blog của mình có những hiệu ứng thật vui khi rê chuột vào chúng không. Vâng một thủ thuật mà mình sắp giới thiệu đến các bạn là tạo hiệu ứng cho ảnh khi rê chuột lên ảnh đó. Với thủ thuật này, mỗi khi bạn rê chuột vào ảnh thì chúng sẽ lắc lư, rung ring rất vui mắt. Nếu bạn cảm thấy thích thú với những động tác của ảnh như vậy và muốn tạo hiệu ứng này trên blog mình thì bạn có thể thực hiện theo vài bước đơn giản bên dưới. Bạn hãy click vào demo bên dưới và rê chuột vào ảnh sẽ thấy kết quả hiệu ứng này.
Xem DEMO

1. Đầu tiên bạn đăng nhập vào tài khoản
2. Vào phần thiết kế chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head>

<style>
.shakeimage{
position:relative
}
</style>

<script src='http://traidatmui-tips.googlecode.com/files/shakeImage.js' type='text/javascript'/>

4. Sau khi thêm code xong bạn save template lại.
5. Đến đây là bước ứng dụng thủ thuật, nếu bạn muốn ảnh có hiệu ứng của thủ thuật này bạn phải thêm một lớp Class vào thẻ IMG như bên dưới

<a href="http://nvdinh88.blogspot.com/" target="_blank"><img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMhPkCps0ONy83tFiNd_jKjDZzzLiVpTJaZwlphrywQ1EVGST3e-nRNBbqJxw6b5cNEEG52MNAHdQMJI3yK0qP2rcKvB_8wsxq0kXAVPGJTrKTvGz_DcumHXMHqO0gPxQKsIeOMUchWVN/" align="middle" /></a>

Như vậy là bạn có thể có hiệu ứng lắc lư cho ảnh khi rê chuột trên blog của bạn.

[Read More...]

Tạo ảnh chạy xoay tròn trên blog bằng Javascript

Lướt web mình thấy ở trang nsvina.com có một cách trình diễn ảnh cũng khá là đẹp mắt nên mình xin chia sẻ cùng các bạn thủ thuật này. Với thủ thuật này thì hình ảnh sẽ chạy dạng xoay tròn, nó trông đẹp hơn thủ thuật trước mình giới thiệu đến các bạn. Các bước để thực hiện thủ thuật này cũng không quá phức tạp, mình sẽ hướng dẫn bạn chi tiết hơn bên dưới.
 

1. Đầu tiên bạn đăng nhập vào tài khoản blogger
2. Vào phần thiết kế (Design) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ </head>

<script src='http://traidatmui-tips.googlecode.com/files/circle_img.js' type='text/javascript'/>

4. Save template lại và trở về phần tử trang và thêm 1 HTML/Javascript
5. Thêm code bên dưới vào phần tử vừa thêm ở trên

<script type='text/javascript'>
carousel({id:'',
border:'',
size_mode:'image',
width:200, //độ rộng của ảnh trình diễn
height:163, //chiều cao của ảnh trình diễn
sides:12,
steps:23,
speed:3, //tốc độ trình diễn
direction:'left', //hướng chạy của ảnh bạn có thể đổi thành RIGHT

images:[
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0BcjjaRZaCJwrokGEzAlB8B1VV4h76pu3sqAc9yQTBDJygFPlcPVPO8EogeElFCX3inCHect_9TUN0tU8VsoY7u-k2nW7RI15W03zY6nAlPziCeAGy7RuEcrGcbYsG0YznZCHNMxIR0-z/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0u6IIf6ZD95C92ZSZ8x9DxIxOQ3iQxfn0PDlVLV6eN-OAAX0ULXNbISiMkYx0qkgIHIamKN4NEgZWlxC_hjNYHsgPWH4fXt-ryi6QPwde9gBx6kvJIYDQVpHQf241p4Nai85RQFUxAq4N/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6g0O-E_WiVRA6xUIO67HHhYS_nfwsZB4t13ZYpn8kJiDSxgFCzyyg5uv0vONSoQmBJySENlFavQiQpI9396-N1WyFvchbsyxsy9UzGEAZkPEX2IKfymtLZfQMGRuALlRoViCgG_cu04Xe/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEi-hXju8EEpxEQeZrqRILbeecQjeSxzDELE-Yk7gMjXZifRlMFFmXa6k2e3veEUWEwclX-kWbStNjhlu7fHkx6AXzXPtu1wd0KdVurZyOe158X5VI_t72dIsNj3cm-HgLTsd4oM1OpTw/s400/4.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7REYPUkfeNtWeXOd5i_Xbwd7-M-MGqMJbf29NXeljkelXJLdnyszbmRDR1RfD5TFx337yYpIAH30DG_quQItkeisix3g6IfDvNktMNe_8GYPT9izoNs-fZNRP3woX2YrCzjslU7Lta6m/s400/2.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRD_ZYixUIir3PLCN2BEsyeOrHFElOJ0hAJ7ujvK77SiWNpIQ4jXrSYKtItKJgSVr9YefZRP4GXF_2RRBAF1yhcKcLePFTCNRIo7_quvIisKL1-qcmsCUWyMMW0peRh_PS2jAJmd8CTlU/s400/3.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Xi18TcUWnS2KhuV4SVJrlvEptvrJ-ZWcCmMOE-rID_YYvxdvrhFlEYIB8Q7s2OBsmbHIzjNvpsXJT24P1sRmWKT_Oi7TXpG42-myky__8qCdhFlypXQoKmALK5no3E7KUoW6cuFb4vYH/s400/5.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeVFJDnRrjA3L1nd32diyQCf9hjqgb5fqucNaV8LHqZmWH8xGU0c7q4FbVw1sC-xhPX4HUXNz-t9cAxUuYFSRnvbYFwtIWcq3ZNwsw7sjebUwmh1tiuO7EgBEXBAogMWmqIdCuqMWUbjN/s400/2.jpg'
],

links: [
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.com',
'http://www.traidatmui.comL',
'http://www.traidatmui.com',
'http://www.traidatmui.com'
],

titles:[
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com',
'traidatmui.com'
],
image_border_width:1,
image_border_color:'transparent'
});
</script>

Chỉnh code:
- Dòng màu cam chính là link của các hình ảnh trình diễn trong tiện ích này, bạn thay thành những địa chỉ hình ảnh của bạn.
- Thay http://www.traidatmui.com màu xanh đậm trong code thành đường dẫn của ảnh tương ứng.
- Cuối cùng là phần Title là tiêu đề mô tả cho ảnh (dòng màu đỏ), phần này sẽ hiển thị khi bạn rê chuột vào ảnh, bạn hãy thay đổi tương ứng với ảnh của bạn.

6. Cuối cùng bạn save tiện ích lại

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

[Read More...]

Trình diễn (slideshow) ảnh tự động với hiệu ứng Jquery

Mình đã có lần giới thiệu đến các bạn một thủ thuật tạo slideshow cho ảnh bằng Javascript, tuy nhiên với thủ thuật trước thì chỉ đơn thuần là trình diễn ảnh không có thêm hiệu ứng khác. Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật cũng là slideshow cho ảnh nhưng có thêm một số hiệu ứng với Jquery. Thủ thuật này sẽ có thêm phần mô tả cho ảnh, xuất hiện khi ảnh đó được trình diễn. Bạn hãy xem demo sẽ thấy rõ hơn.
http://gaincapital-forex-com.blogspot.com/p/gioi-thieu-ve-thi-truong-forex.html


1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/fadeslideshow.js"></script>

4. Tiếp theo bạn chèn code css vào trước thẻ ]]></b:skin>

.imgarray {
background:#ccc; /* màu nền của tiện ích*/
width:600px; /*độ rộng của ảnh*/
height:480px; /*chiều cao của ảnh*/
border:1px solid #fff; /*đường viền của ảnh*/
padding:2px;
margin:0px;
}

.descpanelfg{
color:#fff; /*màu text mô tả*/
font:13px verdana;
background:#000; /*màu nền của phần mô tả*/
padding:5px 5px 8px 9px;
opacity:0.7;
border-top:1px solid #fff;
position:absolute;
left:0;
top:0;}

5. Save template lại và trở về phần tử trang
6. Chọn thêm tiện ích và thêm phần tử Javascript/HTML
7. Thêm code bên dưới vào phần tử HTML trên

<script type="text/javascript">
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4",

imagearray: [
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFwJhch-wcjRRNLyU5JxTA_pLeu8_Wcx6nL0bbO7BTC91ahawlFMGEnGyiol2XVMR0CTc3rXEklvpgaSeuajjyzOCZZJTA5q0dONT86nXzJwaHhGP1YC2w5u0Wt3b4kGraRpjsG_ppDOR/s640/Chrysanthemum.jpg", "URL 1", "", "Phần dành cho mô tả ảnh 1"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwsDJ7qW178m8l3eBxchpNrcXjIjSaGXB0AOX5Z7FCgH3awAGC0LPBA48firtk2i7MoU0D3HDpAsvEjbazCl1ffDqk0FyE8rS7_vbfwn9W0xtn-Nhq66_7Sbqq9oQfXSSiRy_GaLolOOf-/s800/img7.jpg", "URL 2", "", "Phần dành cho mô tả ảnh 2"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChU9WhFGc4Zh4cYIGyCOPY79MVkS8E2p0K_N_F9h9JwED9HKfgZUuFqq9e407N0e2B5Ilat1DJ7cc2_SL4aa5pYEE05faFsWpBnXOiYI1yYeUoyqrYrjeT7XkiLx3mynW7gne3lNbm9Zb/s800/img10.jpg", "URL 3", "", "Phần dành cho mô tả ảnh 3"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYHYJ03QBZccmMtcdoBmQQUNBQlvASs6AAepEb1ExWeadQF7H7KQYiDhL8gkl-wq-1wt0g6EOCXvKAbT_DE6oLeWr2cI4O6xtKMetOJLztK7h-9fXyUjRwdlUYlU4-Z-Ll_FNwUnAO5JW/s640/Desert.jpg", "URL 4", "", "Phần dành cho mô tả ảnh 4"]
],

dimensions: [605, 485], //độ rộng và chiều cao của tiện ích
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:true},
persist: false,
fadeduration: 500,
descreveal: "peekaboo",
togglerid: ""
})

</script>

<div id="fadeshow4"></div>

Chỉnh code:
- Bạn hãy thay dòng màu cam ở trong code thành link ảnh của bạn
- Thay URL 1, URL 2... thành các link đường dẫn bạn muốn tạo cho ảnh tương ứng
- Thay phần mô tả cho ảnh tương ứng với ảnh của bạn

8. Save tiện ích lại

Lưu ý: Phần độ rộng (600px) và chiều cao (480px ) của ảnh và tiện ích ([605, 485])phải tương đồng với nhau.

Nếu bạn muốn phần mô tả chỉ hiển thị khi rê chuột vào ảnh thì bạn thay các code như sau

Thay mygallery4 thành mygallery2
Thay fadeshow4 thành fadeshow2
Thay peekaboo thành ondemand

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

[Read More...]

Hiển thị ngày đăng bài dạng lịch xé cho blogspot

Chủ nhật, ngày 05 tháng mười hai năm 2010

Hôm nay mình sẽ giúp các bạn thực hiện việc hiển thị ngày đăng bài viết trên blogger dạng lịch xé. Để thực hiện việc này thì blog bạn đòi hỏi phải bật tính năng hiển thị ngày tháng đăng bài cho blog. Khi bật tính năng này thì mỗi bài viết trên blog của bạn sẽ có ngày đăng đi theo thường hiển thị phía trên tiêu đề bài viết. Tuy nhiên sau khi thực hiện thủ thuật này thì ngày đăng bài viết của bạn sẽ hiển thị một phong cách mới hoàn toàn, dưới dạng lịch xé trông đẹp mắt hơn.

Ảnh trước khi thực hiện thủ thuật

Ảnh sau khi thực hiện thủ thuật

1. Đầu tiên đăng nhập vào Blogger
2. Vào thiết kế (Design)
3. Tại đây bạn click "Chỉnh sửa" trên nền post
4. Nếu trên blog bạn chưa bật tính năng hiển thị ngày đăng, bạn check vào ô ngày như bên dưới. Bạn hãy chọn định dạng ngày đăng là mm.dd.yyyy, ví dụ là 12.03.2010 như bên dưới.
5. Save lại và chọn tiếp phần chỉnh sửa HTML (Edit HTML)
6. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
7. Chèn code bên dưới vào sau thẻ <head>

<script type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</script>

8. Bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>

.dateblock {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCGZEVAAdZpg3aE13ve08SLhyphenhyphentLJ5LcujWJIniUuIgu7DPStEt_9cbcbOIIzyY0p08cWjYP4h-ixxrDJVjXOhXrB92mLS9X4YV8sCZPlhnnKTh1PQoMdPISiUa73-dQ1lH-KhlJHd4PM_g/)
no-repeat;
padding-top:5px;
width: 48px;
margin-right: 5px;
font-weight: bold;
height: 41px;
float: left;
text-align: center;
line-height:1.5em;}

.month {
font-size: 11px;
margin-top: 0px;
text-transform: uppercase;
color: #ff0033;
font-family:verdana;}

.day {
color:#0000ff;
font-size: 22px;
margin: 0px;
}

Các code css quen thuộc bạn tự chỉnh sửa nha.
9. Bây giờ bạn tìm tiếp đến code bên dưới

<data:post.dateHeader/>

Thay nó thành code bên dưới

<div class='dateblock'> <script> date_replace('<data:post.dateHeader/>');</script ></div>

10. Save template lại là xong

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

[Read More...]

Trình diễn bài viết dạng slide với Jquery

Hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật trình diễn bài viết trông khá đẹp mắt. Thủ thuật này mình tìm thấy trên trang hacktutors.info, thấy có thể áp dụng cho blogspot nên mình xin chia sẽ đến các bạn cách để thực hiện thủ thuật này. Với thủ thuật này thì các bài viết của bạn sẽ được trình diễn dạng slide. Giống như trên trang vn.yahoo.com mà mình đã từng giới thiệu với các bạn.
Xem Demo tại đây =>http://gaincapital-forex-com.blogspot.com

1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn thêm code css vào trước thẻ ]]></b:skin>

#featured{
width:395px;
padding-right:240px;
position:relative;
height:250px;
background:#eee;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{/*tùy chỉnh tab bên phải*/
position:absolute;
top:0;
right:0px;
list-style:none;
padding-right:0px; margin:0;
width:295px;
}
#featured ul.ui-tabs-nav li{
padding:1px;
padding-left:13px;
font-size:12px;
}
#featured ul.ui-tabs-nav li span{
font-size:11px;
font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{ /*Tùy chỉnh tab bên trái*/
width:336px;
height:250px;
position:relative;
overflow:hidden;
border-right:5px solid #ccc;}

#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*tùy chỉnh link bên trái*/
display:block;
height:59px;
color:#333;
background:#f2f2f2;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
}
#featured li.ui-tabs-nav-item a:hover{
background:#ddd;
}
#featured li.ui-tabs-selected{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHASfnR0F_5DTLdzLt7UU814WmH_EmgX0JRyXZYvW8fwtp6b-XDX-kUVddPWGcZv-Odlcbt_WLkXidwqv-BKwPyPrzuduSXeQ-YKwnSfg4ZL8AGIFd842iM3N2w4OrTnBMMC6hnoDjlEn9/') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{ /*phần ảnh thumb bên phải*/
float:left;
margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #fff;
}
#featured .ui-tabs-panel .info{/*tùy chỉnh màu nền, độ rộng, chiều cao...phần mô tả*/
position:absolute;
top:180px; left:0;
height:70px;
width: 350px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGDALZQOoeZQVcMQAVTikh5HAEnvk4WJ9Q0wt-xslc-_AA4APM_skf5r3g8AyjZixJLcFupcX0VO7X9KeoyeaW0qW1QQ2VDuQVS7l_6mUg9pzIegjb7Ohsz3ZHb9R4bcRnBcuA-3GsRIJ/');
}
#featured .info h2{/*tùy chỉnh tiêu đề phần mô tả*/
background:#ccc;
font-size:12px;
font-family:arial;
padding:2px;
margin:0;
overflow:hidden;
}
#featured .info p{ /*tùy chỉnh phần mô tả*/
margin:0 5px;
font-family:verdana;
font-size:11px;
color:#f0f0f0;
padding-right:9px;}
#featured .info a{
text-decoration:none;
color:#000; /*màu tiêu đề bài viết (phần mô tả)*/
}
#featured .info a:hover{
text-decoration:underline;
}

.ui-tabs-nav-item img { /*độ rộng và chiều cao của ảnh thumb bên phải*/
width:45px;
height:45px;}

Bạn hãy dựa vào các phần trên để chỉnh sửa css cho phù hợp với blog của bạn.
4. Tiếp theo bạn hãy chèn code bên dưới vào sau thẻ <head>

<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.js" type="text/javascript"/></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery-ui.min.js" type="text/javascript"/></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào HTML/Javascript đó

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqg8I689sGXGffLj8XihEVZqIZxE2ioL1U6Ofk9XRpx2mwHNkMQbc2gfTd1tRnhDWgY0eJUj4HM7kodaW5pLOFqcp4TaaF_v_QHbyBHLCvxdK9bDi5pfGi203un3k9eC4wFS95FBrjmHS/";

showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "no";
showPostDate = true;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";

numposts =4;
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://gaincapital-forex-com.blogspot.com"; //thay thành địa chỉ blog của bạn

</script>

<div id="featured">
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/slide_post_jquery2.js" type="text/javascript"></script>
</div>

7. Cuối cùng save lại.

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

[Read More...]

Tạo Form liên hệ-Contact chèn vào Blog

Kontactr là một site cho phép bạn tạo một form liên hệ, đăng kí một tài khỏan tại trang này và bạn sẽ có 1 site liên hệ có dạng http://kontactr.com/user/Username

Site liên hệ của bạn nó sẽ trông giống như thế này:

Có thể chèn Code để tạo Form liên hệ ngay trên Blog,ví dụ:
http://gaincapital-forex-com.blogspot.com/p/huong-dan-ang-ki-tai-khoan-giao-dich.html
1. Vào trang chủ Kontactr : http://kontactr.com, nhấn Signup để đăng kí 1 tài khỏan mới.


2. Điền đầy đủ thông tin của bạ như hình bên dưới:


3. Sau khi điền đầy đủ thông tin nhấn Submit để hòan thành việc đăng kí.
4. Vào mail của bạn để xác nhận việc đăng kí.




5. Sau khi xác nhận việc đăng kí, quay lại trang kontactr.com và nó sẽ báo là site liên hệ của bạn đã được active.
- Có nhiều lựa chọn cho bạn từ form liên hệ này:

+ Cung cấp code HTML (hoặc java) cho phép bạn chèn trực tiếp vào blog của mình.


+ Cung cấp buttom link:

[Read More...]

Tạo Drop-Down Menu đơn giản cho Blogger

Bài viết trước đây, mình đã cùng các bạn tìm hiểu cách tạo một Menu đơn giản dành cho Blogspot. Hôm nay chúng ta tiếp tục tìm hiểu cách tạo một Drop-Down Menu đơn giản cho Blogger.

Drop down menu

Bước 1:

Đăng nhập vào Blogger, chọn "Thiết kế" -> "Chỉnh sửa HTML"

Bước 2:
Tìm code:

</head>

Và chèn đoạn code sau phía trước đó:

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://ruabien.net-->

Lưu template lại. Hãy điều chỉnh lại màu sắc cho phù hợp với blog, website của bạn.

Bạn có thể xem thêm các mã màu ở đây để thuận tiện cho việc điều chỉnh:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
 
Bước 3:
Vào phần "Giao diện" -> "Bố cục"
click vào "Thêm tiện ích", chọn "HTML/JavaScript" . Tiện ích này chính là phần hiển thị menu do đó bạn cần di chuyển nó đến vị trí thích hợp.
Dán code bên dưới vào tiện ích mới nhé:

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://blogger.com">Blogger Help</a></li>
</ul>

Chỉnh sửa lại đường dẫn menu cho phù hợp và lưu lại là xong. Chúc bạn thành công!

[Read More...]

Code cấm Copy nội dung trang web và Không cho Click chuột phải

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 sau thẻ <head> hoặc trước thẻ </head>

I/ CODE CẤM COPY NỘI DUNG TRANG WEB
<script language='JavaScript1.2'>
function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}

</script>

II/ CODE KHÔNG CHO CLICK CHUỘT PHẢI
<script language='JavaScript'>
var msg="Welcome to BlOg FD";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")

</script>

[Read More...]

HƯỚNG DẪN POST SLIDE ẢNH TRƯỢT ( CÓ KÈM LINK CGO MỖI FILE ẢNH )

Xem Demo ở đây => http://patternstrader.blogspot.com/


Code HTML:
1/Phần chữ màu xanh để chèn Link ảnh,Lưu ý: Khoảng cách giữa các Link có dâu " | "
2/Phần chữ màu đỏ chèn Link tương ứng theo thứ tự các hình ảnh
3/ Thủ thuật này chỉ áp dụng cho các file ảnh định dạng .Jpeg

<div style="text-align: center;">
<embed flashvars="pics=http://img139.imageshack.us/img139/8526/slilebanner1copy.jpg|http://img254.imageshack.us/img254/9168/slidebanner2copy.jpg|http://img269.imageshack.us/img269/6717/slidebanner4.jpg|http://img256.imageshack.us/img256/9691/slidebanner3copy.jpg|http://img823.imageshack.us/img823/4852/metatraderforexcommobil.jpg|http://img690.imageshack.us/img690/6312/newannouncementiphonemt.jpg&amp;links=http://www.forex.com/uk/pricing.html|http://www.forex.com/metatraderuk/forex_demo_account.html|http://www.forex.com/metatraderuk/forex_demo_account.html| http://www.forex.com/uk/open-account.html?type=practice|http://www.efxnow.com/mt/forexmt4smartphone.cab|http://itunes.apple.com/au/app/forextrader-by-forex-com/id367994204?mt=8&amp;pic_width=637&amp;pic_height=197&amp;stop_time=3000" height="197" src="http://img692.imageshack.us/img692/7662/beautifuldreamblog.swf?http://i465.photobucket.com/support/http://vn.myblog.yahoo.com/beautiful-dream" type="application/x-shockwave-flash" width="637" wmode="transparent"></embed></div>

[Read More...]

Chèn thêm khung "Thêm tiện ích" cho phần Header và Main

Thông thường mặc định mỗi theme của blogspot (trong phần bố cục) là chỉ có cho phép “Thêm tiện ích” ở Sidebar (2 bên blog) và ở phần footer (phía dưới blog), vì thế mà mỗi khi ta muốn chèn thêm các Tiện ích(widget) cho phần Main hoặc Header thì ta phải tạo các Tiện ích (widget) ở Sidebar hoặc ở footer rồi di chuyển tới chỗ cần hiển thị. Như vậy rất rườm rà.

Bài viết hôm nay hình giới thiệu 1 mẹo nhỏ để chèn khung “Thêm tiện ích” vào 2 phần Header và Main, giúp cho chúng ta có thể add thêm các Widget trực tiếp lên 2 phần này.
Để thực hiện việc này, rất đơn giản, bạn thực hiện các bước sau:
1 . Đăng nhập blog
2 . Vào phần Chỉnh sửa Code HTML. (không cần nhấp vào mở rộng tiện ích)
3 . Để chèn khung “Thêm tiện ích” vào phần Header, ta làm như sau:

Tìm đọan code sau:
<b:section class=’header’ id=’header’ maxwidgets=’2′ showaddelement=’no‘> (hoặc tìm code tương tự, nhưng phải là Header)
sau đó thay no bằng yes là OK.

4. Để chèn khung “Thêm tiện ích” vào phần Main, ta làm như sau:

Tìm đọan code sau:
<b:section class=’main’ id=’main’ showaddelement=’no‘> (hoặc tìm code tương tự, nhưng phải có id là Main hoặc tương tự)
sau đó thay no bằng yes là OK.

5. Save template.
6 . Xong
Có thể xem hình minh họa như bên dưới.

Trước khi chỉnh sửa:

Sau khi chỉnh sửa:

[Read More...]

Tạo Menu trượt độc đáo

Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu. Hôm nay xin giới thiệu cách thực hiện kiểu menu trượt của tác giả Andrew Sellick.

Scriptaculous là một thư viện JavaScript được xây dựng trên Prototype JavaScript Framework, cung cấp các hiệu ứng động trực quan và các thành phần giao diện người dùng thông qua Document Object Model (DOM).
Bài viết này có điều chỉnh đôi chút so với bản gốc của tác giả.
Click để Xem  >>http://patternstrader.blogspot.com/
Cách thực hiện tạo menu như vậy cho blogger của bạn như sau:

1. Đăng nhập tài khoản Blogger

Việc đầu tiên là bạn đăng nhập vào Blogger   >>  Bảng điều khiển  (Dashboard)   >>  Thiết kế (Design)  >>  Chỉnh sửa HTML (Edit HTL)

2. Chèn thẻ CSS vào Blog

Tìm (Ctrl-F) và thay thế đoan mã </head> bằng đoạn mã sau:

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://galeon.com/vku/menuside/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(http://galeon.com/vku/menuside/images/background.gif);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>
</head>

Bạn có thể tùy ý điều chỉnh thuộc tính CSS như độ rộng và màu sắc tùy ý.

3. Thiết lập và chèn cấu trúc HTML vào Blog

Bạn thiết lập dữ liệu cấu trúc HTML và đặt vào phần thân trang web (đặt giữa 2 thẻ <body> và </body>)
Để đơn giản bạn hãy tìm (Ctrl-F) đoạn mã </body> và chèn đoạn code bên dưới vào phía trước </body> 

<div id="menuBar">
<a href="#" id="menuBarTab"><img src="http://galeon.com/vku/menuside/images/slide-but.gif" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://gaincapital-forex-com.blogspot.com/p/huong-dan-ang-ki-tai-khoan-giao-dich.html ' title='>Hướng dẫn đăng kí tài khoản giao dịch tạI Fx.com Uk '>Hướng dẫn đăng kí tài khoản giao dịch tại Fx.com Uk</a></li>
<li><a href='http://gaincapital-forex-com.blogspot.com/p/huong-dan-nap-tien-deposit-rut-tien.html ' title=' Deposit-Withdraw '> Deposit-Withdraw</a></li>
<li><a href='http://chienluocForex.tk/' title=' Chiến lược giao dịch Vàng-Fx ( Demo )'>Chiến lược giao dịch Vàng-Fx ( Demo )</a></li>
<li><a href='http://BantinForex.tk' title=' Tin tức thị trường-Nhận định '>Tin tức thị trường-Nhận định</a></li>
</ul>
</div>
</div>
</div>

Trong bước này bạn cần thay đổi tên của các menu và liên kết tương ứng trong cấu trúc HTML như code trên.
LƯU Ý: NẾU NHIỀU LINK THÌ TĂNG CHIỀU CAO TRÊN 
Chúc các bạn thành công!!!

[Read More...]

Kỹ thuật làm chữ bòng đổ

trên blogspot ta cũng có thể tạo 1 widget và chọn tiện ích HTML/Script và dán đoạn code sau

<style>
#css-shadow
{
margin: 0;
padding: 0;
position: relative; /* Dùng &#273;&#7875; &#273;&#7883;nh v&#7883; ch&#7919; */
width: 500px;
height: 250px;
}
#css-shadow h1.font
{
position: absolute; top: 0; left: 0; z-index: 1;
color: blue;
}
#css-shadow h1.shadow
{
position: absolute; top: 2px; left: 2px; z-index: 0;
color: #C0C0C0;
}
</style>
<div id="wrapper">
<div id="css-shadow">
<h1 class="font">
www.BantinForex.tk</h1>
<h1 class="shadow">
www.BantinForex.tk</h1>
</div>
</div>

Vậy là xong, ví dụ dòng chữ dưới đây:

www.BantinForex.tk

www.BantinForex.tk

[Read More...]

Cách tạo hiệu ứng bóng mờ – Fade Effect bằng jQuery cho Blogger

Rất dễ dàng để bạn tạo hiệu ứng bóng mờ – Fade Effect bằng jQuery cho Blogger với công đoạn thực hiện nhanh chóng. Đây là tiện ích tạo hiệu ứng mờ đi hình ảnh khi bạn đưa (chỉ) chuột vào vị trí hình ảnh hiện hành tạo ra hiệu ứng chuyên nghiệp làm cho Blogger của bạn hấp dân hơn (Có lẽ vậy).

Bạn có thể xem  DEMO để hình dung dễ hơn tiện ích này.

Cách thực hiện như sau:

Đăng nhập vào Blogger và tìm vị trí chèn Code:

- Bạn đăng nhập vào Blogger:  Bảng điều khiển (Dashboard)  >> Thiết kế (Design)  >>  Chỉnh sửa HTML (Edit HTML)
- Tìm (Ctrl-F) đoạn mã </head>.

Chèn mã JavaScript tạo hiệu ứng:

- Thay thế đoạn mã </head>bằng đoạn mã dưới đây :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
</head>

- Lưu lại mẫu để hoàn thành công việc.

[Read More...]