vinh36.blogspot.com

Home » Archives for 3/1/14

Trình diễn bài mới với tiện ích VNE Recent Posts

Style 1 : Recent Post theo Label ở Homepage

Thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

* Trong đoạn code trên :

width: 650px; : chiều rộng của widget
botnum = 4; : số bài viết hiển thị ở class bottom-news
numposts = 14; : số bài viết hiển thị ở class left-news
label = "Hardware"; : nhãn/ trương mục ( Label ) sẽ được hiển thị

Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget :

Recent Post theo Label ở Homepage Layout

* Cách tính chiều rộng :

bottom-news = 4x(botwidth + 2px + 4px) + 4x5px = 444px
bottom-news-item = botwidth + 2px + 4px = 106px

* Nếu bạn muốn widget hiển thị những bài mới nhất trên blog thì thay code

http://quangvinh936.googlecode.com/files/vne-recent-adv.txt

Thành

http://quangvinh936.googlecode.com/files/vne-recent-adv-all-posts.txt

Style 2 : Recent Post mang phong cách VNExpress

Hình minh họa

Thực hiện :

1. Vào Thiết kế > Chình sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

3. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<div class="folder">
<div class="folder-title">
<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemK?max-results=10">Kiến thức</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemT?max-results=10">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?max-results=10">Phần mềm</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/License?max-results=10">Free License</a>
</div>
<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://cuongctblog.blogspot.com";
</script>
<script src="http://quangvinh936.googlecode.com/files/VnE-recent.txt" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

Trong 2 đoạn code trên :

width:500px; : chiều rộng của cả widget
width:478px; : chiều rộng phần nội dung widget
width:298px; : chiều rộng phần nội dung bên trái
width:160px; : chiều rộng phần nội dung bên phải
height:100px; : chiều rộng ảnh bài viết mới nhất
width:53px; height:53px; : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải
rdlabels[x] : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.
summaryPost = 247; : số ký tự đoạn mô tả bài viết chính
sumPost = 147; : số ký tự tiêu đề bài viết
numposts = 6; : tổng số bài viết được hiển thị trên mỗi widget

Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :

Recent Post mang phong cách VNExpress Layout

Style 3 : Recent Post mang phong cách Quantrimang

Recent Post mang phong cách Quantrimang.com - Style 1

Minh họa cho list1=1

Thực hiện :
1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :

Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :
- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn
- mode :

mode=”label” : áp dụng cho Label
mode=”blog” : áp dụng cho cả Blog

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

Read more…

trỉnh diễn bài viêt dạng SlideTab Recent posts (jQuery)

Hình minh họa :

Sau đây là các bước thực hiện :
- Vào code template (thiết kế -> chỉnh sửa code HTML), và chèn đoạn mã code bên dưới vào trước thẻ đóng </head>

- lưu ý là nếu trong code template của bạn đã có file jquery.min.js thì không cần chèn vào nữa,
- tiếp theo, tạo 1 widget HTML/javascript và chèn đoạn code bên dưới :

Hướng dẫn tùy chỉnh :
- visible: 5 đây là số bài viết sẽ được hiển thị ra ngoài, như trong demo là 3.
- auto: 3000 đây là thời gian chạy auto, 3000 tương ứng với 3 giây, tức là sau 3 giây tự động chuyển bài.
- speed: 1000 là tốc độ chuyển bài viết khi click vào button left hoặc right (mũi tên màu cam)
- Lưu ý : nếu không muốn chạy auto, thì bạn bỏ dòng auto: 3000, trong đoạn code javascript, tức là đoạn script ở trên chỉ còn như bên dưới :

- var mode = "all"; là chế độ hiển thị theo cả blog hoặc theo 1 nhãn nào đó, nếu giá trị là all thì hiển thị các bài viết mới của blog, nếu giá giá trị là single thì sẽ hiển thị bài viết theo nhãn được chọn (là biến g_label bên dưới)
- var g_numposts = 10; là số bài viết sẽ load (lưu ý là số bài viết sẽ load (g_numposts) khác với số bài viết sẽ được hiển thị (visible: {giá trị thiết lập}) )
- var g_numcontents = 15; số chữ (là các chuỗi ngăn cách bằng dấu khoảng trắng) sẽ được hiển thị ở đoạn mô tả bài viết.
- var g_label="B-advance"; tên nhãn sẽ được chọn nếu hiển thị ở chế độ mode = "single";
- var homepage="http://quangvinh936.blogspot.com"; thay http://quangvinh936.blogspot.com thành tên domain của blog bạn, ví dụ http://YOUR-BLOG-NAME.blogspot.com

