Home » Thủ Thuật Blog

Thêm nút like vào Blogspot

23:50 |

Facebook hiện nay là một mạng xã hội toàn cầu lớn nhất thế giới . Và một tính năng rất hay của Facebook đã được đăng kí bản quyền đó chính là nút Like. Hôm nay mình sẽ hướng dẫn các bạn một thủ thuật nho nhỏ giúp thêm nút Like của Facebook vào Blogger.
B1 : Để Tạo bài viết liên quan cho blogspot bạn có thể vào Mẫu -> Chỉnh sửa HTML -> chọn Mở rộng Mẫu Tiện ích

B2: Thêm đoạn mã dưới đây vào trước thẻ <data:post.body/> trong template của bạn.

<b:if cond='data:blog.pageType == "item"'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></b:if>


Kết quả:

Read more…

Thêm comment của facebook vào blogspot

22:18 |

1- Bước đầu tiên bạn phải làm là đóng comment của blogger lại bằng cách vào setting => posts and comments => Tại mục các bạn chọn comment location chọn Hide

- Lưu cài đặt lại.
2- Vào phần (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọn Mở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào trước thẻ đóng </head>.

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>

Trong đó:

data-width là độ rộng của comment box.
data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
data-href là để phân biệt từng comment box, mỗi địa chỉdata-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết

3- Chèn đoạn code bên dưới vào sau thẻ <body> .

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

4- Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5- Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

6- Lưu Mẫu (Save template). và ra xem kết quả.

Read more…

Hướng dẫn add tên miền vào Blogger (blogspot) không bị chặn mới nhất

11:40 |

Hướng dẫn add tên miền vào Blogger (blogspot)

Đăng nhập vào http://blogger.com

Chọn vào tên blog của bạn và nhấn Cài đặt như hình bên dưới:

Cài đặt → Cơ bản → Thêm tên miền tùy chỉnh → Chuyển sang cài đặt nâng cao

Nhập tên miền và nhấn Lưu

Chú ý: Bắt buộc phải nhập www hoặc dạng 1 subdomain nào đó của tên miền. Ví dụ: blog.tenmien.com

Do chưa tạo các bản ghi hỗ trợ cho blogger nên bạn sẽ nhận được thông báo lỗi tương tự dưới đây:

Trước đây chỉ cần tạo 2 bản ghi CNAME như vùng khoanh vuông là có thể vào được nhưng hện tại ở Việt Nam một số nhà mạng chặn Blogspot khi add vào tên miền riêng. Vì vậy ta không trỏ tới Address của google như thông báo nữa mà tao trỏ tới địa chỉ IP:74.125.28.121

Đăng nhập vào trang quản trị DNS của các bạn với thông tin quản trị tên miền đã được cung cấp.

- Thêm mới hoặc sửa bản 2 ghi A trỏ về 74.125.28.121

1 bản gi trong phần Host Records để "www"

1 bản gi trong phần Host Records để "@"

như hình bên dưới và nhấn Ghi / Thêm

- Thêm một bản ghi URL_REDIRECT vào trang wab của bạn

như bên hình dưới của mình là : http://www.longchimvac.com các bạn thay bằng Address của các bạn.

Nếu các bạn không thêm bản ghi URL_REDIRECT tới tên miền của các bạn thì các bạn sẽ không chuyển hướng từ tenmien.com về www.tenmien.com

Đợi khoảng 5 - 15 phút để hệ thống DNS cập nhật. Sau đó nhấn Lưu .Nếu đã xác thực được. Blogger sẽ hiển thị tương tự như hình bên dưới:

Ok các bạn tích vào phần Chuyển hướng tenmien.com về www.tenmien.com và nhấn Lưu lại.

Các bạn thử kết quả nhé.

chúc các bạn thành công

Read more…

Code javascript quảng cáo popup- 1 lần/ngày/1 ip

23:42 |

Popup 1 lần / 1 ngày / 1 ip nhưng mở ra new windows mới có vẻ vẫn chưa được thích hợp lắm, nó vẫn gây ảnh hưởng nhiều đến lượt ghé thăm Website của họ. Ở bài viết Code popup 1 lần/ ngày / ip mình đã giới thiệu tới các bạn loại Code mở ra new windows. Ở bài viết giới thiệu này mình hướng dẫn các bạn sử dụng code javascript để popup new tab. Popup nói dễ hiểu là khi nhấp vào link hay bất kỳ vị trí nào trên Website, blog, forum thì nó chạy thêm 1 link khác (Link mình đặt Popup)

Dán đoạn code dưới đây thay thế cho <body>

Để làm được điều này các bạn chỉ cần thực hiện bước đơn giản sau:


<script src='https://quyet223.googlecode.com/files/popup-new-tab1.js' type='text/javascript'/>
<body onclick='popunder();'>

Lấy File https://quyet223.googlecode.com/files/popup-new-tab1.js để đặt link Popup của các bạn muốn đặt.
Hoặc mở 1 file Javascript mới copy đoạn Code dưới đây và lưu lại thành file .JS của các bạn


function Set_Cookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
var expires_date = new Date(today.getTime() + (expires));

document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : ") +
((path) ? ";path=" + path : ") +
((domain) ? ";domain=" + domain : ") +
((secure) ? ";secure" : ");
}

function Get_Cookie(name) {

var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) &&
(name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}

function Delete_Cookie(name, path, domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : ") +
((domain) ? ";domain=" + domain : ") +
";expires=Mon, 11-November-1989 00:00:01 GMT";
}

function popunder() {





if (Get_Cookie('cucre') == null) {
Set_Cookie('cucre', 'cucre Popunder', '1', '/', ', ');
var url = "

http://longchimvac.blogspot.com/";
pop = window.open(url, 'windowcucre');
pop.blur();

window.focus();
}


}

function addEvent(obj, eventName, func) {
if (obj.attachEvent) {
obj.attachEvent("on" + eventName, func);
}
else if (obj.addEventListener) {
obj.addEventListener(eventName, func, true);
}
else {
obj["on" + eventName] = func;
}
}

addEvent(window, "load", function (e) {
addEvent(document.body, "click", function (e) {
popunder();
});
});

Lưu ý: Code này popup 1 lần trên 1 ngày theo 1 địa chỉ IP

Read more…

Chèn chia sẻ lên facebook, tweet, G+ cho Web, blog, blogger

21:34 |

Chắc hẳn các bạn ghé thăm website hay blog nào đó bắt gặp Web của họ có những nút (button) chia sẻ hoặc like facebook, G+ rất đẹp. Nếu Blog, Website của bạn chưa có và bạn muốn có những chia sẻ facebook, Tweet, G+, Share...và nhiều hơn thế nữa thì hãy chú ý bài viết này, các bạn sẽ chèn những chia sẻ đó rất đơn giản và đẹp mắt, với nhiều mẫu khác nhau.

Ở bài viết này, mình giới thiệu chèn chia sẻ đang được thông dụng nhất đối với người dùng đó là Addthis. Có nhiều mẫu khác nhau cho bạn chọn.
Và mình giới thiệu trên Blogger. Đối với Website các bạn cũng chèn tương tự.
DEMO SHARE BUTTON 1
Có 2 cách sử dụng Addthis cho Blogger.
Cách 1: Dán Code dưới thẻ (Cách này dùng cho Website nhưng mình giới thiệu chung cho cả Blogger). Mình lưu ý ưu tiên dùng cách này

CODE mẫu DEMO 1:


<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='left:1px;top:250px;'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/>
<a class='addthis_button_tweet' tw:count='vertical'/>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/>
<a class='addthis_counter'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50dd91bc3816efd5' type='text/javascript'/>
<!-- AddThis Button END -->

Giá trị left và top các bạn có thể thay đổi để hiển thị.
Ở đây mình để left: 1px là để khung chia sẻ đó ép vào màn hình sát phía trái
Giá trị top: 250px; ứng với độ dài từ phía trên màn hình tới khung.
Mẫu 2: Đối với dạng mẫu 2 này thích hợp cho các bạn chèn vào bài viết.

Hiện bài viết của mình cũng sử dụng mẫu này. Vị trí đặt Code mẫu này các bạn phải lưu ý, muốn đặt hiển thị ở vị trí nào thì các bạn tìm tới vị trí đó để đặt
CODE mẫu DEMO 2:


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50dd9bfe1dd52869"></script>
<!-- AddThis Button END -->

Cách 2:
Các bạn có thể copy code ở trên và thêm vào 1 tiện ích (Widget) HTML/Javascript.
Hoặc có 1 số mẫu các bạn có thể cài trực tiếp bằng cách dưới đây:

Và nhiễu mẫu khác tại trang https://www.addthis.com cho các bạn lựa chọn.
----------------------------
Bài viết sau mình sẽ hướng dẫn các bạn chèn chia sẻ bài viết, chèn chia sẻ có nguồn từ 1 số trang khác, vì mình thấy nó cũng rất đẹp và nhiều chức năng chia sẻ.
--------------------------
Chúc các bạn thành công !

Read more…

Tạo hộp nhận xét/bình luận mới cho blogspot

09:57 |

Ảnh minh họa

Là người "quản trị" Blog chắc hẳn các bạn đều muốn các khách tham quan khi ghé thăm đều để lại những lời nhắn động viên, trao đổi chia sẻ, tâm sự kết bạn tại hộp comment....???

Với thủ thuật này, các commet của khách tham quan được xếp theo thứ tự mới nhất nằm trên hàng đầu tiên kèm theo ảnh avatar của khách (số lượng comments được hiển thị do bạn tuỳ chọn tối đa là 200 comment) và được chứa đựng trong một hộp gọn gàng có thanh trượt để bạn có thể kéo xuống phía dưới để đọc hết các comments mà không chiếm khoảng không gian của Blog.

Thủ thuật này cũng khá đơn giản, bạn đăng nhập vào Blog > Chọn Bố cục > Chọn thêm tiện ích HTML/Javacript .

Sau đó copy tất cả đoạn code phía dưới dán vào.

<center><div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;"><span style="color: red; font-size: large;">Bình luận mới nhất của các bạn</div></span>
<div style="border: 5px solid orange; color: cyan; height: 450px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 280px;">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 200,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script src="https://sites.google.com/site/dunghennessyjs/comment2.js" type="text/javascript"></script>
<script src="http://www.cdqtkd5a.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=200" type="text/javascript"></script>
</div>
</center>

Bây giờ bạn thay đổi các dòng lệnh màu đỏ, trong đó:

* Background: màu nền của tiêu đề phía trên

* Color: màu chữ tiêu đề.

* Bình luận mới nhất: bạn có thể thay đổi chữ nào mà bạn muốn.

* Orange: màu của khung hộp, có thể thay red (đỏ), black (đen), white (trắng), Pink (hồng), yellow (vàng),green (xanh)....

* height: chiều cao của hộp.

* Width: chiều rộng của hộp

Thay đổi dòng lệnh màu xanh, trong đó:

* Color: Mã màu của comment

* Font-size: kích thước chữ comment

* AvatarSize: kích thước của Avatar

* Characters: số lượng từ của comment

* http://www.huongdanpc.blogspot.com bằng địa chỉ trang Blog của bạn

Thay đổi dòng lệnh màu vàng đây là số comments được hiển thị trong hộp (2 số này phải bằng nhau).

Cuối cùng bấm Lưu lại rồi trở lại blog xem kết quả nha.

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

Read more…

Thủ thuật SEO : Tối ưu tiêu đề cho Blog

02:57 |

Blogger là dịch vụ miễn phí giúp tạo Blog đơn giản và tiện lợi. Một số bạn có hỏi mình về tối ưu Tiêu đề / title của Blog chia sẻ và giải trí.
Xin chia sẻ với các bạn cách tối ưu title cho blogspot với kinh nghiệm của cá nhân:

Bình thường tiêu để mặc định của Blog là :

Tiêu đề Blog | Tiêu đề bài viết

Nhưng chúng ta thử lướt qua các kết quả tìm kiếm trên Google với từ khóa vd : SEO hình ảnh

Các kết quả trên top 1 và 2 đều có title bài viết có dang :

Tiêu đề bài viêt | Tiêu đề Blog

Chứng tỏ Google sẽ ưu tiên từ khóa từ bên trái sang bên phải, ta sẽ tối ưu tiêu đề / title
Ta vào Edit html , tìm đoạn code sau :

<title><data:blog.pageTitle/></title>

Thay bằng:

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

<title><data:blog.pageTitle/></title>
<meta content='mô tả chính của blog' name='description'/>
<meta content='từ khóa chính của blog' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ".mô tả chính của blog"' name='description'/>
<meta expr:content='data:blog.pageName + ",từ khóa chính của blog"' name='keywords'/></b:if>

Như vậy tiêu đề của bạn đã được tối ưu rồi, chúc các bạn lên Top !

Read more…

Một Số Code Thông Dụng Cho Blogspot

19:52 |

Nhằm giúp các blogger mới vào nghề hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn.

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

<span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

#339966 // Mã màu cho chữ
12pt Tahoma // Cỡ chữ và font chữ

margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.

2. Canh giữa, canh phải

<div style="text-align:center;">Nội_dung</div>

center // Thay center = right cho canh phải hoặc = left cho căn trái

3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ

<b>Nội_dung_in_đậm</b>
<i>Nội_dung_in_nghiêng</i>
<u>Nội_dung_gạch_chân</u>
<strike>~~Nội_dung_chữ_bị_gạch_ngang~~</strike>

4. Dấu chấm vô dòng con, đánh số đầu dòng

Dấu chấm vô dòng con
<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>

Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>

5. Bookmark đến một vị trí nhanh trong bài viết

<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>

Lưu ý:
    Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh)
    Tốt nhất không nên dùng chữ có dấu cho tên gán.

Ví dụ:
    - Đến điểm A (<a href="LINK_bài_viết_cụ thể#Diem_A">Đến điểm A</a>)
    - ...
    - Điểm A (<a name="Diem_A">Điểm A</a>)
Code trong ngoặc là chú thích cho ví dụ.
Như vậy khi ta click chuột vào "Đến điểm A" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A".

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)

1.
<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300"
type="application/x-shockwave-flash" scale=" play="true" loop="true"
menu="true"></embed></div>

2.
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400"></embed>

7. Chèn hình ảnh (image) vào bài viết

1. Code đơn giản
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>

2. Code mở rộng
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

    Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích.
    Mô_tả // Khi rê chuột lên ảnh, sẽ hiện chú thích.
    Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó.
    align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.

8. Chèn link liên kết vào bài viết

<a href="LINK" target="blank">Tên_Link</a>

target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay không cũng không khác biệt.

Ví dụ:
- Dùng target="blank" - XEM
- Không dùng target="blank" - XEM

9. Chèn ảnh chứa link

<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>

10. Tạo button ẩn hiện nội dung

<div>
<div>
<input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ';this.innerText = '; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;  border:#4F4F4F 1px solid; padding: 4px; background:# ">


NỘI_DUNG 


</div>
</div>
</div>

Ví dụ:

11. Chèn nhạc vào bài viết

<object name='hat' width=300 height=45>
<embed  type='application/x-mplayer2' 
 pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/'  
 controls='controlpanel' width=300 height=45 src='LINK_NHẠC' 
 autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>

    LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3)
    loop='0' // Không lặp lại
    loop='1' // Lặp lại một lần
    loop='-1' // Lặp lại mãi mãi
    autostart="0" // Không tự play
    autostart="1" // Play ngay khi web tải xong

12. Chia 2 cột, 3 cột, 4 cột

<table><tbody>
<tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">


Nội_dung_cột_1


</div>
</td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">


Nội_dung_cột_2


</div>
</td></tr>
</tbody></table>

Thêm cột thì thêm trên dòng </td></tr> đoạn code:

</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">


Nội_dung_cột_n


</div>

13. Viền khung một nội dung trong bài viết

<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">
NỘI_DUNG 
</div>

    #4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền - Loại đường viền.
       - solid ______________
       - dashed ----------------
       - dotted ......................
    background:#eee // Nền khung
    width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)

