Google.com.vn nguyenlibra.com
in lịch để bàn, lịch để bàn cá nhân, số lượng ít, giá rẻ, hồ chí minh
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
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Hiển thị bài viết mới nhất chạy marquee chiều ngang

Share |

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.

thủ thuật blog, hiển thị bài viết mới nhất

Để 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

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script

Share |

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

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Trình chiếu nội dung và hình ảnh sử dụng jQuery

Share |

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() {
$(&#39;#s3slider&#39;).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~

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Tạo copyright và menu mini cuối blog cho Blogspot

Share |

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~

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Tiện ích Danh Ngôn Thay Đổi dành cho blogspot

Share |


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~

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Tiện ích dịch Blog / Web sang 52 ngôn ngữ

Share |


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!

Nhãn:
Browse » Home » Posts filed under ☀ Thủ thuật blog

* Chèn game Sudoku vào Blogspot

Share |

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!

Nhãn:
nguyen_libra's blog - Copyright © 2009 - 2016 - Trình duyệt tốt với Firefox
Lên đầu trang
Xuống cuối trang