Read more…

Tạo list bài viết theo nhãn khi di chuột hiện ảnh thumlb

Tạo một widget chèn đoạn mã sau vào:

<font color="#0000FF"><b>TỔNG HỢP PHIM</b></font><table border="1">
    <tr>
        <td width="10%">
        <div style="border-style:solid; border-width:1px; text-align: left; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px">
            <p style="text-align: left">
<style type="text/css">
#itechconnect{margin:0; padding: 0; height:200px; overflow: auto; background:url(d) no-repeat bottom right; font-weight:bold}
#itechconnect p {margin:0; padding:2px 10px}
.favicon {width:25px; height:25px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style>
<div id="itechconnect" style="width: 670px; height: 200px">

<style type="text/css">

.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota:hover{
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

</style>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

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

numposts = 300;
label = "phim";
home_page = "http://vinh36.blogspot.com/";

</script>
<script src="http://quangvinh936.googlecode.com/files/s2-label.js" type="text/javascript"></script>
</div></div>
        </td>
    </tr>
</table>

Thay đổi đoạn mầu ooooo phù hợp với blog của bạn

chúc bạn thành công !!!!

Read more…

Hướng dẫn tạo thanh Menu cố định ở đầu blog.

1. Vào template chèn đoạn css sau phía trên thẻ ]]></b:skin>

#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở <body...> (dấu ... có thể khác nhau hoặc không có tùy blog)

<div id='topmenu-outer'>
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == "") {this.value = "Tìm kiếm thủ thuật ...";}' onfocus='if (this.value == "Tìm kiếm thủ thuật ...") {this.value = ""}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='quangvinh936.blogspot.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>

3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:

<ul class="menu">
<li class="drop0"><a href="http://quangvinh936.blogspot.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://quangvinh936.blogspot.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://quangvinh936.blogspot.com/p/voquocan.html">About Me</a></li>
<li><a href="http://quangvinh936.blogspot.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://quangvinh936.blogspot.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Blogger?max-results=5">Blogger</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Comments?max-results=5">Comments</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Emoticons?max-results=5">Emoticons (Icons)</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Bookmark?max-results=5">Bookmark</a></li>
</ul>
</div></li>

<li><a href="http://quangvinh936.blogspot.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">

<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>

<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/share-template-01.html">Template 01</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/template.html">HTML</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/css01.html">CSS</a></li>
</ul>
</div>

<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/threaded-comment.html">Comments 6 cấp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/01/mot-giao-dien-khac-cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/12/tao-khung-quick-comments-cho-blog-cbox.html">Quick Comments</a></li>
</ul>
</div>

<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/12/nhung-ieu-can-luu-y-khi-design-blog.html">Bí Quyết</a></li>
</ul>

</div></div></li></ul>

Save lại là xem như hoàn thành.
4. Thay đổi code:

Đoạn code ở bước 1 là css. Bạn tìm hiểu bài viết này nếu muốn thay đổi về css.
Đoạn code ở bước 2 thay quangvinh936.blogspot.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
» drop0: là không drop menu.
» drop1: là menu drop 1 cột.
» drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.

Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!

Read more…

Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot

Blogspot luôn bị so sánh với Wordpress bởi đây là 2 nền tảng blog hàng đầu hiện nay. Ngoài khả năng SEO như mình đề cập đến trong bài trước thì hệ thống Nhận xét của blogspot cũng bị chê bai rất nhiều và điều nhận thấy rõ nhất là hiện nay một số blogger đã chuyển sang dùng Nhận xét bên ngoài như của Disqus, IntenseDebate... Lý do có lẽ là việc reply lại Nhận xét trên blogspot khó khăn và không trực quan như Wordpress, đến giờ cũng chỉ hiển thị được avatar cho tài khoản Google, không chỉnh sửa được khung Đăng Nhận xét...