14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

    cols="59" // Bề rộng khung chứa code
    rows="18" // Số dòng trong khung chứa code
    wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua
    wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống

Ví dụ:

15. Ảnh rõ hơn khi rê chuột vào

1. Ảnh có chứa link

<a href="link_liên_kết" target="blank">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
</a>

2. Ảnh không chứa link

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>

opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào.
Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.

Ví dụ:

16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh

1. Ảnh có chứa link

<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>

2. Ảnh không chứa link
<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >Ví dụ:

17. Tạo hiệu ứng khi rê chuột vào link liên kết

<a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>

    LINK // Link liên kết
    #eee // Mã màu khi rê chuột lên
    TEN_LINK // Tên gán cho link liên kết

18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>

    scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
    frameborder="0" // Đường viền, 0 là không viền

    Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :)

Ví dụ: Xem tại đây

19. Các loại đường viền | border: 1px #ccc solid;

Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................

20. Các kiểu định dạng chữ | text-decoration:none;

none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit

21. Thêm các định dạng link vào class

/*Link cố định*/
a:link { 
color:#3366ff;
text-decoration:none;
}

/*Link đã xem qua*/
a:visited {
color:#ccc;
text-decoration:none;
}

/*Link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}

22. Tạo bóng đổ và bo tròn 4 góc viền

/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;

/*Bo tròn 4 góc viền*/
border-radius:4px; 

