Hiển thị các bài đăng có nhãn ☀ Thủ thuật blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn ☀ Thủ thuật blog. Hiển thị tất cả bài đăng
Có nhiều kiểu tiện ích Bài viết mới nhất với những kiểu dáng và đặc điểm riêng biệt. Hôm nay tôi xin giới thiệu một kiểu tiện ích Bài viết mới nhất chạy marquee chiều ngang (Horizontal Marquee Recent Posts Widget) rất hữu ích cho blogspot. Tiện ích này hiển thị những bài viết mới nhất cho blogspot với kiểu trình chiếu chạy ngang ( không có ảnh đại diện ), với đặc trưng tiết kiệm không gian web là một ưu điểm có thể nhìn thấy dễ dàng so với các kiểu tiện ích cùng loại.
Để cài đặt tiện ích này, bạn chỉ cần Đăng nhập Blogger sau đó đặt toàn bộ đoạn code dưới đây vào phần nội dung của một tiện ích HTML/Javascript là OK.
<style type="text/css">
.feedmarquee a:link{
font-size: 11px;
text-decoration: none;
color:#fff;
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: #C0C0C0;
padding:2px;
width: 640px;
}
</style>
<script src="http://hacodeproject.googlecode.com/files/recentpostsscrollerha.js" type="text/javascript"></script>
<div class="feedmarquee">
<script type="text/javascript">
var nMaxPosts = 20;
var sBulletChar="-" ;
var nWidth;
var nScrollDelay = 155;
var sDirection="left";
var sOpenLinkLocation="p";
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerha" type="text/javascript"> </script>
</div>
Trong đoạn code trên, bạn có thể điều chỉnh chiều rộng bố trí tiện ích tại tham số width: 640px, điều chỉnh số bài viết tối đa được trình chiếu tại tham số var nMaxPosts = 20 đồng thời cần thay huynh-nhat-ha bằng tên blogspot của bạn.
Để cài đặt tiện ích này, bạn chỉ cần Đăng nhập Blogger sau đó đặt toàn bộ đoạn code dưới đây vào phần nội dung của một tiện ích HTML/Javascript là OK.
<style type="text/css">
.feedmarquee a:link{
font-size: 11px;
text-decoration: none;
color:#fff;
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: #C0C0C0;
padding:2px;
width: 640px;
}
</style>
<script src="http://hacodeproject.googlecode.com/files/recentpostsscrollerha.js" type="text/javascript"></script>
<div class="feedmarquee">
<script type="text/javascript">
var nMaxPosts = 20;
var sBulletChar="-" ;
var nWidth;
var nScrollDelay = 155;
var sDirection="left";
var sOpenLinkLocation="p";
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerha" type="text/javascript"> </script>
</div>
Trong đoạn code trên, bạn có thể điều chỉnh chiều rộng bố trí tiện ích tại tham số width: 640px, điều chỉnh số bài viết tối đa được trình chiếu tại tham số var nMaxPosts = 20 đồng thời cần thay huynh-nhat-ha bằng tên blogspot của bạn.
nguồn: http://www.bloggerism.tk
Tomorrow again là một script do Dhteumeuleu phát triển dùng cho gallary ảnh với một hiệu ứng khá độc đáo.
Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.
Bước 1. Đặt đoạn code sau đây vào trước thẻ </head> .
<script type='text/javascript' src='http://hacodeproject.googlecode.com/files/tomorrowagain.js' ></script>
Hoặc nếu bạn không muốn sử dụng file nguồn như trên thì sử dụng đoạn code sau đây.
<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,
run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}
this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>
Bước 2. Đặt đoạn CSS sau đây vào trước thẻ </head> .
<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}
/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}
/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>
Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.
Bước 3. Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.
<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>
Nguồn: http://huynh-nhat-ha.blogspot.com
Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.
Bước 1. Đặt đoạn code sau đây vào trước thẻ </head> .
<script type='text/javascript' src='http://hacodeproject.googlecode.com/files/tomorrowagain.js' ></script>
Hoặc nếu bạn không muốn sử dụng file nguồn như trên thì sử dụng đoạn code sau đây.
<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,
run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}
this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>
Bước 2. Đặt đoạn CSS sau đây vào trước thẻ </head> .
<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}
/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}
/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>
Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.
Bước 3. Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.
<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>
Nguồn: http://huynh-nhat-ha.blogspot.com
Mày mò, lụm lặt bữa giờ mới ra được cái mã trình diễn ảnh kèm nội dung sử dụng jQuery cực đẹp này, hôm nay xin chia sẻ với các bạn. Cùng làm ngay bây giờ nào!Xem: Demo
Trước hết bạn chèn đoạn mã sau vào trước thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
Chèn tiếp đoạn mã sau vào trước thẻ ]]></b:skin>
#s3slider {
width: 620px;
height: 300px;
position: relative;
overflow: hidden;
margin-top: 17px;
margin-bottom: 10px;
*margin-bottom: 0px;
background:#ffffff;
border: 1px solid #000;
}
#s3sliderContent {
width: 620px;
height:300px;
background:#ffffff;
position: absolute;
top: -13px;
*top: 0px;
padding: 0px;
list-style:none;
margin-left: 0;
overflow: hidden;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
right: 0;
font:Georgia, serif;
padding: 10px 13px;
font-size:12px;
width:180px;
height:300px;
*max-height:300px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
top: 0;
overflow: hidden;
}
.s3sliderImage strong a{
color:$titlecolor;
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size:20px;
}
Cuối cùng là tạo một HTML và dán đoạn mã sau vào:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Link_anh_1" />
<span><strong><a href="Link_lien_ket_1">Ten _anh_1</a></strong>
<p>Noi_dung_1</p>
</span>
</li>
<li class="s3sliderImage">
<img src="Link_anh_2" />
<span><strong><a href="Link_lien_ket_2">Ten _anh_2</a></strong>
<p>Noi_dung_2</p>
</span>
</li>
<li class="s3sliderImage">
<img src="Link_anh_3" />
<span><strong><a href="Link_lien_ket_3">Ten _anh_3</a></strong>
<p>Noi_dung_3</p>
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
Tùy chỉnh Link cho phù hợp và Save.
~libra~
Bạn Kira [ http://freejapanesemovies.blogspot.com/] có hỏi mình cách làm menu mini và copyright như phía cuối blog của mình, bữa giờ bận thi nhiều quá nên bây giờ mình mới có bài viết này. Mình cũng chỉ là tay ngang mới bước chân vào thế giới Blogspot, tập tành làm blog nên biết gì thì mình chỉ cái đó thôi.Mã bài viết này mình lấy từ blog của mình và đem lên đây chia sẻ với các bạn thôi chứ ko phải do mình viết đâu, mã cũng tương đối đơn giản và dễ thao tác.
Đầu tiên là khi lấy một theme nào trên mạng đều có hiển thị bản quyền tác giả phía cuối blog, điều này có hơi hạn chế một xíu, có nhiều bạn sẽ ko thích, nên bước đầu tiên là cần phải ẩn hoặc xóa nó đi để blog để blog đẹp hơn một xíu và mang tính riêng của mình hơn. Nó sẽ có dạng như sau:
Vào Thiết kế -> Chỉnh sửa HTML, ko cần chọn Mở rộng tiện ích. Bấm Ctrl + F để tìm dòng chữ Attribution, sau đó bạn sẽ nhìn thấy đoạn mã sau:
<b:widget id='attribution1' locked='true' title='' type='attribution'/> </b:widget>
Xóa nó đi là Ok, hoặc ẩn nó bằng cách làm như sau:
<!--
<b:widget id='attribution1' locked='true' title='' type='attribution'/>
</b:widget>-->
Cuối cùng lưu lại và xem thử blog của bạn nha!
Tiếp theo là tạo menu mini cuối blog.
Vào Thiết kế -> Chỉnh sửa HTML, chèn đoạn mã sau vào trước thẻ ]]></b:skin>
#credits{
width:840px;/*độ rộng tiện ích*/
padding:10px 0px 5px 0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQgH4yNMWL1k6scdCFYiTBJPGFk3yKvPLvVyYEQqJLtBjNgXbmZAXV1r0YPKK4XpoX8I3F2D3JWuyTAgwFwMKlDKTKjI1HfDPmPmxHrmGrj677_11caK3Ut-N3TmM9Msh5Nc17EH2oLCg/s1600/80percentblack.png") repeat scroll 0 0 transparent;/*link màu nền tiện ích, ở đây là màu đen*/
position:relative;
font-size:13px;
border:1px solid #404040;/*màu chữ hiển thị ko có link liên kết*/
margin-left:180px;/*khoảng cách so với lề trái*/
height:30px;/*chiều cao tiện ích*/
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-moz-box-shadow:1px 1px 5px #000000;
}
#credits_left {
float:left;
padding-left:40px;
}
#credits_right {
float:right;
padding-right:20px;
}
#credits a {
color:#D54E21;/*màu chữ hiển thị khi có liên kết link*/
}
#credits a:hover {
font-color:#AA0000;/*màu chữ hiển thị khi click chuột*/
text-decoration:underline;
}
Tiếp tục thêm đoạn mã sau vào trước thẻ </body>
<div id='credits'>
<div id='credits_left'>
Copyright 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div id='credits_right'>
<p>
<a expr:href='data:blog.homepageUrl' title='Home'>Home</a> | <a href='Link_lien_ket_1'><span>Ten_link_1</span></a> | <a href='Link_lien_ket_2'><span>Ten_link_2</span></a> | <a href='Link_lien_ket_3'><span>Ten_link_3</span></a> | <a href='Link_lien_ket_4'><span>Ten_link_4</span></a> |
</p>
</div>
</div>
Save lại là xong rồi đó.
Note: các bạn chú ý khi điều chỉnh khoảng cách so với lề trái thì phải điều chỉnh luôn cả chiều rộng của tiện ích để có được khoảng cách đẹp nhất trên blog. Nếu thấy hay đừng quên để lại comment nha!
~libra~
Một tiện ích rất hay dành cho blog của bạn. Danh ngôn sẽ thay đổi mỗi lần bạn click, rất nhiều câu danh ngôn hay sẽ hiện ra...và quan trọng nhất là đoạn mã của nó, vô cùng ngắn gọn. Bạn chỉ cần copy và paste vào nơi bạn muốn hiện những câu danh ngôn này.
<script type="text/javascript" src="http://javascriptbank.com/service/getFreeQuote.php"></script>
~libra~
Chỉ cần sao chép và dán mã sau vào vị trí mà bạn muốn đặt tiện ích. Tiện ích này sử dụng AJAX và các ngôn ngữ của Google API. Điểm đặc biệt ở đây là trang web của bạn sẽ được dịch sang 52 ngôn ngữ khác nhau, rất nhiều phải ko nào?
Dạng hiển thị là một button cực kì nhỏ gọn, rất đẹp trên blog / web của bạn:
Cuối cùng là đoạn mã đây:
<!-- Begin TranslateThis Widget -->
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
<!-- End TranslateThis Widget -->
Nếu thấy hay thì đừng quên comment cho mình nha!
Bạn thấy thế nào nếu vừa vào blog của mình vừa chơi Sudoku nhỉ? Rất tiện đúng ko nào ^^Vô cùng đơn giản, chỉ cần tạo một tiện ích mới rồi dán đoạn mã sau vào là OK
<iframe src="http://www.odyssey.ie/sudoku/sudoku-google.html" frameborder="0" width="200" height="230" scrolling="no"></iframe>
Giờ thì chơi thử nào!
Hôm nay mình xin chia sẻ với các bạn thủ thuật tạo slide ảnh vô cùng đơn giản và gọn nhẹ. Thủ thuật này có ưu điểm là load rất nhanh.Đầu tiên các bạn vào Thiết kế -> Thêm tiện ích -> HTML/Javascript, sau đó dán toàn bộ đoạn mã sau vào tiện ích, chỉnh sửa Link_anh và Link_lien_ket_den_anh là OK:
<embed type="application/x-shockwave-flash" src="http://img694.imageshack.us/img694/7500/beautifuldreamblogslide.swf?http://i465.photobucket.com/support/http://vn.myblog.yahoo.com/cindy-babylove" flashvars="config=4&bcastr_flie=Link_anh1|Link_anh2&bcastr_link=Link_lien_ket_den_anh1|Link_lien_ket_den_anh2" wmode="transparent" width="500" height="300"></embed>
Bây giờ là phần chỉnh sửa:
* config=4: tốc độ thay đổi ảnh 1 -> 10, số càng lớn, tốc độ thay đổi ảnh càng nhanh, nên chọn 4 là phù hợp nhất.
* Link_anh1: thay bằng link ảnh của bạn
* Link_lien_ket_den_anh1: thay bằng kink liên kết đến một trang nào đó mà bạn thích ( thứ tự phù hợp với link ảnh nha bạn)
* width=500, height=300: bạn tùy chỉnh chiều dài và chiều rộng ảnh hiện thị tại đây.
Cuối cùng Save lại là xong. Nếu thấy hay thì đừng quên để lại comment cho mình nha!
Cách cài đặt thật quá đơn giản.Khi chỉnh sửa Template, bạn hãy dán toàn bộ đoạn mã dưới đây vào trước thẻ </body> (nên ở chế độ chọn Expand Widget Templates) là OK.
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Posts and Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById('main-wrapper');
theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />');
bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
//<![CDATA[
//Emoticons for Blogger Posts and Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById('main-wrapper');
theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />');
bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
Bây giờ tôi xin hướng dẫn thêm một số điều cơ bản để bạn có thể tự làm thêm với thủ thuật này.
Bạn cần biết toàn bộ phần nội dung bài viết (post-body) và nhận xét (comments-block) nằm trong phần main của Template. Xét về yếu tố HTML thì post-body là class trong khi comments-block lại là id. Nếu muốn đưa biểu tượng cảm xúc vào cả bài viết lẫn nhận xét thì ta chỉ cần gán chức năng biểu tượng cảm xúc cho một id chứa cả post-body và comments-block. Id đó chính là main-wrapper hoặc content (có thể với mỗi Template sẽ có tên khác nhau do người tạo Template đặt ra). Id này nằm trước dòng
<b:section class='main' id='main' showaddelement='yes'>
cũng có thể là:
<b:section class='main' id='main' showaddelement='no'>
Như vậy trong phần code ở trên, bạn cần thay thế tên id tương ứng cho Blog của bạn.
Bạn có thể tự tăng thêm biểu tượng cảm xúc cho danh mục thật dễ dàng. Chú ý đến dòng code sau đây:
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
Bạn hãy tìm biểu tượng cảm xúc trên mạng Internet (quá dễ mà), lấy đường link hoặc lưu vào máy tính rồi upload lên webhost nào đấy hoặc lên chính Blogger để lấy đường link. Sau đó lần lượt gán theo thứ tự như thế này:
theText = theText.replace(/:9\)/g,'<img src="URL_9" />');
theText = theText.replace(/:10\)/g,'<img src="URL_10" />');
theText = theText.replace(/:11\)/g,'<img src="URL_11" />');
…
…
Cứ theo thứ tự như thế bạn sẽ thêm vào đoạn code nêu trên để tăng số lượng biểu tượng cảm xúc theo ý thích của bạn.
Sau khi cài đặt thành công, mỗi khi muốn chèn biểu tượng cảm xúc vào bài viết và nhận xét thì chỉ cần đánh nhóm ký tự gồm dấu : và một số thứ tự bất kỳ (từ 1 đến 99) thì sau khi xuất bản bài viết, biểu tượng cảm xúc sẽ hiển thị ngay trên tất cả các công cụ trình duyệt.
Nếu bạn thấy thủ thuật này bổ ích thì bạn cứ thử nhé, và đừng quên để lại một nhận xét thật chân thành cho kỳ công này của tác giả.
Nguồn http://huynh-nhat-ha.blogspot.com
Có một blogger hỏi tôi rằng, cộng đồng Blogger đã có nhiều thủ thuật tạo tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnai Widget) và từ đó cũng xuất hiện tiện ích Nhận xét mới nhất (Recent Comments Widget). Tuy nhiên vẫn chưa thấy có bài viết nào nói về tiện ích Nhận xét mới nhất có ảnh đại diện (Recent Comments width Thumbnail Widget).
Trước hết, các blogger cần đăng ký cho mình một tài khoản tại địa chỉ http://www.loudfusion.com/signup.php. Khi đã hoàn tất quá trình trên, hãy đăng nhập với tên account của mình rồi click vào thanh Menu music ở bên trong. Tại đây, người sử dụng có thể lựa chọn bài hát theo những mục như Artish (ca sỹ), Keywords (từ khoá) hay SongTitle (tên bài hát). Nếu như muốn tạo một list bài hát của riêng mình, hãy nhấn vào ô Playlist (cạnh Setting). Một cửa sổ Add Song to Playlist sẽ xuất hiện. Công việc lúc này là khai báo tại các ô Artist, Album, Title, Genre và URL. Khi đã hoàn thành, hãy click vào ô Add song. Lưu ý rằng URL tại đây chỉ tương thích với link có file mp3.