Khung Đăng Nhận xét của blogspot là một trang riêng được chèn vào blog thông qua thẻ iframe và Google không cho ta quyền can thiệp vào khung Đăng Nhận xét này. Đó là lý do mà không đưa được bộ gõ riêng cũng như emoticons vào khung Đăng Nhận xét. Với bộ gõ thì dường như không thể cho đến khi nào Google tích hợp thêm vào. Còn với emoticons thì thật may là có hàm replace, sử dụng hàm này để thay đổi ký tự thành hình ảnh và blogspot đã có emoticons cho dù việc nhập emoticons không thể theo kiểu click.

Emoticons cho blogspot đã được giới thiệu khá lâu rồi, trong bài này mình sẽ hướng dẫn các bạn tạo emoticons cho khung Nhận xét sao cho hiển thị được cả trên các phiên bản trình duyệt Internet Explorer (IE).

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ

</body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Bước 2: Tìm đến thẻ

<b:loop values='data:post.comments' var='comment'>

và thêm trước nó thẻ

<div id='emocomments'>.

Tìm thẻ đóng

</b:loop>

và thêm sau nó thẻ

</div>.

Bước 3: Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.

Tìm đến thẻ

<data:blogTeamBlogMessage/>

thứ 2 và thứ 4 rồi chèn đoạn mã dưới đây vào sau nó:

<script type="text/javascript"> 
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&#8592;</a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">&#8594;</a>';
}
//]]>
</script>
<div class='emoticons'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:) 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:( 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:)) 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:(( 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=)) 
<span id='smiley-more' style='display: none;'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D&gt; 
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O 
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-? 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS 
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-( 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-) 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">&#8594;</a></span>
</div>

Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}

Mở rộng:

Các bước trên là chèn 15 emoticons của Zing với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1. Ký tự tắt nằm giữa 2 ký tự /

Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
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 &

Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt. Lưu ý là với những ký tự tắt bao gồm của nhau như :)) và :) thì bạn phải đặt :)) lên trước :) nếu không chỉ ký tự ít hơn được hiện lên. Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn. Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).

Vì không thể chèn emoticons theo kiểu click do đó chúng ta chỉ nên sử dụng những ký tự tắt thông dụng để không gây khó khăn cho người đọc. Cũng đừng nên tham lam chèn nhiều emoticons dẫn đến trình duyệt phải xử lý nhiều thông tin khiến blog tải chậm hơn. Giờ thì khách thăm blog của bạn thoải mái Nhận xét với những emoticon ngộ nghĩnh cho dù họ có đang dùng trình duyệt bị giới web development ghét nhất mang tên IE 6. Cảm ơn Noct đã giúp sửa lỗi không hiển thị avatar của tài khoản Blogger. Nếu bạn đang sử dụng comment phân cấp của Tien Nguyen thì thay thế emocomments ở đoạn mã bước 1 thành cm_block và bỏ qua bước 2.

Read more…

Chèn emoticons và ảnh, video, nhạc vào Thread Comment Blogger

Nếu bạn đang dùng Thread Comment mới của Blogger thì việc áp dụng emoticons và mutilmedia như hướng dẫn trước của mình sẽ không có tác dụng. Trong bài viết này mình sẽ cập nhật cho những bạn đang dùng Thread Comment mới có thể chèn emoticons và ảnh, video, nhạc vào khung nhận xét.

Chèn đoạn mã dưới đây vào trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Read more…

Chia Header thành 2 phần

Chia header blogspot thành 2 phần - by: http://namkna.blogspot.com/

Mẫu mặc định của blogger chỉ có 1 header duy nhất với chiều rộng bằng chiều rộng của cả blog. Điều này đặt ra một vấn đề là nếu bạn muốn thêm một logo hay một banner quảng cáo trên phần header sẽ là điều rất khó, Tuy nhiên khó có nghĩa là không thể làm được.

Bài viết này hướng dẫn cách chia thành phần header (đầu) thành hai phần khác nhau, giúp bạn có thể đặt chỗ cho một logo bên trái và treo thêm một banner bên phải.

Mặc định phần đầu của Blogger chỉ chứa tên blog và miêu tả về blog nằm ngang trên cùng. Công việc của chúng ta là "cắt" phần đầu này ra làm hai phần.

Ở đây xin lấy mẫu SIMPLE đầu tiên làm ví dụ minh họa.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯) (Tiêu đề)' type='Header'/>
</b:section>

Và bạn thay đoạn code trên thành:

<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯) (Tiêu đề)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>

Và tiến hành lưu lại.