/*Bo tròn tùy chọn: top, right, bottom, left*/
border-radius:4px 4px 4px 4px;

Thay box thành text cho chữ

23. Các loại định dạng list | ... ul {list-style-type:none;}

none: Không hiển thị đánh dấu
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

/*Link hình thay cho list*/

list-style-image:url('Link_hình');

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa

25. Code xem địa chỉ IP, thông tin của máy truy cập blog

(Có thể post vào widget bất kỳ ở trên blog)

<img src="http://www.wieistmeineip.de/ip-address">

26. Cách mã hóa code

Với ký tự < phải đổi thành <
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &
Với khoảng trắng phải đổi thành  

Để post các chú thích kí tự trên lên blog được thì:

    < phải đổi thành &lt;
    > phải đổi thành &gt;
    & phải đổi thành &amp;

27. Các lệnh điều kiện <b:if cond= ... </b:if>

1. Điều kiện ở trang chủ

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

2. Điều kiện ở trang bài viết

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

3. Điều kiện ở trang chủ, trang nhãn

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

4. Điều kiện ở các trang lưu trữ

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

5. Điều kiện ở các trang tĩnh

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

6. Điều kiện ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
...
</b:if>

Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)

Ví dụ: Điều kiện loại trừ trang bài viết

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

28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

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

Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..