Bước 2. Tiếp tục tìm header-outer bạn sẽ nhìn thấy như thế này:

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Và thay toàn bộ thành:

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
  height: 100px;
  overflow: hidden;
}

#header1{
  width: 400px;
  float: $startSide;
  overflow: hidden;
}

#header2{
  width: 420px;
  float: $endSide;
  overflow: hidden;
}

.tabs-outer{
  clear: both;
}

Như bạn thấy trong đoạn CSS trên tôi đã đề nghị kích thước ngang header1 và header2 lần lượt là 400px và 420px. Tổng kích thước này không được vượt quá chiều ngang của template.

Tùy vào kích thước logo và banner mà muốn sử dụng cũng như kích thước của template mẫu hãy điều chỉnh các con số trên cho cân xứng.

bạn có thể vào trình thiết kế mẫu đối với các mẫu Siple để điều chỉnh độ rộng của blog.

Chiều ngang của template trong Trình thiết kế mẫu

- 2 tiện ích lệch nhau nhưng bạn yên tâm khi vào blog 2 tiện ích vẫn thảng hàng và đẹp.

- Lưu ý trong đoạn code trên mình sử dụng thuộc tính height: 100px; do vậy các logo của bạn phải có chiều cao tối đa là 100 px. và chiều rộng của logo căn cứ vào chiều rộng của header1 (Trong code của mình là 400 px thì ảnh logo có kích thước là 400 x 100).

- Đối với các template bạn download trên mạng để chí header thành 2 phần làm tương tự tuy nhiên phải thêm thuộc tính Width vào .header-outer như sau.
.header-outer {
  width: 840 px
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
  height: 100px;
  overflow: hidden;
}

- Thuộc tính Width này thường thì có sẵn bạn chỉ cần thêm thộc tính đó vào.

Chúc thành công!

Read more…

Khung comment đẹp (có phân cấp)

Đây là khung comment cải tiến từ một bài đăng cũ, ở đây add thêm mục phân cấp. Do là threaded comment mặc định của Blogger nên chỉ được tối đa là 1 cấp mà thôi. Tuy vậy đối với những ai thích cây nhà lá vườn thì sẽ thích khung comment này.

Trước tiên, hãy lưu lại một bản template gốc để đề phòng bất trắc. Sau đó vào phần chỉnh sửa HTML, chọn mở rộng mẫu, tìm đoạn sau:

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

Thay thế nó bằng đoạn sau:

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

Tiếp tục chèn đoạn code phía trên ]]></b:skin>



.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue   a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242     !important;text-align:center;text-decoration:none;background:#fede72;border:1px   solid   #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

.comments .comments-content .inline-thread{padding:0}

.comments .comments-content .comment-thread{margin:8px 0}

.comments .comments-content .comment-thread:empty{display:none}

.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

.comments .comments-content .comment:first-child{padding-top:16px}

.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}

.comments .comments-content .comment-body{position:relative}

.comments .comments-content .user{font-style:normal;font-weight:normal}

.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}

.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}

.comment-content{margin:0 0 8px;padding:0 5px}

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

.comments .comments-content .owner-actions{position:absolute;right:0;top:0}

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}

.comments .thread-toggle{cursor:pointer;display:inline-block}

.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}

.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

.comments .thread-chrome.thread-collapsed{display:none}

.comments .thread-toggle{display:inline-block}

.comments .thread-toggle   .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}

.comments .thread-expanded   .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc     AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC")   no-repeat scroll 0 0 transparent}

.comments .thread-collapsed   .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA     AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB   JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicVyr8aTmNj5geUeSmB0XlYWYAiDdZuD6rNNdrXBy58DVj3GlqkDbisOkboRFz6XUtnPyre_xwU-sGGUrt8Bf2uXmJx6qDYt3MVSsB9KFH_Q3dyI0Gu4D0-E5RgMeAYYD27DwX5qsc3nA/s51/arrow.png)   top right   no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px   !important;height:51px !important;max-width:65px   !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid   #ccc;width:45px !important;height:45px !important;max-width:45px   !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Save template lại và test.

Read more…

Hiệu ứng phóng to ảnh khi dê chuột vào với Hover Image Gallery

Hôm nay Namkna sẽ giới thiệu cho các bạn một hiệu ứng phóng ảnh hoàn toàn mới. Khi bạn dê chuột vào ảnh. Nếu các bạn còn nhớ thì mình đã từng giới thiệu cho các bạn Hiệu ứng thay đổi ảnh khi dê chuột vào Hiệu ứng này còn một nhược điểm là hoạt động không tốt trên IE.
Các bạn cso thể xem Demo:

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:
Tiếp theo vào Thiết kế -> Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

Code khi chèn ảnh:

<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>

Chúc thành công!

Read more…

ĐẶT NÚT SHARE CỦA ADDTHIS VÀO BLOGSPOT

Ai làm blog hẳn cũng biết rằng để blog mình được mọi người biết đến thì rất cần đến sự "lan truyền" thông qua các mạng xã hội, email, bookmarks... Có rất nhiều những trang như vậy, một số thì được ưa chuộng tại Việt Nam, một số thì lại phổ biến ở những nơi khác. Nếu bạn đã từng sử dụng hoặc nhìn thấy những bộ nút chia sẻ, như kiểu Sharing is sexy, thì bạn sẽ thấy rằng tối đa bạn cũng chỉ thể hiện được hơn chục nút là cùng. Vậy những nút chia sẻ còn lại thì sao?

Rất may là công cụ Share của Addthis đã giúp chúng ta giải quyết điều đó. Gần 350 trang chia sẻ, mạng xã hội, bookmarks, email,.. được tích hợp vào trong 1 nút "Share". Trong đó có 2 trang của Việt Nam là Zingme và Go.vn. Thật tuyệt vời phải không nào? Thông thường thì các blog khác hay đặt nút Share này ở ngay dưới tiêu đề của bài đăng. Nhưng ở Share All World, tôi cho rằng bộ nút chia sẻ nên đặt ở cuối bài đăng. Bởi vì, nếu khách ghé thăm và đọc hết bài viết của bạn và thấy thích thú họ sẽ chia sẻ ngay bài viết với bộ nút ngay trước mặt thay vì phải đảo lên đầu trang tìm kiếm.

Vậy thì, để có những nút chia sẻ trên đây chúng ta cần phải làm gì?
Trước hết, bạn vào Template → Edit HTML → Expand Widgets Template.
Sau đó, bạn tìm đến đoạn code: <div class='post-header'> (vị trí dưới tiêu đề bài viết) và đặt ngay trước nó đoạn code dưới đây hoặc đoạn mã dưới được đặt ngay sau <div class='post-footer-line post-footer-line-1'>
(sau bài viết liên quan)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- AddThis Button BEGIN -->

<SPAN class='addthis_toolbox addthis_default_style addthis_32x32_style' style='float:right; margin-top:10px; border:1px solid; background-color:#BABFBE; padding:10px; width:95%;'><span style='float:left; padding-right:30px; font-weight:bold; text-align:left;'>LIKE IT? PLEASE SHARE:</span>

<a class='addthis_button_preferred_1'/>
 <a class='addthis_button_preferred_2'/>
 <a class='addthis_button_preferred_3'/>
 <a class='addthis_button_preferred_4'/>
 <a class='addthis_button_preferred_5'/>
 <a class='addthis_button_preferred_6'/>
 <a class='addthis_button_preferred_7'/>
 <a class='addthis_button_preferred_8'/>

<a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4d2267003d6799cf'/>

</SPAN>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=taikovn' type='text/javascript'/>

<!-- AddThis Button end -->

</b:if>

Thực ra, vị trí của bộ nút còn tùy thuộc vào template của bạn, chứ không hẳn là phải đặt chính xác trước <div class='post-header'>. Như trường hợp của Share All World, đoạn mã trên được đặt ngay trước <div class='post-footer-line post-footer-line-1'>.

Trong đoạn mã trên, những dòng màu xanh là quy định CSS của Share bar, bạn có thể tự thay đổi cho phù hợp với blog của bạn. Các dòng màu đỏ là số lượng các nút được hiển thị theo số thứ tự, theo bạn chọn trong phần Setting của nút Share. Bạn tùy ý thêm bớt hay thay đổi nút theo ý thích.
Chúc bạn thành công!

Read more…

Chèn nút like và Fan Page Facebook dưới mỗi bài viết