29. Script chèn file .js vào blog

<script src='Link_File_JS' type='text/javascript'/>

30. Script chèn trực tiếp nội dung file .js vào blog

<script type='text/javascript'>
//<![CDATA[


Nội_dung_file_js


//]]>
</script>

31. Thêm nhanh khung hướng dẫn hay nội quy comment

- Tìm đến thẻ <data:blogTeamBlogMessage/>
- Đôi khi có tên là <data:blogCommentMessage/>
- Thêm vào sau nó đoạn code sau:

<!--Khung nội quy comment-->
Nội dung nội quy comment của bạn 
<p></p>

- Sau mỗi hàng phải thêm cặp thẻ <br></br> hoặc <br/> nếu muốn xuống dòng.
- Có thể dùng các code trang trí cho khung như: hình ảnh, màu chữ, v.v..

Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.

<!--Nội dung hướng dẫn comment-->
<div style='border:#ccc 1px solid; padding:4px;border-radius:4px; background:#eee;'>
Bạn có thể sử dụng một số thẻ HTML như: <br/>
<textarea cols='48' rows='4'>
» Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b>
» Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i>
» Chèn link liên kết: <a href='Link'>Tên_link</a>
» Chèn hình ảnh: [img]Link_hình[/img] </textarea>
</div>
<p/><p/>

Chúc thành công!.

Read more…

Download

Popular Posts

Market information

Blog Archive

Giới thiệu về tôi

1- Bước đầu tiên bạn phải làm là đóng comment của blogger lại bằng cách vào setting => posts and comments => Tại mục các bạn chọn comment location chọn Hide

Hướng dẫn add tên miền vào Blogger (blogspot)

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

2. Canh giữa, canh phải

3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ

4. Dấu chấm vô dòng con, đánh số đầu dòng

5. Bookmark đến một vị trí nhanh trong bài viết

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)

7. Chèn hình ảnh (image) vào bài viết

8. Chèn link liên kết vào bài viết

9. Chèn ảnh chứa link

10. Tạo button ẩn hiện nội dung

11. Chèn nhạc vào bài viết

12. Chia 2 cột, 3 cột, 4 cột

13. Viền khung một nội dung trong bài viết

14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

15. Ảnh rõ hơn khi rê chuột vào

16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh

17. Tạo hiệu ứng khi rê chuột vào link liên kết

18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

19. Các loại đường viền | border: 1px #ccc solid;

20. Các kiểu định dạng chữ | text-decoration:none;

21. Thêm các định dạng link vào class

22. Tạo bóng đổ và bo tròn 4 góc viền

23. Các loại định dạng list | ... ul {list-style-type:none;}

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

25. Code xem địa chỉ IP, thông tin của máy truy cập blog

26. Cách mã hóa code

27. Các lệnh điều kiện <b:if cond= ... </b:if>

28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

29. Script chèn file .js vào blog

30. Script chèn trực tiếp nội dung file .js vào blog

31. Thêm nhanh khung hướng dẫn hay nội quy comment

Top Hot

ADS

Welcome to clipfuny.blogspot.com

Yahoo: chuluninfo

Email: hieptamphong@gmail.com

My site: clipfuny.blogspot.com