Trong quá trình đi dạo quanh và thăm các Blog trong cộng đồng Blogger, ShareAllWorld nhận thấy có một số Blogspotter có Form khá chuyên nghiệp cho Like button đặt dưới mỗi bài viết. Với bản chất "ham của lạ", tôi cũng cố mày mò tìm cách làm sao dinh được nó về áp dụng cho blog của mình. Vì "trình độ có hạn mà thủ đoạn có thừa", nên như mọi khi, lại áp dụng tuyệt chiêu 'View Page source'. Nếu bạn còn chưa hình dung được "nó" thì hãy xem Demo trước và bắt tay vào việc nhé...

Nhìn cuối bài

How to add professional form for Like button and Fanpage of Facebook on Blogger

1. Đăng nhập Blogger Dashboard → Design → Edit HTML → Expand Widget Template.
2. Gán CSS cho form bằng cách tìm đoạn mã ]]></b: skin> và dán đoạn mã sau vào ngay trên nó:

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5bvxHasr1IBpwW6V2cKPf36Sw9Iqa9x9EuXuiKBgAWpc5v_BstHxouCJJYdgvQx9KrgO-mOH25vwfuPvRQmCqsJmU2IsuYoHdVxVGYJoUFcAclMqSA99Xq9bWEqdbe2HCO2lXkUA-g/") no-repeat scroll left top transparent;
display:block;
margin-left:425px;
text-indent:-5000px;
}

.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}

3. Sử dụng Cltr+Fđể tìm đoạn mã <data:post.body/> và dán ngay sau nó đoạn mã dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'>
<a href='http://www.facebook.com/shareallworld.info' rel='nofollow'/>
</div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>

Lưu ý thay đoạn link 'http://www.facebook.com/shareallworld.info' bằng FanPage link của bạn.
Nhấn "Save template" nữa là xong! Chúc bạn thành công!

Read more…

Nút Add Comments Cho Blog

Đây là một thủ thuật khá hay cho blog. Một hiệu ứng thích hợp cho các blog có nhiều comments. Giúp người đọc đỡ phải cuộn chuột xuống cuối blog mới viết được nhận xét. (Làm cái nút này sẽ tăng được tuổi thọ cho con chuột đó :D)

Xem Demo cuối bài

Vào mục Thiết Kế -- Chỉnh Sửa HTML -- chọn Mở rộng mẫu tiện ích.
Chèn đoạn Code sau phía trên thẻ ]]></b:skin>

a.add_comment{text-decoration:none;color:#fff}

.add_comment{float:right;padding:6px    10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b    5%,#d54746);background:-webkit-gradient(linear,left top,left    bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746');       -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px    solid #d1371c;border-bottom:1px solid  #9f220d;color:#FFF;text-shadow:0   1px 1px #6f3a02}

.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43    5%,#d04443);background:-webkit-gradient(linear,left top,left    bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443');       -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px    solid #9f220d}

.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px    #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43    95%,#d04443);background:-webkit-gradient(linear,left top,left    bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43');       -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset    0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px    #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0    #e0c7c7}

Tiếp tục tìm đoạn code sau:

<data:post.body/>

Chèn vào dưới nó đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a class='add_comment' href='#comment-form'>Add a comment</a>

<div class='clear' />

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script  type='text/javascript'>$('.add-comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Lưu lại là xong.
Chú ý: ở đoạn code số 1 có mấy dòng mã màu kiểu như #d04443 bạn có thể thay thành các đoạn mã màu khác cho phù hợp với giao diện trên blog của mình.

Read more…

Followers

Popular Posts

vinh36.blogspot.com

Trình diễn bài mới với tiện ích VNE Recent Posts

trỉnh diễn bài viêt dạng SlideTab Recent posts (jQuery)

Tạo list bài viết theo nhãn khi di chuột hiện ảnh thumlb

Hướng dẫn tạo thanh Menu cố định ở đầu blog.

Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot

Mở rộng:

Chèn emoticons và ảnh, video, nhạc vào Thread Comment Blogger

Chia Header thành 2 phần

Khung comment đẹp (có phân cấp)

Hiệu ứng phóng to ảnh khi dê chuột vào với Hover Image Gallery

ĐẶT NÚT SHARE CỦA ADDTHIS VÀO BLOGSPOT

Chèn nút like và Fan Page Facebook dưới mỗi bài viết

Nút Add Comments Cho Blog

Top Hot

ADS

Lưu trữ Blog

Welcome to vinh36.blogspot.com

Email: quangvinh936@gmail.com

vinh36.blogspot.com